I want to use Flexbox that has some number of items that are all the same width. I've noticed that Flexbox distributes the space around evenly, rather than the space itself.
For example:
.header {
display: flex;
}
.item {
flex-grow: 1;
text-align: center;
border: 1px solid black;
}
<div class="header">
<div class="item">asdfasdfasdfasdfasdfasdf</div>
<div class="item">z</div>
</div>
The first item is a lot bigger than the second. If I have three items, four items, or n items, I want them all to appear on the same line with an equal amount of space per item.
Any ideas?
http://codepen.io/anon/pen/gbJBqM
Set them so that their flex-basis is 0 (so all elements have the same starting point), and allow them to grow:
flex: 1 1 0px;
Your IDE or linter might mention that the unit of measure 'px' is redundant. If you leave it out (like: flex: 1 1 0), IE will not render this correctly. So the px is required to support Internet Explorer, as mentioned in the comments by #fabb;
You need to add width: 0 to make columns equal if contents of the items make it grow bigger.
.item {
flex: 1 1 0;
width: 0;
}
Detail:
flex: 1 1 0 is the same as
flex-grow: 1; flex-shrink: 1; flex-basis: 0;
and if the parent container can not provide enough space for the native-size added together of every item (no space to grow), we need to make the width: 0 to give every item the same start point to grow.
You could add flex-basis: 100% to achieve this.
Updated Example
.header {
display: flex;
}
.item {
flex-basis: 100%;
text-align: center;
border: 1px solid black;
}
For what it's worth, you could also use flex: 1 for the same results as well.
The shorthand of flex: 1 is the same as flex: 1 1 0, which is equivalent to:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}
The accepted answer by Adam (flex: 1 1 0) works perfectly for flexbox containers whose width is either fixed, or determined by an ancestor. Situations where you want the children to fit the container.
However, you may have a situation where you want the container to fit the children, with the children equally sized based on the largest child. You can make a flexbox container fit its children by either:
setting position: absolute and not setting width or right, or
place it inside a wrapper with display: inline-block
For such flexbox containers, the accepted answer does NOT work, the children are not sized equally. I presume that this is a limitation of flexbox, since it behaves the same in Chrome, Firefox and Safari.
The solution is to use a grid instead of a flexbox.
When you run this snippet, make sure to click on full page to see the effect properly.
body {
margin: 1em;
}
.wrap-inline-block {
display: inline-block;
}
#div0, #div1, #div2, #div3, #div4 {
border: 1px solid #888;
padding: 0.5em;
text-align: center;
white-space: nowrap;
}
#div2, #div4 {
position: absolute;
left: 1em;
}
#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
margin: 0.5em;
color: white;
background-color: navy;
padding: 0.5em;
}
#div0, #div1, #div2 {
display: flex;
}
#div0>*, #div1>*, #div2>* {
flex: 1 1 0;
}
#div0 {
margin-bottom: 1em;
}
#div2 {
top: 15.5em;
}
#div3, #div4 {
display: grid;
grid-template-columns: repeat(3,1fr);
}
#div4 {
top: 28.5em;
}
<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>
<div id="div0">
<div>
Flexbox
</div>
<div>
Width determined by viewport
</div>
<div>
All child elements are equal size with {flex: 1 1 0}
</div>
</div>
<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>
<div class="wrap-inline-block">
<div id="div1">
<div>
Flexbox
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div2">
<div>
Flexbox
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>
<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>
<div class="wrap-inline-block">
<div id="div3">
<div>
Grid
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div4">
<div>
Grid
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>
I’m not an expert with Flexbox, but I got there by setting the basis to 50% for the two items I was dealing with. Grow to 1 and shrink to 0.
Inline styling: flex: '1 0 50%',
None of these solutions worked for me, but this did:
.header {
display: flex;
}
.item {
width: 100%;
}
/* Demo styles, for aesthetics. */
.demo {
margin: 3rem;
}
.demo .item {
text-align: center;
padding: 3rem;
background-color: #eee;
margin: 0 1.5rem;
}
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
</div>
</div>
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
</div>
</div>
<div class="demo">
<div class="header">
<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>
</div>
None of these answers solved my problem, which was that the items weren't the same width in my makeshift flexbox table when it was shrunk to a width too small.
The solution for me was simply to put overflow: hidden; on the flex-grow: 1; cells.
On the child element of flex,
flex: 1 1 25%
this will allow to have four items.
If you want to add more items then you can decrease the %.
This will work even if you wrapping items, like a Grid, but not so simple you should show where it will wrap in media queries)).
Example:
.flex-item {
flex: 0 0 calc(25% - (45px / 4))
}
It works like this:
$n: 4; // Number of columns
$gap: 15px; // Margin pixels
.flex-parent {
display: flex;
gap: $gap;
}
.flex-item {
flex: 0 0 calc(100% / $n - (($n - 1) * $gap / $n));
}
I was having a similar issue and found a way to cheat.
As others have said, flex-basis and flex-grow: 1 are the way to keep items the same size, but the last row is an exception when there are too few items (they fill all available space, making them larger than the other items). To stop this from happening, I added an empty spacer item with visibility: hidden and set the flex-grow value inline based on a quick calculation of how many items there were.
This is easier if you know the width of the parent container but even if you don't, you can set the flex-grow value on the spacer using media queries and breakpoints.
I have a parent div in a grid with height of 29rem + 1fr. In the div there are four children. First and third have a fixed height (both have the same height as their content that does not change), and second and fourth must have dynamical height because of their content.
HTML:
<body>
<div class="unplanned"> Index
<div class= "header"> </div>
<div class="filter_line">filter: line </div>
<div class="filter_date">filter: date </div>
<div class="table">table </div>
</div>
</body>
CSS:
.unplanned {z-index: 1500;
grid-area: unplanned;
width: 30rem;
height: 96vh;/*right now it's set as fixed height that does not work it there is less content in filter_line*/}
.fitler_line {display: inline-block;
margin-bottom: 3rem;
margin-top: 3.3rem;
margin-left: 2.9rem;}
.fitler_date {margin-left: 4rem;
margin-bottom: 3rem;
position: relative;
padding-bottom: 2rem;}
.table {text-align: center;
overflow-y: auto;
height: calc( 100% - 32rem ); /*right now it's set as fixed height that does not work it there is less content in filter_line*/}
I have tried adding height: auto to "filter_line" and "table" and it works to an extend. It fits all lines in "filter_line" but it cuts off the table without scroll. Flex will not work, because it messes with grid.
Is there an elegant solution in CSS or Sass that will fit all of "table" content without JS?
The answer lays in flex attribute.
You can use flex for extending last div to available space. Very good tutorial for flex is here. (Do read for further understanding)
The solution is described here:
.parent {
background-color:red;
height:500px;
display: flex;
flex-flow: column;
}
.first {
background-color:blue;
height:50px
}
.second {
background-color:green;
flex: 0 1 auto;
}
.third {
background-color:yellow;
flex: 1 1 auto;
}
<div class="parent">
<div class="first"></div>
<div class="second">bdjasbdajsbdajsbd
das<br>
das<br>
das<br>
d<br>
asd<br>
a</div>
<div class="third"></div>
</div>
This question already has answers here:
Why is a flex item limited to parent size?
(1 answer)
Why don't flex items shrink past content size?
(5 answers)
Closed 3 years ago.
See problem in codepen: https://codepen.io/pencillrpal/pen/QWLOLGv
I have a flex container in which I'm going to have a horizontal slider with elements as long as the full page width.
But I realized I can't control the width of the child elements, because they will always have a width that makes them fit the container, and they don't extend beyond it.
I've found a trick though. If I wrap my child divs to a div one by one it will work as I want it to.
Why does this work this way?
.container {
display: flex;
flex-direction: row;
justify-content: center;
height: 40vh;
max-width: 100%;
overflow-x: hidden;
border: 5px solid black;
margin: 0 auto;
}
.box {
position: relative;
width: 90vw;
margin: 10px;
line-height: 10vh;
text-align: center;
background: black;
color: white;
border: 5px solid red;
}
<h1>Box should have 100vw width</h1>
<div class="container">
<div class="box">
<h3>Box</h3>
</div>
<div class="box">
<h3>Box</h3>
</div>
<div class="box">
<h3>Box</h3>
</div>
</div>
<h1>This one has though</h1>
<div class="container">
<div>
<div class="box">
<h3>Box</h3>
</div>
</div>
<div>
<div class="box">
<h3>Box</h3>
</div>
</div>
<div>
<div class="box">
<h3>Box</h3>
</div>
</div>
</div>
You can control the width of the flex children. All flex children have default flex values to control the flex-grow and flex-shrink properties. Disable these properties and you'll have control over the width.
Add these lines to your CSS.
/**
* Disable flex grow and shrink so that it no longer tries to divide the
* space between the .box elements.
*
* Use flex-basis or width to control the width of the element.
*/
.box {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 90vw;
width: 90vw;
}
I am trying to place child elements in parent element using flexbox like in this image -- >
https://ibb.co/Wpph8fP.
I know that this is possible by doing three columns then use flex, then flex-column in the first column and center other two vertically.
The thing is, that I need do this in one parent div. 4th element is wrapped and it creates column with 1st element, then I need to center vertically two other elements.
This is what I have already done:
the code is here https://codepen.io/MrEyelet/pen/wLxygN?editors=1100
To use one flex, first set flex-direction to column and set wrap toflex-wrap.
And, the part that needs to be on two lines has a variable height to avoid line breaks.
Next, set the flex property to none, setting margin enough to make a line break in the part that needs to be on one line. This will force flex items to break and keep the size of the item.
flex - Values[mdn]
none
The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting "flex: 0 0 auto".
body {
background: tomato;
margin: 0;
}
.parent {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap;
height: 100vh;
}
.child {
width: 30%;
height: 200px;
margin: 20px 0;
background: indigo;
}
/* add below */
.child:nth-of-type(-n+2) {
flex: 1 0 calc(50% - 40px);
}
/* add below */
.child:nth-of-type(n+3) {
flex: none;
margin: 50% 0;
}
<div class="parent">
<div class="child child-1">
</div>
<div class="child child-2">
</div>
<div class="child child-3">
</div>
<div class="child child-4">
</div>
</div>
I have a simple flex-box layout and I would like the middle item to shrink right down, but I cannot get any situation where the flex-shrink property works.
I've tried removing the flex-wrap property on the flex-container and changed the values of the flex items, but it still doesn't work?
In the code below, how do I get the middle div to shrink to a flex-shrink value of 10 like the code would suggest it should do?
Many thanks in advance for any help.
body {
padding: 20px;
font-family: arial;
}
p {
color: white;
}
.container {
background-color: #666;
max-width: 800px;
height: 800px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
padding: 10px;
box-sizing: border-box;
}
.item1 {
flex: 1 1 0;
background-color: red;
min-width: 200px;
}
.item2 {
flex: 2 10 0;
background-color: blue;
}
.item3 {
flex: 1 1 0;
background-color: green;
}
<section class="container">
<div class="item item1">
<h1>ITEM1</h1>
</div>
<div class="item item2">
<h1>ITEM2</h1>
</div>
<div class="item item3">
<h1>ITEM3</h1>
<p> - this is the third item with more content</p>
</div>
</section>
https://codepen.io/emilychews/pen/rYeoza
That's not how flex-shrink works.
The job of flex-shrink is to distribute negative free space in the container among items. This means it will shrink items proportionally when the items would otherwise overflow the container.
But there is no overflow condition in your container.
The first column (.item1) is 200px in width.
Your second column (.item2) has no fixed width. It is set to consume free space.
Your third column (.item3) has no fixed width. It is also set to consume free space.
Therefore, flex-shrink has nothing to do. In a container with width: 800px, where only 200px is used, flex-shrink is never called into action.
You have flex-shrink enabled on your three columns (with values 1, 10 and 1, respectively). If you disable flex-shrink on all of them you'll notice that it makes no difference to the layout.
Here's your demo with flex-shrink: 0 applied to all three times: revised codepen
For a detailed explanation of how flex-shrink works, see this post:
How does flex-shrink factor in padding and border-box?