This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 2 years ago.
I'm creating a nav menu using flex. I want all of the items in my menu to display in a single row when the screen is wide enough to support that, and to snap to two rows of items when it needs to wrap. I have this mostly working:
.content {
width: 400px;
height: 150px;
border: thin solid black;
}
.outer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.inner {
display: flex;
justify-content: space-around;
flex-grow: 1;
}
span {
font-size: 24pt;
}
<div class="content">
<div class="outer">
<div class="inner">
<span>one</span>
<span>two</span>
<span>three</span>
</div>
<div class="inner">
<span>four</span>
<span>five</span>
<span>six</span>
</div>
</div>
</div>
CodePen here.
This works perfectly when the page is wide enough:
And it works mostly perfectly when the page is narrow (try changing the width of .content to 250px):
However, now I'm trying to make it so the items in each row line up with each other. I'm going for something like this:
I've tried every combination of flex-grow, flex-shrink, and justify-content that I can think of, but I can't get the items to align.
I know I could probably use a media query and swap out the content for a grid when the window gets too narrow, but I'd like to simplify this as much as possible. Is there a way to align the children of two flex divs?
Alternatively, is there a way to use a grid layout that shows as 1 row until it needs to wrap, and then it shows as 2 rows?
It causes by span width.
if span width not fixed, span will have dynamic width;
set width on span;
Try this
Add to te span
span {
flex: 33%;
}
Or change the porcent acording to the amount of items the div has
This question already has answers here:
What's the difference between display:inline-flex and display:flex?
(10 answers)
Closed 5 years ago.
If you are using a Flexbox layout to layout some items in a row, the Flexbox container takes up the full width of whatever container it is in. How do you set the Flexbox container to only take up the width of it's child elements?
Take a look at the following example:
https://jsfiddle.net/5fr2ay9q/
In this example the size of the flexbox container extends beyond the child element's width. The typical way to fix something like this is display: inline but obviously that won't work because then it's not a flexbox container anymore.
Is it possible to do this?
.container {
display: flex;
flex-direction: row;
outline: 1px solid red;
}
p {
outline: 1px solid blue;
}
Can you make the flex container not 100% width but rather the width of the content itself?
<div class='container'>
<img src='https://placehold.it/300x300'/>
<p>
This is some content hello world testing 123.
</p>
</div>
You can use display: inline-flex; (see Designating a Flexible Box):
.container {
display: inline-flex;
flex-direction: row;
outline: 1px solid red;
}
p {
outline: 1px solid blue;
}
Can you make the flex container not 100% width but rather the width of the content itself?
<div class='container'>
<img src='https://placehold.it/300x300'/>
<p>
This is some content hello world testing 123.
</p>
</div>
I'm using flex for layout purposes, but the browser does not spread the width equally between items.
.parent {
display: flex;
width: 200px;
}
.btn1 {
flex: 1 1 auto;
}
<div class="parent">
<div class="btn1">
<button align="left" style="width:100%">Ok</button>
</div>
<button align="left" class="btn1">Cancel</button>
<div>
Now, I want the buttons to split the container length 50% / 50%.
But that's not what's happening. I tried using flex: 1 1 auto and flex: 1 1 0 but with no success.
I know that I can use the OK button directly and it will solve my problem, but in my particular scenario it's important to wrap it with a div.
Now, as I understand it, flex should be able to spread the width equally and that's my goal here.
One more thing though, I noticed that the button content seems to have an effect on the width and I want to ignore this effect somehow.
Thanks!
JSFiddle example:
https://jsfiddle.net/edismutko/cvytLkyp/3/
flex-basis: auto vs flex-basis: 0
You're sizing your flex items with flex: 1 1 auto.
However, if you want to distribute space evenly among items, you need to use flex: 1 1 0.
The difference is the flex-basis component.
With flex-basis: 0, every item is considered to have a zero width and flex-grow distributes container space equally among them. This results in all items having the same length.
With flex-basis: auto, the size of the item is factored into the flex-grow calculation and container space is distributed proportionally among items.
So when you want equal length items use flex: 1 1 0, which is the same as flex: 1.
Here's a more detailed explanation: Make flex-grow expand items based on their original size
Default rules on button elements
Browsers apply styles to elements by default. For instance, Chrome adds padding and border widths to button elements.
Reset those defaults.
Now you have two equal width flex items. (Additional styling is up to you.)
.parent {
display: flex;
width: 200px;
}
.btn1 {
flex: 1;
}
button {
padding: 1px 0;
border-left-width: 0;
border-right-width: 0;
}
<div class="parent">
<div class="btn1">
<button align="left" style="width:100%">Ok</button>
</div>
<button align="left" class="btn1">Cancel</button>
<div>
box-sizing: border-box
Something else to consider is including the padding and border lengths in the width / flex-basis calculation. Why are borders causing div to overflow container?
I have a fixed-width container into which several variable-width elements must appear in a row, which can spill over into additional rows as necessary.
However, the beginning of each element must be aligned with the one on top of it, so in ASCII art it would look like so (say, padding of 1):
/----------------------------------\
| |
| # One # Two # Three # Four |
| # Five # Six |
| |
\----------------------------------/
In other words:
The first element of every row must be left-aligned
The last element of every row (except for the final row) must be right-aligned
Every element must be left-aligned to the element above it
I'm trying to use flexbox for this without success.
This is the best I've come so far, using flex-wrap: wrap for the container and flex-grow: 1 for the elements.
Problem is that the last row fills out to the edge.
justify-content: flex-start; // this does nothing
If I take away flow-grow: 1 then the elements aren't distributed equally. I also tried fiddling around with last-of-type on the elements but it's also not enough.
Is this even possible with flexbox, or am I going about it the wrong way?
After trying the suggestions here (thanks!) and searching the web long and wide, I've reached the conclusion that this is simply not possible with flexbox. Any by that I mean that others have reached this conclusion while I stubbornly tried to make it work anyway, until finally giving up and accepting the wisdom of wiser people.
There are a couple of links I came across that might explain it better, or different aspects of the requirements, so I'm posting them here for... posterity.
How to keep wrapped flex-items the same width as the elements on the previous row?
http://fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox
There is no easy way to do this with flexbox. But if you are willing to sacrifice IE then you can do it with css grid, add this to the container:
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
And if you want to have some space between the elements then add
grid-gap: 10px;
I know I am kind of late, but I have been looking for solution for this in past hour or so, and I think I sort of figured it out. Put empty div on the end of your container, and set flex-grow: 1 to it, and nothing else. Also set justify-content: space-between on container, and don't use flex-grow on other items. This will always make last line align left because this div will stretch through all remaining space.
However the problem of this is that it ALWAYS makes last line align left - even if it is the only line, which makes this solution unusable for me, but it might be usable for someone who can expect more than one line of items.
If the width of your items is fixed, you can add several empty divs to the end of your list of items:
<div class="item">meaningful content</div>
<div class="item">meaningful content</div>
<div class="item">meaningful content</div>
<div class="empty-div"></div>
<div class="empty-div"></div>
<div class="empty-div"></div>
and then:
.item, .empty-div{ width: 150px; } // make them the same width
Works perfectly well.
I was able to achieve the desired result with a combination of positive and negative margins.
If each element in the container defines a margin to create a space between them:
.container .element {
flex: 1;
margin: 0px 5px;
}
recover the pixels from the edges of each row in the container with a negative margin of the same amount:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0px -5px;
}
This should result in 10px between each element in the row with the first and last of each row at the edge of the container.
One solution that will work in many cases is simply applying padding to the items. Then you can use flex-start, and get spacing in between the cards.
For example
.container {
display: flex;
justify-content: center;
}
.parent {
width: 420px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
}
.child {
flex: 0 30%;
min-width: 100px;
padding-left: 10px;
margin-bottom: 10px;
}
.child-content {
background-color: yellow;
border: 1px solid black;
height: 100px;
}
<div class="container">
<div class="parent">
<div class="child">
<div class="child-content">
Box
</div>
</div>
<div class="child">
<div class="child-content">
Box
</div>
</div>
<div class="child">
<div class="child-content">
Box
</div>
</div>
<div class="child">
<div class="child-content">
Box
</div>
</div>
<div class="child">
<div class="child-content">
Box
</div>
</div>
</div>
</div>
CSS Flex 4 columns always starting at left. I cant see wy this is impossible? If the columns should be equal in with, this working for us using calc() and relative units:
/* parent */
.ua-flex {
display: flex;
flex-wrap: wrap;
justify-content: start;
}
/* children */
.ua-flex > * {
flex: 0 0 calc(25% - 1em);
margin: 1em 0 0 0;
}
.ua-flex > :not(:nth-child(4n+4)) {
margin-right: 1.333333em;
}
Im I missing something here? Its all abouth math, the subtracted calc() in this case 1em, gives 3 space of gap 1.333em with margin-right on 3 of 4 columns, and 0.5em subtracted calc() should give 0.666em gap with margin-right on 3 of 4 columns.
Hope this can be useful...
I just stumbled across the same problem and came up with another solution. I can't decide whether it feels kind of dirty or elegant, but decide for yourself.
Add as many empty divs as your maximum number of items per row to the container, assign them the same class as row items but remove any margin or padding from them (basically anything which gives them a height). That'll result in the row behaving as expected because after the last row item, there'll always be enough invisible "spacers" to pad the row. Those being wrapped to the next row have no height, so they shouldn't affect the rest of your page.
Example here:
https://jsfiddle.net/amknwjmj/
.products {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.product {
/* set top and bottom margin only, as left and right
will be handled by space-between */
margin: 0.25rem 0;
/* account your desired margin two times and substract
it from the base width of the row item */
flex-basis: calc(25% - (0.25rem * 2));
}
.product.spacer {
/* remove all properties increasing the element height
from the spacers to avoid them being visible */
margin: 0;
padding: 0;
height: initial;
}
/* start demo styles (purely eye-candy not required for this to work) */
* {
box-sizing: border-box;
font-family: sans-serif;
}
.products {
padding: .25rem .5rem;
background: powderblue;
}
.product {
height: 75px;
line-height: 75px;
padding: .25rem;
text-align: center;
background: steelblue;
color: #fff;
}
.product.spacer {
background: none;
/* of course, spacers should NOT have a border
but they are helpful to illstrate what's going on. */
border: 1px dashed gray;
}
/* end demo styles */
<div class="products">
<article id="product-1" class="product">P1</article>
<article id="product-2" class="product">P2</article>
<article id="product-3" class="product">P3</article>
<article id="product-4" class="product">P4</article>
<article id="product-5" class="product">P5</article>
<div class="product spacer"></div>
<div class="product spacer"></div>
<div class="product spacer"></div>
<div class="product spacer"></div>
</div>
so, you have a container and some stuff inside?
<div class="container">
<span>msg1</span>
<span>msg1</span>
<span>msg1</span>
<span>msg1</span>
<span>msg1</span>
</div>
This is how it works, when you declare display: flex for your container all of its direct children will become flex too, with some default config (align-items:strech).
I guess you already got that, so, maybe you can try using justify-content: space-between which will align your items in the row leaving them equally spaced plus flex-basis: 25% (to certify that there will be always 4 items in a row, change de % as you wish) that is supposed to work for all your lines except the last one. For the last one you can use a css selector (like last-child) and set its property to flex-grow: 0 / flex-shrink:0 (solving one of your problems, if you used flex: 1 1 25% instead of flex-basis) and also align-self: flex-start or whatever you like
You could try it with a fixed-with-pseudo-element:
.container {
display:flex;
justify-content:space-between;
}
.container:after {
content: '';
flex-grow: 0;
width: 25%;
}
.container .element {
width: 25%;
}
You can specify margin-right on every item except the last one in the row of flex-wrap by doing the following:
.item:not(:nth-child(4n)) {
margin-right: 20px;
}
I was facing the same issue and in fact it's really simple. No need to put some
SCSS and or jQuery.
You just need to specify a maximum number of "square", and make a modulo to know if that match with your maxNumber. If its not, you just have to define a quick function that increment your number until that modulo return 0.
When you have your number you just have to loop your html.
For me I was coding on ReactNative:
const RenderInvisibleSquare = (nb) => {
let tab = [];
let i = 1;
for (; (nb + i) % 3 !== 0; i++) {}
for (let n = 0; n < i; n++) {
tab.push(<View style={{ width: 120, height: 120, backgroundColor: 'red' }}/>);
}
return tab;
};
<ScrollView>
{
data.map(item => (
<View>
<View style={{ marginVertical: 5 }}>
<Text style={{ textAlign: 'center', color: '#7E8BF5' }}>{item.title}</Text>
</View>
<View style={{ flex: 1, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-around', flexDirection: 'row' }}>
{
item.data.map(elem => (
<View style={{ width: 120, height: 120, marginBottom: 10, backgroundColor: 'red' }} />
))
}
{ item.data.length % 3 !== 0 && RenderInvisibleSquare(item.data.length)}
</View>
</View>
))
}
</ScrollView>
If you dont want content (backgroundColor: 'red') in my case you juste have to make it 'transparent'.
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 5 years ago.
As you can see in the code below, the left div inside the flex container stretches to meet the height of the right div. Is there an attribute I can set to make its height the minimum required for holding its content (like usual height: auto divs outside flex containers)?
#a {
display: flex;
}
#a > div {
background-color: red;
padding: 5px;
margin: 2px;
}
#b {
height: auto;
}
<div id="a">
<div id="b">left</div>
<div>right<br>right<br>right<br>right<br>right<br></div>
</div>
The align-items, or respectively align-content attribute controls this behaviour.
align-items defines the items' positioning perpendicularly to flex-direction.
The default flex-direction is row, therfore vertical placement can be controlled with align-items.
There is also the align-self attribute to control the alignment on a per item basis.
#a {
display:flex;
align-items:flex-start;
align-content:flex-start;
}
#a > div {
background-color:red;
padding:5px;
margin:2px;
}
#a > #c {
align-self:stretch;
}
<div id="a">
<div id="b">left</div>
<div id="c">middle</div>
<div>right<br>right<br>right<br>right<br>right<br></div>
</div>
css-tricks has an excellent article on the topic. I recommend reading it a couple of times.
When you create a flex container various default flex rules come into play.
Two of these default rules are flex-direction: row and align-items: stretch. This means that flex items will automatically align in a single row, and each item will fill the height of the container.
If you don't want flex items to stretch – i.e., like you wrote:
make its height the minimum required for holding its content
... then simply override the default with align-items: flex-start.
#a {
display: flex;
align-items: flex-start; /* NEW */
}
#a > div {
background-color: red;
padding: 5px;
margin: 2px;
}
#b {
height: auto;
}
<div id="a">
<div id="b">left</div>
<div>
right<br>right<br>right<br>right<br>right<br>
</div>
</div>
Here's an illustration from the flexbox spec that highlights the five values for align-items and how they position flex items within the container. As mentioned before, stretch is the default value.
Source: W3C