I am trying to build a dynamic flexbox that will fill if there is a missing column.
What I currently have is row1 and row2 which are 70% and allow for the column. But when there's no column, it's just empty.
I would like row1 and row2 to stretch if there is no column present:
Code
section {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
height: 100px;
}
.c {
background: red;
height: 100%;
width: 30%;
}
.a, .b {
background: green;
height: 45px;
width: 70%;
}
.a {
background: lightblue
}
<section>
<div class="a">row1</div>
<div class="b">row2</div>
<div class="c">column</div>
</section>
<section>
<div class="a">row1</div>
<div class="b">row2</div>
</section>
If instead of width you use min-width, you don't constrain the columns when there's no sidebar:
section {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
height: 100px;
}
.c {
background: red;
height: 100%;
width: 30%;
}
.a, .b {
background: green;
height: 45px;
min-width: 70%;
}
.a {
background: lightblue
}
<section>
<div class="a">row1</div>
<div class="b">row2</div>
<div class="c">column</div>
</section>
<section>
<div class="a">row1</div>
<div class="b">row2</div>
</section>
Related
https://i.stack.imgur.com/e2n5o.png
I want to achieve a layout like this by flexbox. body is flex container and there are only two flex items, one card and one footer. Here is a simplified codepen link. How can I make the footer at the bottom of the page while the card position center as it is now.
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
width: 400px;
height: 300px;
background-color: green;
}
.footer {
margin-bottom: 20px;
background-color: yellow;
width: 200px;
height: 50px;
}
<div class="container"></div>
<div class="footer"></div>
if I add margin-top:auto, the footer's position will be right, but the container will go to the top.
if I add gap to body, the container will not be at the center
Use another element for the green card and make the .container fill all the available space using flex-grow: 1.
Use display: flex and align-items:center on the .container to center the card vertically.
body{
display:flex;
flex-direction:column;
align-items:center;
height:100vh;
}
.container{
flex-grow: 1;
display: flex;
align-items: center;
}
.card {
width:400px;
height:300px;
background-color:green;
}
.footer{
margin-bottom:20px;
background-color:yellow;
width: 200px;
height:50px;
}
<div class="container">
<div class="card"></div>
</div>
<div class="footer"></div>
The body does not need justify-content:center; so you should remove it too.
Another approach if you want that .container to have 100% width.
body {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
.container {
width: 100%; /* NEW */
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center; /* NEW */
}
.card {
width: 400px;
height: 300px;
background-color: green;
}
.footer {
margin-bottom: 20px;
background-color: yellow;
width: 200px;
height: 50px;
margin: auto; /* NEW */
}
<div class="container">
<div class="card"></div>
</div>
<div class="footer"></div>
You can use grid to center the container, and position to stick the footer.
body {
display: grid;
place-content: center; /* center the container */
height: 100vh;
margin: 0;
}
.container {
width: 400px;
height: 300px;
background-color: green;
}
.footer {
justify-self: center; /* center the footer */
margin-bottom: 20px;
background-color: yellow;
width: 200px;
height: 50px;
/* push the footer to the bottom */
position: sticky;
top: 100vh;
}
<div class="container"></div>
<div class="footer"></div>
For some reason, my 3 children inside a flex container each have equal height, but the desired behavior is that of making the items appear one after another, not filling the space they're given. See:
.col-md-12 {
position: relative;
width: 100%;
min-height: 1px;
flex: 0 0 100%;
max-width: 100%;
}
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
position: fixed;
height: 100vh;
width: 420px;
background: #313131;
padding: 0;
}
.item {
display: flex;
}
.one {
background: red;
}
.two {
background: green;
}
.three {
background: yellow;
}
<div class="container">
<div class="item one col-md-12"></div>
<div class="item two col-md-12"></div>
<div class="item three col-md12"></div>
</div>
As you can see, the three lines are each at ~33.3% of the parent's height. One at the top, one in the middle and one at the bottom.
But the way it should look is 3 lines after one another. So, from this (grey is the inner content of the child):
To this (the grey on the background is the parent):
How can I achieve this?
Just add flex-flow: column.
.col-md-12 {
position: relative;
width: 100%;
height: 1px;
}
.container {
display: flex;
flex-flow: column;
position: fixed;
height: 100vh;
width: 420px;
background: #313131;
padding: 0;
}
.one {
background: red;
}
.two {
background: green;
}
.three {
background: yellow;
}
<div class="container">
<div class="item one col-md-12"></div>
<div class="item two col-md-12"></div>
<div class="item three col-md-12"></div>
</div>
You can change the wrap to no wrap or change the width to 33.3%
.col{
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: no-wrap;
position: fixed;
height: 100vh;
width: 420px;
background: #313131;
padding: 0;display: flex;
}
.one {
background: red;
}
.two {
background: green;
}
.three {
background: yellow;
}
<div class="container">
<div class="col one"></div>
<div class="col two"></div>
<div class="col three"></div>
</div>
I want to create a layout where we have a header (responsive, with any height), footer (responsive, with any height), and content that fills the rest of space. Content should have two columns - first(right) that fits the content and second(left) that is very long and should have overflow with y-axis scrolling.
Detailed snipped with HTML and CSS attached.
I have problem with making them work inside of flexible height. I know how to make it work when I have only two columns, but with a responsive footer and header, I have problems.
I also have a code snippet inside of codepen
Thanks in advance for any help :)
html,
body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.column {
background-color: white;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
color: black;
border: 5px purple solid;
}
.column-with-overflow {
overflow: auto;
max-height: 100%;
flex-grow: 1;
}
.column-with-overflow-content {
height: 1000px;
background-color: blue;
display: flex;
}
.columns {
display: flex;
flex-direction: row;
background-color: yellow;
width: 100%;
max-height: 100%;
}
.content {
background-color: blue;
flex-grow: 1;
}
.box {
text-align: center;
color: white;
display: flex;
justify-content: center;
}
.header {
background-color: green;
height: 60px; // assume that It's not known - any height
}
.footer {
background-color: red;
height: 60px; // assume that It's not known - any height
}
<div class="container">
<div class="box header">Header</div>
<div class="box content">
<div class="columns">
<div class='column column-with-overflow'>
<div class='column-with-overflow-content'>
box 1
</div>
</div>
<div class='column'>box 2</div>
</div>
</div>
<div class="box footer">Footer</div>
</div>
Set a fixed height to your .box.content div element.
And use min-height in .column-with-overflow-content insted of height
html,
body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.column {
background-color: white;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
color: black;
border: 5px purple solid;
}
.column-with-overflow {
overflow: auto;
max-height: 100%;
flex-grow: 1;
}
.column-with-overflow-content {
min-height: 1000px; /* use min-height */
background-color: blue;
display: flex;
}
.columns {
display: flex;
flex-direction: row;
background-color: yellow;
width: 100%;
max-height: 100%;
}
.content {
background-color: blue;
flex-grow: 1;
}
.box.content { height: 100px; } /* set height to columns container */
.box {
text-align: center;
color: white;
display: flex;
justify-content: center;
}
.header {
background-color: green;
height: 60px; // assume that It's not known - any height
}
.footer {
background-color: red;
height: 60px; // assume that It's not known - any height
}
<div class="container">
<div class="box header">Header</div>
<div class="box content">
<div class="columns">
<div class='column column-with-overflow'>
<div class='column-with-overflow-content'>
box 1
</div>
</div>
<div class='column'>box 2</div>
</div>
</div>
<div class="box footer">Footer</div>
</div>
This question already has answers here:
What's the difference between align-content and align-items?
(15 answers)
Closed 3 years ago.
I have a flex container with two children of fixed dimensions that are aligned flex-end (the bottom of the parent).
When I resize the parent I want them to wrap on top of each other, but instead they each take up 50% of the parent height.
Is there a way to do this without adding another div?
FIDDLE
.wrapper {
width: 600px;
height: 500px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
background-color: #eeeeee;
resize: horizontal;
overflow: auto;
flex-wrap: wrap;
}
.one {
width: 200px;
height: 100px;
background: red;
}
.two {
width: 200px;
height: 100px;
background: blue;
}
<div class="wrapper">
<div class="one">1</div>
<div class="two">2</div>
</div>
You need to also consider align-content like below:
.wrapper {
width: 600px;
height: 500px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content:flex-end; /*added this*/
align-items: flex-end;
background-color: #eeeeee;
resize: horizontal;
overflow: auto;
flex-wrap: wrap;
}
.one {
width: 200px;
height: 100px;
background: red;
}
.two {
width: 200px;
height: 100px;
background: blue;
}
<div class="wrapper">
<div class="one">1</div>
<div class="two">2</div>
</div>
I have a flex container with 3 children, and I am wanting to ensure that the children all align at flex-start, however the final child should sit at the bottom of the container.
Is it not possible to combine align-content with align-self?
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
padding: 15px 15px 50px 15px;
height: 100%;
background: red;
width: 200px;
height: 500px;
}
.item-1,
.item-2,
.item-3 { width: 100%; }
.item-3 {
align-self: flex-end;
}
<div class="container">
<div class="item-1">One</div>
<div class="item-2">Two</div>
<div class="item-3">Three</div>
</div>
Since you want 100% width of your element, you can switch to column direction then use margin to control alignment:
.container {
display: flex;
flex-direction: column;
padding: 15px 15px 50px 15px;
height: 100%;
background: red;
width: 200px;
height: 300px;
}
.item-3 {
margin-top: auto;
}
<div class="container">
<div class="item-1">One</div>
<div class="item-2">Two</div>
<div class="item-3">Three</div>
</div>