Targeting flex items on the last or specific row
Unfortunately, in the current iteration of flexbox (Level 1), there is no clean way to solve the last-row alignment problem. It's a common problem.
It would be useful to have a flex property along the lines of:
last-row
last-column
only-child-in-a-row
alone-in-a-column
This problem does appear to be a high priority for Flexbox Level 2:
- CSS Working Group Wiki - Specification Issues and Planning
- https://lists.w3.org/Archives/Public/www-style/2015Jan/0150.html
Although this behavior is difficult to achieve in flexbox, it's simple and easy in CSS Grid Layout:
- Equal width flex items even after they wrap
In case Grid is not an option, here's a list of similar questions containing various flexbox hacks:
- Properly sizing and aligning the flex item(s) on the last row
- Flex-box: Align last row to grid
- Flexbox wrap - different alignment for last row
- How can a flex item keep the same dimensions when it is forced to a new row?
- Selector for an element alone in a row?
- Aligning elements in last flexbox row
- How can I allow flex-items to grow while keeping the same size?
- Left-align last row of flexbox using space-between and margins
- Inconsistent margin between flex items on last row
- How to keep wrapped flex-items the same width as the elements on the previous row?
- How to align left last row/line in multiple line flexbox
- Last children of grid get giant gutter cause of flexbox space-between
- Managing justify-content: space-between on last row
- Flexbox space between behavior combined with wrap
- Possible to use CSS Flexbox to stretch elements on every row while maintaining consistent widths?
Prevent flex items in the last row becoming larger than other flex items
Adding invisible flex items is the most popular way to go. It keeps all the flex good stuff and is a hack that makes clear sense.
.hidden-flex-item {
content: "";
flex: 1 0 200px;
padding: 5px;
margin-top: 10px;
margin-right: 5px;
visibility: hidden;
}
Fiddle here: https://jsfiddle.net/px37t2jc/9/
Css grid can also handle this sort of issue easily if you take the time to learn it.
How to wrap last row of flexbox with space-around?
You could try CSS
:last-child
as in the example below to use different style in your last div
.
.flexbox { display: flex; flex-flow: column;}
.flex-child { background: red; align-content: center; align-self: center;}
.flex-child:last-child { align-content: space-around; align-self: flex-start;}
<div class="flexbox"> <div class="flex-child"> one </div> <div class="flex-child"> two </div> <div class="flex-child"> three </div></div>
last row of flex div not starting from the left
.wrapper { background: green; text-align: center; width: 80%; margin-left: auto; margin-right: auto;}.wrapper-inner { padding: 5px; display: flex; flex-wrap: wrap;}
.square { flex: 0 1 33.33%;}
.square img { width: 100%; display: block;}
.square-inner { padding: 5px;}
<div class="wrapper"> <div class="wrapper-inner"> <div class="square"> <div class="square-inner"> <a href="#"><img src="http://placekitten.com/200/200" /></a> </div> </div> <div class="square"> <div class="square-inner"> <a href="#"><img src="http://placekitten.com/200/200" /></a> </div> </div> <div class="square"> <div class="square-inner"> <a href="#"><img src="http://placekitten.com/200/200" /></a> </div> </div> <div class="square"> <div class="square-inner"> <a href="#"><img src="http://placekitten.com/200/200" /></a> </div> </div> <div class="square"> <div class="square-inner"> <a href="#"><img src="http://placekitten.com/200/200" /></a> </div> </div> </div></div>
Targeting the last div before flexbox or float wraps the rest
Basically what @vals said, but with some more details:
- Let all flex items have the same margin-right,
m
. - Set the widths accordingly. For example, if you want
n
equal elements in a row, setwidth: calc(100%/n - m)
. - Let the flex container overflow its containing block, in order to hide the unwanted margin margin. Use
margin: -m
to achieve this. - Place the flex container in a wrapper with
overflow: hidden
.
.wrapper { overflow: hidden; border: 1px solid;}.flex { display: flex; flex-wrap: wrap; margin-right: -2%; text-align: center;}span { margin-right: 2%; border: 1px solid red; box-sizing: border-box;}span:nth-child(-n + 3) { width: calc(100%/2 - 2%); }span:nth-child(n + 6) { width: calc(100%/3 - 2%); }span:nth-child(1) { width: calc(100% - 2%); }span:nth-child(4) { width: calc(100%*.4 - 2%); }span:nth-child(5) { width: calc(100%*.6 - 2%); }
<div class="wrapper"> <div class="flex"> <span>100%</span> <span>49%</span> <span>49%</span> <span>39%</span> <span>59%</span> <span>32%</span> <span>32%</span> <span>32%</span> </div></div>
Related Topics
Angular:Failed to Load Images: 404 (Not Found)
How to Align Content of a Div to the Bottom
Absolute Div Height Being Cut Off Inside Relative Div
Flexbox: Center Horizontally and Vertically
What Are Valid Values For the Id Attribute in Html
Bootstrap Row With Columns of Different Height
Print Page Numbers on Pages When Printing HTML
Want to Make Font Awesome Icons Clickable
Moving an Image Across a HTML Canvas
How to Stop Background from Jumping to the Top on Modal Toggle
Css - How to Have Swiper Slider Arrows Outside of Slider That Takes Up 12 Column Row
Change Background Color of Iframe Issue