This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Closed 4 years ago.
Is it possible to create a flexbox layout with wrapping children and aligning them to the top?
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container .element {
flex: 0 0 auto;
}
creates this:
but my plan is to achieve this:
.container {
border: 1px solid black;
padding: 10px;
height: 250px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
overflow: hidden;
resize: both;
}
.container div {
border: 5px solid #AAA;
background-color: #DDD;
margin: 3px;
height: 100px;
width: 50px;
}
.container div:nth-child(3n) {
height: 40px;
}
<div>
<div class="container">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>
</div>
Some Text
Related
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 4 months ago.
I have a horizontally centered column of Flex items ordered from 1 to 5 that are aligned from the top of the container like this:
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container><div class=item>1</div><div class=item>2</div><div class=item>3</div><div class=item>4</div><div class=item>5</div></div>
I would like to let it aligned by the bottom of the container instead. I manage to do it with flex-direction: column-reverse; like in the next Snippet:
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-items: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container><div class=item>1</div><div class=item>2</div><div class=item>3</div><div class=item>4</div><div class=item>5</div></div>
However, as you see, the items get out of order! Is there a way to let a flex column on the bottom without reversing the items order using CSS? I tried every Flex property that I know so far without success.
You can use justify-content: end;
.container {
width: 150px;
height: 150px;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: end;
}
.content {
width: 25px;
height: 25px;
border: 1px solid black;
}
<div class="container">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>
You need to use the justify-content property to align content along the main axis (in your case vertically). You are using align-items which defines how the items should be aligned along the cross axis.
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container>
<div class=item>1</div>
<div class=item>2</div>
<div class=item>3</div>
<div class=item>4</div>
<div class=item>5</div>
</div>
I'm trying to put a flexbox container next to each other, so that they would be side by side, like this:
Here is what I have so far:
.container {
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: flex-start;
border: 3px dashed black;
width: 750px;
height: 750px;
}
.container1 {
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: flex-start;
border: 3px dashed black;
width: 1500px;
height: 50px;
}
.container2 {
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: flex-start;
border: 3px dashed black;
width: 750px;
height: 750px;
}
<div class="container1"></div>
<div class="container"></div>
<div class="container2"></div>
You need to add an outer container and then add display flex and the flex row
See here:
https://codepen.io/lasercake/pen/yrwNVx
<div class="container1"></div>
<div class="outer-container">
<div class="container"></div>
<div class="container2"></div>
</div>
And the css will need updating to:
.container {
border: 3px dashed black;
width: 750px;
height: 750px;
}
.outer-container{
display: flex;
flex-direction: row;
}
.container2 {
border: 3px dashed black;
width: 750px;
height: 750px;
}
This is because flexbox is more about the containing element rather than the individual elements. In this case the outer-container is formatting the child elements to display equally in a row.
Edit: This is a great site to use a flexbox reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You need a parent flex container with justify-content: space-between.
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>
This question already has answers here:
Understanding flex-grow
(2 answers)
flex-grow not sizing flex items as expected
(5 answers)
What are the differences between flex-grow and width?
(1 answer)
Closed 5 years ago.
I'm a bit confused from my understanding flex grow determines the size of an child based on a portion in relation to its siblings, I an element set to flex-grow two but its clear far more then two. could some direct me to accurate information on flex grow or explain it, thanks.
https://jsfiddle.net/onnakjen/75/
.parent{
display: flex;
border: 1px solid rgba(0,0,0,.5);
height: 300px;
width: 300px;
flex-flow: row wrap;
justify-content: center;
align-items: center;
//align-content: center;
}
.parent div{
width: 50px;
height: 50px;
background-color: blue;
margin:1px;
color: white;
text-align: center;
line-height: 50px;
}
.d2{
flex-grow: 3;
}
You need to add flex-grow:1; to .d1 . Because flex-grow determines how the remaining space is divided between flex-items and how much each item receives.
So if you don't set flex-grow for some items, they won't get that space, and you won't get elements' widths as you expect.
.d1{
flex-grow: 1;
}
.parent {
display: flex;
border: 1px solid rgba(0, 0, 0, .5);
height: 300px;
width: 300px;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.parent div {
width: 50px;
height: 50px;
background-color: blue;
margin: 1px;
color: white;
text-align: center;
line-height: 50px;
}
.d1 {
flex-grow: 1;
}
.d2 {
flex-grow: 3;
}
<div class="parent">
<div class="d1">1</div>
<div class="d2">2</div>
</div>
This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
Closed 5 years ago.
I am new to flexbox, but I have a parent div which contains three child divs. The three child divs are each 100% width. The first two divs are a fixed height. I want the third child div to fill out the rest of the parent div.
* {
margin: 0;
}
.flex-container {
display: flex;
height: 300px;
flex-wrap: wrap;
border: 1px solid blue;
background-color: gray;
align-content: flex-start;
}
.flex-item1 {
width: 100%;
height: 10px;
background: yellow;
}
.flex-item2 {
width: 100%;
height: 10px;
border: 1px solid red;
background: red;
}
.flex-item3 {
width: 100%;
border: 3px solid purple;
background: purple;
align-self: stretch;
height: auto;
}
/* another attempt for the third child div */
/* .flex-item3{
width: 100%;
border: 3px solid purple;
background: purple;
flex-direction: row;
flex-grow: 1;
} */
<div class="flex-container">
<div class="flex-item1"></div>
<div class="flex-item2"></div>
<div class="flex-item3"></div>
</div>
I have made a jsFiddle here.
Can anyone tell me what I'm doing wrong?
EDIT
I am trying not to make the flex-direction: column since I would like the third child div to be a row.
use flex:1 in the 3rd item and flex-direction:column in parent
.flex-container {
display: flex;
flex-direction: column;
height: 300px;
width: 100%
}
.flex-item1 {
height: 10px;
background: yellow;
}
.flex-item2 {
height: 10px;
background: red;
}
.flex-item3 {
flex: 1;
background: blue
}
<div class="flex-container">
<div class="flex-item1"></div>
<div class="flex-item2"></div>
<div class="flex-item3"></div>
</div>