I want to create one flex container, which has 3 child items. However, I want two of the child items to be columns, and the third one to be a row which runs below of the the columns (like a footer). Is it possible?
This is probably best achieved by using two divs, one flex-box, and one that isn't: see below:
#wrapper {
display: flex;
background-color: lightblue;
}
#a {
background-color: lightgreen;
}
#b {
background-color: lightgray;
}
#c {
background-color: lightyellow;
}
<div id="wrapper">
<div id="a">This is a</div>
<div id="b">This is b</div>
</div>
<div id="c">This is c</div>
You can do something like THIS
.container {
display: flex;
flex-direction: column;
width: 100%;
}
.col-container {
display: flex;
flex-direction: row;
}
.col {
margin: 10px;
height: 200px;
width: 200px;
background-color: blue;
}
.row {
height: 100px;
width: 100%;
background-color: red;
}
<div class="container">
<div class="col-container">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row"></div>
</div>
Related
I have the following divs below:
.parent {
padding: 10px;
background: grey;
}
.child {
background: green;
display: block;
position: relative;
width: 50px;
}
.stacked {
left: 0px;
}
.three {
left: 200px;
}
<div class="parent">
<div class="child stacked">div1</div>
<div class="child stacked">div2</div>
<div class="child three">div3</div>
</div>
This looks like the following:
I would like divs 1 and 2 to stack as they do, but since div3 does not collide with the divs above, I'd like it to vertically aline with div 1.
If I switch display to inline or inline-block, it pushes div 2 to the right of div one. and the left values are not accurate to the parant.
The left values of the divs will be dynamically generated so I cannot know if the divs are overlapping or not.
Is this possible?
Edit: If you really want to align the 3rd div using positioning, then you can do it like so:
.parent {
padding: 10px;
background: grey;
position: relative;
}
.child {
background: green;
display: block;
position: relative;
width: 50px;
}
.stacked {
position: relative;
left: 0px;
}
.three {
position: absolute;
left: 200px;
top: 10px;
}
<div class="parent">
<div class="child stacked">div1</div>
<div class="child stacked">div2</div>
<div class="child three">div3</div>
</div>
You can use the column-count property like so:
.parent {
padding: 10px;
background: grey;
column-count: 2;
}
.child {
background: green;
display: block;
width: 50px;
}
<div class="parent">
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
</div>
Or you can use flexbox to wrap vertically, like so:
.parent {
padding: 10px;
background: grey;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 50px;
}
.child {
background: green;
display: block;
width: 50px;
}
<div class="parent">
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
</div>
Here's using grid:
.parent {
padding: 10px;
background: grey;
display: grid;
grid-auto-flow: column;
grid-template-rows: 1fr 1fr;
}
.child {
background: green;
display: block;
width: 50px;
}
<div class="parent">
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
</div>
Try this :
wrap div3 item in another div and give it a class property of flex-container.
.flex-container {
align-content: flex-start;
}
Ensure the flex direction is horizontal.
How to create two containers with equal width even if there are a lot of flex items inside one of them? I could add overflow hidden to both containers but it seems to be workaround rather than solution of the problem
<div class="parent">
<div class="child1">
blabla
</div>
<div class="child2">
<div class="container">
<div class="subcontainer">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="subcontainer">bbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="subcontainer">ccccccccccccccccccccccc</div>
<div class="subcontainer">dwadawdwdaadwawadawddwaw</div>
<div class="subcontainer">dddddddddddddddddddddddd</div>
<div class="subcontainer">eeeeeeeeeeeeeeeeeeeeeeee</div>
</div>
</div>
</div>
.parent {
display: flex;
}
.child1, .child2 {
flex: 1;
flex-basis: 50%;
/* overflow: hidden */
}
.container {
display: flex;
}
.child1 {
border: 1px solid red;
}
.child2 {
border: 1px solid green;
}
https://jsfiddle.net/0e7n6g8b/
Simply add flex-wrap:wrap; to your container div.
.container {
display: flex;
flex-wrap:wrap;
}
Thanks
I need css styling for 2 columns. The first column should use the complete width and the second column next to it should use only the width it needs. How can i do that? Is there any way to do this with display: flex?
Example:
"-" = whitespace
if second column is display: none, the first column should use width 100%
[First-Column-------------------------------------------------------]
and if not
[First-Column------------------------------------------------][HELLO]
[First-Column-------------------------------------------][HELLOHELLO]
You can do this with flexbox. Just use flex: 1 for the first child and flex: 0 for the second.
.wrapper {
display: flex;
flex-flow: row wrap;
color: white;
}
.child1 {
flex: 1;
background: red;
}
.child2 {
flex: 0;
background: blue;
}
<div class="wrapper">
<div class="child child1">
test
</div>
<div class="child child2">
test
</div>
</div>
If you hide the second child, the result looks like this:
.wrapper {
display: flex;
flex-flow: row wrap;
color: white;
}
.child1 {
flex: 1;
background: red;
}
.child2 {
flex: 0;
background: blue;
display: none;
}
<div class="wrapper">
<div class="child child1">
test
</div>
<div class="child child2">
test
</div>
</div>
If you want items with only width of the content you could use this:
.wrapper {
display: flex;
flex-flow: row wrap;
color: white;
justify-content: space-between;
}
.child1 {
background: red;
}
.child2 {
background: blue;
}
<div class="wrapper">
<div class="child child1">
test
</div>
<div class="child child2">
test
</div>
</div>
You can do this with below code:
.mainDiv, .mainDiv div{
display: block;
}
.mainDiv .firstDiv{
float: left;
width: 200px;
}
.mainDiv .secondDiv{
float: left;
width: calc(100% - 200px);
}
<div class="mainDiv">
<div class="firstDiv"> First Div </div>
<div class="secondDiv"> Second Div </div>
</div>
.main{
display:flex;
}
<div class="main">
<div>[First-Column------------------------------------------------]</div>
<div> [HELLO]</div>
</div>
For example I'm trying to stack blockes with different heights like this:
.container {
display: flex;
flex-flow: row wrap;
}
.box {
width: 50%;
height: 50px;
background-color: lightgreen;
}
.box2 {
width: 50%;
height: 25px;
background-color: lightgreen;
}
<div class="container">
<div class="box"></div>
<div class="box2"></div>
<div class="box2"></div>
</div>
How It should be:
As far as I know, this can only be solved if you nest the two <div class="box2"> inside of a <div class="box"> wrapper
.container {
display: flex;
flex-flow: row wrap;
}
.box {
width: 50%;
height: 50px;
background-color: lightgreen;
}
.box2 {
width: 100%;
height: 25px;
background-color: lightgreen;
}
<div class="container">
<div class="box"></div>
<div class="box">
<div class="box2"></div>
<div class="box2"></div>
</div>
</div>
Here is an example:
https://jsfiddle.net/7j6uknck/2/
Another solution (but more a hack for this case than a generic solution) is to keep all what you have and adjust margin of last element.
Of course the margin-top value will depend on ther other values
.container {
display: flex;
flex-flow: row wrap;
}
.box {
width: 50%;
height: 50px;
background-color: lightgreen;
}
.box2 {
width: 50%;
height: 25px;
background-color: red;
}
.box2:last-child {
margin-left:auto;
margin-top:-25px;
}
<div class="container">
<div class="box"></div>
<div class="box2"></div>
<div class="box2"></div>
</div>
The other solution gave a working flexbox example for that particular scenario.
But if flexbox isn't mandatory and you don't want to change the html structure, you can make use of float for your particular layout.
.container {
}
.box {
float:left;
width: 50%;
height: 50px;
background-color: lightgreen;
}
.box2 {
float:right;
width: 50%;
height: 25px;
background-color: lightgreen
}
<div class="container">
<div class="box"></div>
<div class="box2"></div>
<div class="box2"></div>
</div>
I am trying to make a nested 100% screen layout but I am running into a problem where the nested container does not fill 100% of the space of the parent cell in safari, even tho the cell itself does expand to fill all the available space. If I make the subContainer the actual flex cell as well it works, but I can´t do that for practical reasons. Any ideas?
jsfiddle
HTML:
<div id="masterContainer">
<div id="header">
header
</div>
<div id="content">
<div id="subContainer">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</div>
</div>
CSS:
#masterContainer {
display: flex;
flex-direction: column;
width: 200px;
height: 200px;
}
#header {
background: yellow;
}
#content {
background: grey;
flex: 1;
}
#subContainer {
display: flex;
width: 100%;
height: 100%;
}
#left {
background: red;
width: 50;
}
#right {
background: green;
flex: 1;
}
This is a workaround for this problem in Safari.
Since Safari seems to avoid calculation for non-flex nested containers.
Take a look to this answer
#masterContainer {
display: flex;
flex-direction: column;
width: 200px;
height: 200px;
}
#header {
background: yellow;
}
#content {
background: grey;
flex: 1;
position: relative;
}
#subContainer {
display: flex;
width: 100%;
height: 100%;
position: absolute;
}
#left {
background: red;
width: 50px;
}
#right {
background: green;
flex: 1;
}
<div id="masterContainer">
<div id="header">
header
</div>
<div id="content">
<div id="subContainer">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</div>
</div>