How can I increase the height of a row in flex (the div that contains has the class "row")? I have one row with two columns.
.body2 {
display: flex;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.blue-column {
background-color: blue;
height: 100px;
}
.green-column {
background-color: green;
height: 100px;
}
<section class="body2">
<div class='row'>
<div class='column'>
<div class='blue-column'>
Some Text in Column One
</div>
</div>
<div class='column'>
<div class='green-column'>
Some Text in Column Two
</div>
</div>
</div>
</section>
How can I increase the height of that row? I already tried height:something in .row but it doesn't work
If you set a height on the container, the height will apply to the container, but not necessarily to the content of the container, so it may not look like you've added height.
In this example, a height is added to the container, as illustrated with the red border:
.body2 {
display: flex;
}
.row {
display: flex;
flex: 1;
height: 150px;
border: 1px dashed red;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.blue-column {
background-color: aqua;
height: 100px;
}
.green-column {
background-color: lightgreen;
height: 100px;
}
<section class="body2">
<div class='row'>
<div class='column'>
<div class='blue-column'>
Some Text in Column One
</div>
</div>
<div class='column'>
<div class='green-column'>
Some Text in Column Two
</div>
</div>
</div>
</section>
If you want to add height to the descendants, use height or flex-basis (since the nested flex container is in column-direction).
.body2 {
display: flex;
}
.row {
display: flex;
flex: 1;
height: 150px;
border: 1px dashed red;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.blue-column {
background-color: aqua;
height: 75px;
}
.green-column {
background-color: lightgreen;
flex-basis: 125px;
}
<section class="body2">
<div class='row'>
<div class='column'>
<div class='blue-column'>
Some Text in Column One
</div>
</div>
<div class='column'>
<div class='green-column'>
Some Text in Column Two
</div>
</div>
</div>
</section>
If you want the descendants to take full height, use flex: 1 instead of an explicit height.
.body2 {
display: flex;
}
.row {
display: flex;
flex: 1;
height: 150px;
border: 1px dashed red;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.blue-column {
background-color: aqua;
/* height: 75px; */
flex: 1;
}
.green-column {
background-color: lightgreen;
/* flex-basis: 125px; */
flex: 1;
}
<section class="body2">
<div class='row'>
<div class='column'>
<div class='blue-column'>
Some Text in Column One
</div>
</div>
<div class='column'>
<div class='green-column'>
Some Text in Column Two
</div>
</div>
</div>
</section>
Related
I'm trying to create a flex row with a growth of 2 and then a wrap but can't understand why it is not working properly.
Here is the CSS and HTML.
.flex {
height: 50px;
width: 50px;
background-color: black;
}
.flex1 {
height: 50px;
width: 50px;
background-color: yellow;
margin-left: 50px;
}
.flex2 {
height: 50px;
width: 50px;
background-color: green;
margin-left: 50px;
}
.flexcontainer {
display: flex;
flex-wrap: wrap;
flex-grow: 2;
flex-direction: row;
}
<div class="flexcontainer">
<div class="flex">
<div class="flex1">
<div class="flex2">
</div>
</div>
</div>
</div>
The way you implement the flex-grow is totally wrong because the flex-grow have to be applied to child elements as shown in below code snippet as a example.
#content {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: stretch;
}
.box {
flex-grow: 1;
border: 3px solid rgba(0,0,0,.2);
}
.box1 {
flex-grow: 2;
border: 3px solid rgba(0,0,0,.2);
}
<h4>This is a Flex-Grow</h4>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
<div class="box" style="background-color:brown;">F</div>
</div>
To read more about flex-grow, you should learn from there : https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
Hi I am trying to build this layout with flexbox.I provided my current code because i dont know how to move further.Even i posted image how iut should look like under the code.I tried everything but i cant achieve these result. Columns 2,3,5,6,7,8 must be same size. Im new to flex box and i really want to achieve this goal. Thanks for any help.
.tall {
height: 300px;
}
.content {
display: flex;
height: 100%;
}
.left {
display: flex;
flex-direction: column;
flex: 1;
}
.box {
padding-bottom: 50px;
}
.right3collumns {
display: flex;
flex-direction: column;
flex: 2;
}
.box2:nth-child(1) {
background-color: teal;
}
.box2:nth-child(2) {
background-color: red;
}
.box2:nth-child(3) {
background-color: blue;
}
.right {
flex: 2;
background: #22B14C;
}
.right2 {
display: flex;
flex-basis: 200px;
flex-direction: column;
background-color: red;
}
.right2small {
flex-basis: 100px;
background-color: turquoise;
}
.box:nth-child(1) {
background: #ED1C24;
}
.box:nth-child(2) {
background: #00A2E8;
}
.box:nth-child(3) {
background: #FFAEC9;
}
<div class="content">
<div class="right">
<img src="assets/group.png" alt="group">
</div>
<div class="left">
<div class="box">Small DIv</div>
<div class="box">Small DIv</div>
</div>
<div class="right2">bigger</div>
<div class="right2small">smaller</div>
<div class="right3collumns">
<div class="box2">Small DIv</div>
<div class="box2">Small DIv</div>
<div class="box2">Small DIv</div>
</div>
</div>
Here is one way of achieving the layout, I strongly advise, if you can, to use CSS Grid instead.
.grid {
display: flex;
flex: 1;
}
.grid--col {
flex-direction: column;
}
.grid__item {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
border: 1px solid #ddd;
}
.grid__item--x2 {
flex: 2;
}
.grid--main {
background: #f5f5f5;
border: 1px dashed #999;
max-width: 960px;
margin: 50px auto;
}
<div class="grid grid--main">
<div class="grid__item">1</div>
<div class="grid__item grid__item--x2">
<div class="grid grid--col">
<div class="grid">
<div class="grid__item">2</div>
<div class="grid__item grid__item--x2">4</div>
<div class="grid__item">8</div>
</div>
<div class="grid">
<div class="grid__item">3</div>
<div class="grid__item">5</div>
<div class="grid__item">6</div>
<div class="grid__item">7</div>
</div>
</div>
</div>
</div>
You can modify the CSS/SCSS code to change the layout for different breakpoints using the CSS #media rules.
For example, you can have everything stacked, when the viewport is less than or equal to 960px.
#media only screen and (max-width: 960px) {
.grid {
flex-direction: column;
}
}
.grid {
display: flex;
flex: 1;
}
.grid--col {
flex-direction: column;
}
.grid__item {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
border: 1px solid #ddd;
}
.grid__item--x2 {
flex: 2;
}
.grid--main {
background: #f5f5f5;
border: 1px dashed #999;
max-width: 960px;
margin: 50px auto;
}
#media only screen and (max-width: 960px) {
.grid {
flex-direction: column;
}
}
<div class="grid grid--main">
<div class="grid__item">1</div>
<div class="grid__item grid__item--x2">
<div class="grid grid--col">
<div class="grid">
<div class="grid__item">2</div>
<div class="grid__item grid__item--x2">4</div>
<div class="grid__item">8</div>
</div>
<div class="grid">
<div class="grid__item">3</div>
<div class="grid__item">5</div>
<div class="grid__item">6</div>
<div class="grid__item">7</div>
</div>
</div>
</div>
</div>
I have a layout that is mainly divided into 3 parts and the middle one should take a full height. And it does.
However, I need an additional div which will play a role of the backdrop and here the problem comes. The child doesn't want to take 100% height.
Here .body is a div that is being stretched when there is not enough content and .bg-gray is the one I want to take its parent full height.
Is there a way achieve this without using relative + absolute positioning?
Also, I'm looking for the answer to my question: why is this happening that way.
html, body {
padding: 0;
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.header {
height: 50px;
background-color: #e6e6e6;
}
.footer {
height: 50px;
background-color: #aaa444;
}
.body {
flex: 1;
}
.bg-gray {
background-color: #eee;
min-height: 100%;
flex: 1;
}
<div class="container">
<div class="header">
</div>
<div class="body">
<div class="bg-gray">
<div>
asdasd
</div>
</div>
</div>
<div class="footer">
</div>
</div>
Apply flexbox to the .body div.
.body {
flex: 1;
display: flex;
flex-direction: column;
}
html,
body {
padding: 0;
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.header {
height: 50px;
background-color: #e6e6e6;
}
.footer {
height: 50px;
background-color: #aaa444;
}
.body {
flex: 1;
display: flex;
flex-direction: column;
}
.bg-gray {
background-color: darkgrey;
min-height: 100%;
flex: 1;
}
.bg-gray div {
background: lightblue;
}
<div class="container">
<div class="header">
</div>
<div class="body">
<div class="bg-gray">
<div>
asdasd
</div>
</div>
</div>
<div class="footer">
</div>
</div>
I'm building a site with flexbox, I have a problem that I can't fix.
.min-h-screen {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.parent {
flex:1;
background: red;
}
.child-one {
background: green;
display:flex;
}
.child-two {
background: yellow;
}
<div class="min-h-screen">
<div class="parent">
<div class="child-one">
<p>
child 1
</p>
</div>
<div class="child-two">
<p>
child 2
</p>
</div>
</div>
</div>
I want the child 1 and child 2 use the full space, right now they don't. How could I fix this. Already tried a lot. Height 100 % does not work.
Use nested flex containers.
.min-h-screen {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.parent {
flex: 1;
background: red;
display: flex; /* new */
flex-direction: column; /* new */
}
.child-one {
flex: 1; /* new */
background: green;
display: flex;
}
.child-two {
flex: 1; /* new */
background: yellow;
}
body { margin: 0; }
<div class="min-h-screen">
<div class="parent">
<div class="child-one">
<p>
child 1
</p>
</div>
<div class="child-two">
<p>
child 2
</p>
</div>
</div>
</div>
You just gotta flex the parent of the those two elements too.
* {
margin: 0;
}
.min-h-screen {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.parent {
flex: 1;
display: flex;
background: red;
}
.child-one {
background: green;
flex: 1;
}
.child-two {
background: yellow;
flex: 1;
}
<div class="min-h-screen">
<div class="parent">
<div class="child-one">
<p>
child 1
</p>
</div>
<div class="child-two">
<p>
child 2
</p>
</div>
</div>
</div>
.parent {
min-height: 100vh;
display:flex;
background: red;
flex-direction: column;
}
.child-one {
background: green;
flex: 1 0 50%;
}
.child-two {
background: yellow;
flex: 1 0 50%;
}
<div class="parent">
<div class="child-one">
<p>
child 1
</p>
</div>
<div class="child-two">
<p>
child 2
</p>
</div>
</div>
Can I accomplish this grid layout with flexbox? To have the first element take up 2 rows height and then continue after it?
Check image.
You can achive it by dividing this layout in 2 columns while the 2nd column will have a nested flexbox layout as well.
HTML Structure:
<div class="container">
<div class="col box1">1</div>
<div class="col col2">
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</div>
Necessary Styles:
.container {
min-height: 100vh;
display: flex;
}
.col {
flex-grow: 1;
color: #fff;
}
.col2 {
flex-wrap: wrap;
display: flex;
}
.col2 > div {
flex-basis: 50%;
flex-grow: 1;
}
.box1 {
display: flex;
}
* {box-sizing: border-box;}
body {
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
}
.col {
flex-grow: 1;
color: #fff;
}
.col2 {
flex-wrap: wrap;
display: flex;
}
.col2 > div {
flex-basis: 50%;
padding: 10px;
flex-grow: 1;
}
.box1 {
background: brown;
padding: 10px;
display: flex;
}
.box2 {
background: pink;
}
.box3 {
background: black;
}
.box4 {
background: yellow;
}
.box5 {
background: royalblue;
}
<div class="container">
<div class="col box1">1</div>
<div class="col col2">
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</div>
You can use this HTML structure but you need to set fixed height on parent div. Then you just use flex-direction: column and flex-wrap: wrap.
* {
box-sizing: border-box;
}
.content {
height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
div div:first-child {
flex: 0 0 100%;
width: 50%;
background: #880015;
}
div div:not(:first-child) {
width: 25%;
flex: 0 0 50%;
border: 1px solid black;
}
<div class="content">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>