I'm using Flexbox in CSS. In the next link, you can see three squares lying one above the other: http://codepen.io/CrazySynthax/pen/PbLjMO
The first square is the smallest and the last square is the biggest. My question is how to draw these squares that their height will be identical, but their width will differ, so they will look like this:
---
------
---------
This is the code:
<div class="container">
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
</div>
html, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
displax: flex;
}
.container{
height: 100%;
width: 100%;
display: flex;
flex-flow:column wrap;
justify-content:space-around;
}
.square {
flex:1 1 auto;
background-color:gray;
border:solid;
margin: 1em;
}
.square:nth-child(1) {
flex-grow: 1
}
.square:nth-child(2) {
flex-grow: 2
}
.square:nth-child(3) {
flex-grow: 5
}
Add a class to each div with desired width & leave flex-grows in 1 to maintain same height:
html, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
displax: flex;
}
.container{
height: 100%;
width: 100%;
display: flex;
flex-flow:column wrap;
justify-content:space-around;
}
.square {
flex:1 1 auto;
background-color:gray;
border:solid;
margin: 1em;
width: 200px
}
.square:nth-child(1) {
flex-grow: 1;
}
.square:nth-child(2) {
flex-grow: 1;
}
.square:nth-child(3) {
flex-grow: 1;
}
/*added classes*/
.one {
width: 150px;
}
.two {
width: 250px;
}
.three {
width: 350px;
}
#media (max-width: 350px) {
.one {
width: auto;
}
.two {
width: auto;
}
.three {
width: auto;
}
}
<div class="container">
<div class="square one"></div>
<div class="square two"></div>
<div class="square three"></div>
</div>
EDIT: For responsive beyond 350px or whatever add a #media query (make sure it's set at the end of the CSS sheet or later than the custom width .one .two & .three):
Test resizing window on external JSFiddle
#media (max-width: 350px) {
.one {
width: auto;
}
.two {
width: auto;
}
.three {
width: auto;
}
}
Related
In the snippet below you can see that the green .bottom stops at the width of the screen using a width of 100%. Can I force the width to match exactly the parent width? In this case 1000px.
The problem is that the red .top is a variable width so setting a fixed width for the green .bottom is not an option.
.parent {
width: 700px;
}
div.container {
overflow: auto;
background-color: yellow;
display: flex;
flex-direction: column;
height: 100px;
}
div.top {
background-color: red;
height: 40px;
width: 1000px;
}
div.bottom {
background-color: green;
height: 20px;
width: 100%;
}
<div class="parent">
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
Use CSS grid instead of flexbox:
.parent {
width: 700px;
}
div.container {
overflow: auto;
background-color: yellow;
display: grid;
align-content: start; /* don't forget this */
height: 100px;
}
div.top {
background-color: red;
height: 40px;
width: 1000px;
}
div.bottom {
background-color: green;
height: 20px;
}
<div class="parent">
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
How to make a div fill a remaining horizontal space?
(26 answers)
Closed 4 years ago.
I have two divs side by side.
Div1 width is 200px
and Div2 should fill the screen.
To do this, I use jQuery and detect the screen with and then substuct 200 from it.
But if I use this way, jQuery slows down the browser.
So I'm searching a better way rather than using jQuery.
What is the best way to do this?
Update :
I forgot to write that float did not fixed my solution.
Thank you I'm going to check the answers.
float solution
body { margin: 0; }
#a {
background-color: lime;
width: 200px;
float: left;
height: 100vh
}
#b {
background-color: blue;
margin-left: 200px;
height: 100vh;
}
<div id="a"></div>
<div id="b"></div>
css grid
body {
margin: 0;
}
.gridcontainer {
display: grid;
grid-template-columns: 200px 1fr;
height: 100vh;
}
#a {
background-color: lime;
height: 100vh;
}
#b {
background-color: blue;
height: 100vh;
}
<div class="gridcontainer">
<div id="a"></div>
<div id="b"></div>
</div>
flexbox
body {
margin: 0;
}
.flexcontainer {
display: flex;
}
#a {
background-color: lime;
width: 200px;
height: 100vh;
}
#b {
background-color: blue;
height: 100vh;
width: calc(100% - 200px);
}
<div class="flexcontainer">
<div id="a"></div>
<div id="b"></div>
</div>
inline-block solution
body {
margin: 0;
}
.inlineblockcontainer {
font-size: 0;
}
.inlineblockcontainer>div {
display: inline-block;
}
#a {
background-color: lime;
font-size: 16px;
width: 200px;
height: 100vh;
}
#b {
background-color: blue;
font-size: 16px;
height: 100vh;
width: calc(100% - 200px);
}
<div class="inlineblockcontainer">
<div id="a"></div>
<div id="b"></div>
</div>
html,
body,
#container {
height: 100%;
}
#left {
width: 200px;
float: left;
min-height: 100%;
background-color: blue;
}
#right {
width: 100%;
min-height: 100%;
background-color: red;
}
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
https://jsfiddle.net/832ahuqc/6/
I'm trying to achieve a responsive layout as outlined in the image, left side would be mobile, right side desktop. This would be relatively easy using flexbox if I could set a fixed height for the wrapper, but because the content is dynamic this is not possible.
Another solution would be to use position absolute on element C, but this seems very hacky, I'm hoping to find a more elegant solution.
Here is a framework for the code:
.wrapper {
display: flex;
flex-direction: column;
}
#media(min-width: 800px) {
.wrapper {
flex-direction: row;
flex-wrap: wrap;
}
}
.section {
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
}
.section-a {
background: green;
height: 200px;
}
#media(min-width: 800px) {
.section-a {
flex-basis: 33%;
}
}
.section-b {
background: yellow;
height: 400px;
}
#media(min-width: 800px) {
.section-b {
flex-basis: 66%;
}
}
.section-c {
background: blue;
height: 200px;
}
#media(min-width: 800px) {
.section-c {
flex-basis: 33%;
}
}
<div class="wrapper">
<div class="section section-a">A</div>
<div class="section section-b">B</div>
<div class="section section-c">C</div>
</div>
Thanks for the help!
You can achieve this by using grid. I have simplified your code and removed unwanted css
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
}
.section {
padding: 20px;
display: flex;
align-items: center;
}
.section-a {
height: 50px;
background-color: green;
}
.section-b {
grid-row: row1-start / row2-end;
grid-column: 2/-1;
background-color: yellow;
}
.section-c {
background-color: blue;
height: 180px;
}
<div class="wrapper">
<div class="section section-a">A</div>
<div class="section section-b">B</div>
<div class="section section-c">C</div>
</div>
Working fiddle here
Edit: it's an attempt, as I misunderstood OP's question. My answer has a given .wrapper height.
A solution using flex with the following properties:
order
flex-basis
This code applies for your desktop layout:
.wrapper {
width: 100%;
height: 100vh;
display: flex;
flex-flow: column wrap;
}
.section {
width: 50%;
border: 1px solid black;
box-sizing: border-box;
}
.section-a {
height: 25vh; // for example
}
.section-b {
order: 3;
flex-basis: 100%;
}
.section-c {
flex-grow: 1;
}
<div class="wrapper">
<div class="section section-a">A</div>
<div class="section section-b">B</div>
<div class="section section-c">C</div>
</div>
I need to have a 100% height flexbox with just a children footer with 50px.
Is possible without have the calc(100% - 50px) ?
here my try:
body, html{
height:100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
background-color:red;
}
.flex-1 {
background-color: yellow;
}
.flex-A {
background-color: blue;
display: flex;
flex-direction: column;
height: 100%;
}
.flex-1-child {
background-color: purple;
overflow-y: auto;
height: calc(100% - 50px);
}
.flex-2-child {
background-color: green;
height: 50px;
}
.text{
height: 500px;
}
<div class="container">
<div class="flex-1">test</div>
<div class="flex-A">
<div class="flex-1-child">
<div class="text">test2</div>
</div>
<div class="flex-2-child">
<div>test</div>
</div>
</div>
</div>
I don't have the 100% height.
Thank you for your help.
Change height: calc(100% - 50px); to flex: 1; and it will expand its height maximally.
I guess this is what you want?
https://jsfiddle.net/shuding/3ss44wuk/1
Simply use flex: 1 on the dynamic element.
body, html{
height:100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
background-color:red;
}
.flex-1 {
background-color: yellow;
}
.flex-A {
background-color: blue;
display: flex;
flex-direction: column;
height: 100%;
}
.flex-1-child {
background-color: purple;
overflow-y: auto;
flex: 1;
}
.flex-2-child {
background-color: green;
height: 50px;
}
.text{
height: 500px;
}
<div class="container">
<div class="flex-1">test</div>
<div class="flex-A">
<div class="flex-1-child">
<div class="text">test2</div>
</div>
<div class="flex-2-child">
<div>test</div>
</div>
</div>
</div>
http://imgur.com/IAHUR4U
I need to style a grid like above. The only thing I have a problem with is the 2 boxes on top of each other within the same row. Has anyone any suggestions on how to do this ?
Cheers!
css:
{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.row { width: 1000px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.column, .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
[class*="column"] + [class*="column"]:last-child { float: right; }
[class*="column"] + [class*="column"].end { float: left; }
.row .one { width: 8.33% }
.row .two { width: 16.66% }
.row .three { width: 25% }
.row .four { width: 33.33% }
.row .five { width: 41.66% }
.row .six { width: 50% }
.row .seven { width: 58.33% }
.row .eight { width: 66.66% }
.row .nine { width: 75% }
.row .ten { width: 83.33% }
.row .eleven { width: 91.66% }
.row .twelve { width: 100% }
.row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1; }
HTML:
<div class="row">
<div class="three columns">
...
</div>
<div class="nine columns">
...
</div>
</div>
<div class="row">
<div class="six columns">
...
</div>
<div class="six columns">
this is the div i need to split up into 2 divs on top of eachother
</div>
</div>
I would use float:right, and clear:right on the one on the bottom.