align Flex elements from bottom row under the other elements

Question

I have few elements I'm trying to align. the first two rows are perfectly aligned because they have the same number of elements. the last one have less elements, and I would like to keep the bottom elements aligned with the top ones. Like this image example

HTML

<div id="bulbsCentralizer">

            <div id="letterCentralizer">
                <h3 class="letter">A</h3>
            </div>

            <div id="letterCentralizer">
                <h3 class="letter">B</h3>
            </div>

            <div id="letterCentralizer">
                <h3 class="letter">C</h3>
            </div>

            <div id="letterCentralizer">
                <h3 class="letter">D</h3>
            </div>

            <div id="letterCentralizer">
                <h3 class="letter">E</h3>
            </div>

            <div id="letterCentralizer">
                <h3 class="letter">F</h3>
            </div>  

            <div id="letterCentralizer">
                <h3 class="letter">G</h3>
            </div>  

        </div>

CSS

#bulbsCentralizer {
width: 600px;
height: auto;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
flex-wrap: wrap;
flex-flow: row wrap;    
}

#letterCentralizer {
width: 40px;
height: 60px;
text-align: center;
background-color: orange;
position: relative;
float: left;
width: calc(100% * (1/8) - 10px - 1px);
margin-top:10px;
}

did both! thanks, but still having the same problem and don't know why. https://jsfiddle.net/vwkvstfg/1/ @Phiter — Eugenio, Dec 26 '17 at 23:10

DevNico · Answer 1 · 2017-12-26T23:35:33.290

0

If you want to use flex to align your elements, don't use float or position. Use flex properties! More info on: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 200px;
}
.element {
  width: 50px;
  height: 50px;
  background-color: red;
  flex: 0 0 32%;
  margin: 1% 0;
}
.element:nth-child(3n-1) {
  margin-left: 2%;
  margin-right: 2%;
}

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

edited Dec 26 '17 at 23:35

answered Dec 26 '17 at 23:13

DevNico

138
1
12

thanks for your help @Nicolas, but my problem still remaining there, for example, I just implemented your code to my jsfiddle, if you reduce size of screen you'll see that the elements from the latest row use the space-between to distribute, but I need last row to align under the elements from the upper row from left to right:( https://jsfiddle.net/vwkvstfg/3/ – Eugenio Dec 26 '17 at 23:19
thanks @Nicolas, but there's a way to give the margin to that pseudo-after element for that last line? I've added more elements and reduced screen size to test, and that last line seems to avoid the margin: 5px; I've tried creating another pseudo-after for the .element including the 5px of margin but not working, not aligning with the top elements :( https://jsfiddle.net/vwkvstfg/4/ – Eugenio Dec 26 '17 at 23:31
I think I got it now. Harder than I thought at first... – DevNico Dec 26 '17 at 23:36
indeed it is pal! I'm trying to find a solution too @Nicolas – Eugenio Dec 26 '17 at 23:40

avshyz · Answer 2 · 2017-12-27T00:00:20.477

0

https://jsfiddle.net/vwkvstfg/6/

Basically, flex handles displays over one axis pretty well. But this problem's has a better solution - using display: grid grid-template-columns is gonna be used here as more of a convenience.

Cheers!

edited Dec 27 '17 at 00:00

answered Dec 26 '17 at 23:21

avshyz

125
2
7

thanks a lot @avshyz but there's no way to keep it centered (all the elements) and the last row to the left? because right now there's more space on the right side from last element:( – Eugenio Dec 26 '17 at 23:23
https://jsfiddle.net/vwkvstfg/5/ how about this one? I've used the grid layout, which seems a tad more appropriate here. edit: even a better one - https://jsfiddle.net/vwkvstfg/6/ – avshyz Dec 26 '17 at 23:37
wow seems to be good! but, there's a way to align this grid somehow to have same space to the left and right side of the container? also I've never seen this, this work in all browsers?:) thanks in advance @avshyz – Eugenio Dec 26 '17 at 23:40
1

This one jsfiddle.net/vwkvstfg/6 fixes it. Basically, removing the specified width, and letting the grid handle it all. It work's on *most* of the modern browsers, so take that with a grain of salt. You can see it clearly here https://caniuse.com/#feat=css-grid Cheers! – avshyz Dec 26 '17 at 23:45
Hmm grid might be the better way to go here. Flexbox just doesn't offer a good solution for what you need. – DevNico Dec 26 '17 at 23:46
Wow excellent solution @avshyz that seems to work perfectly:D! how do I vote yours as correct? excellent! – Eugenio Dec 26 '17 at 23:52
Re-edited my comment. Good luck learning how to code! – avshyz Dec 27 '17 at 00:06

align Flex elements from bottom row under the other elements

2 Answers2