Question

我想要对齐的元素很少。前两行完全对齐，因为它们具有相同数量的元素。最后一个元素较少，我想保持底部元素与顶部元素对齐。像这个图像示例

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;
}

Answer 1

如果您想使用flex来对齐元素，请不要使用float或position。使用flex属性！有关更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

基本上，flex可以很好地处理一个轴上的显示。但是这个问题有一个更好的解决方案 - 使用display: grid grid-template-columns将在这里使用，更方便。

干杯！

将Flex元素与其他元素下的底行对齐

2 个答案: