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 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>
JS Fiddle
I have two parent boxes positioned next to each other with flex box, inside of them I have another flex box so the h2 and p can sit side by side.
I've not set a width of the parent boxes and ideally I do not want to.
Why is my text content wrapping when there is space for each flex box to expand? In the example the title is wrapping after Is - why can't the h2 expand so This Is Title A appears all on one line?
.container {
background: grey;
display: flex;
}
.container>div {
align-items: center;
display: flex;
}
h2 {
flex-basis: 40%;
}
p {
flex-basis: 60%;
}
<div class="container">
<div>
<h2>This Is Title A</h2>
<p>Content.</p>
</div>
<div>
<h2>This Is Title B</h2>
<p>Content.</p>
</div>
</div>
The problem is that percentage lengths use the parent container for reference, and that's missing in your code. The parent of the h2 and p items don't have a defined width.
Once you define a width on the parent (which I know you don't want to do), the problem is resolved. Otherwise, use another unit of length, white-space: nowrap, or some other compromise.
10.2 Content width: the width
property
<percentage>
Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing
block. If the containing block's width depends on this element's
width, then the resulting layout is undefined in CSS 2.2 (and 2.1).
Add flex-grow: 1 and a flex-shrink: 0 to your h2. This will prevent the h2 of shrinking. Also, since you are limiting the relative maximum the h2 can grow (40%) it would break anyway.
EDIT:
flex-grow/shrink was missing in the .container>div. Add the rule flex: 1 1 auto; so they expand evenly to fill all the width.
.container {
background: grey;
display: flex;
}
.container>div {
align-items: center;
display: flex;
flex: 1 1 auto;
}
h2 {
flex: 1 0 40%;
white-space: nowrap:
/*flex-basis: 40%;*/
}
p {
flex-basis: 60%;
}
<div class="container">
<div>
<h2>This Is Title A</h2>
<p>Content.</p>
</div>
<div>
<h2>This Is Title B</h2>
<p>Content.</p>
</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?
This question already has answers here:
Keep the middle item centered when side items have different widths
(12 answers)
Closed 5 years ago.
I know flexbox offers a great solution for centering items. But I run into an issue when I have 3 items and I'd like the center (2nd) item to be centered with respect to the window, regardless of the size of the other 2 items.
In my pen you can see the second item "Client Index" is off-center because the content on the right is larger than the content on the left. How can I force it to center itself?
.flex {
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="flex">
<span style="font-size:12px;">small</span>
<span style="font-size:20px;">Client Index</span>
<span style="font-size:18px;">Lots of content that moves the center</span>
</div>
My Codepen
One way would be to set flex-grow: 1; flex-basis: 0 so the 3 columns are distributed evenly, then you can center the text or the content in the middle one.
I'm using text-align to center the middle column. You could also use display: flex; justify-content: center; to do the same thing.
.flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex > span {
flex: 1 0 0;
}
.flex > span:nth-child(2) {
text-align: center;
}
<div class="flex">
<span style="font-size:12px;">small</span>
<span style="font-size:20px;">Client Index</span>
<span style="font-size:18px;">Lots of content that moves the center</span>
</div>
Use nested flex containers and auto margins.
.flex-container {
display: flex;
}
.flex-item {
flex: 1;
display: flex;
justify-content: center;
}
.flex-item:first-child>span {
margin-right: auto;
}
.flex-item:last-child>span {
margin-left: auto;
}
/* non-essential */
.flex-item {
align-items: center;
border: 1px solid #ccc;
background-color: lightgreen;
height: 40px;
}
<div class="flex-container">
<div class="flex-item"><span>short</span></div>
<div class="flex-item"><span>medium</span></div>
<div class="flex-item"><span>lonnnnnnnnnnnnnnnnnnnng</span></div>
</div>
Here's how it works:
The top-level div is a flex container.
Each child div is now a flex item.
Each item is given flex: 1 in order to distribute container space equally.
Now the items are consuming all space in the row and are equal width.
Make each item a (nested) flex container and add justify-content: center.
Now each span element is a centered flex item.
Use flex auto margins to shift the outer spans left and right.
You could also forgo justify-content and use auto margins exclusively.
But justify-content can work here because auto margins always have priority. From the spec:
8.1. Aligning with auto
margins
Prior to alignment via justify-content and align-self, any
positive free space is distributed to auto margins in that dimension.