问题
我目前正在尝试使用动态宽度使居中包装器中的块左对齐。我不能仅使用HTML / CSS来工作。
这是一个JSFiddle:https://jsfiddle.net/hudxtL8L/
例子
所以目前,它看起来像这样:
| _____ _____ |
| | | | | |
| | | | | |
| |_____| |_____| |
| _____ _____ |
| | | | | |
| | | | | |
| |_____| |_____| |
| _____ |
| | | |
| | | |
| |_____| |
| |
我希望它看起来像这样:
| _____ _____ |
| | | | | |
| | | | | |
| |_____| |_____| |
| _____ _____ |
| | | | | |
| | | | | |
| |_____| |_____| |
| _____ |
| | | |
| | | |
| |_____| |
| |
或者,在更大的设备上,如下所示:
| _____ _____ _____ |
| | | | | | | |
| | | | | | | |
| |_____| |_____| |_____| |
| _____ _____ _____ |
| | | | | | | |
| | | | | | | |
| |_____| |_____| |_____| |
| _____ |
| | | |
| | | |
| |_____| |
| |
这里重要的是,最后一行不是居中,而是在居中父集中左对齐。可以做到吗?如果可以,怎么做?我尝试了不同的方法,但是所有方法都失败了。
尝试的方法
边距:0自动将无法工作,因为它需要固定的宽度,但我希望每行尽可能多的
.element
。使用表似乎也很困难,因为我不知道在当前设备的一行中可以容纳多少
.element
个。使用javascript当然可以工作,但是我感觉有一个仅CSS的解决方案。
最佳答案
使用可以使用CVS flex
实现此布局。
一种方法是定义一个具有固定宽度的容器#content
,并以margin: 0 auto
居中。
将flex属性应用于#content
,使用justify-content: space-between
将子元素放置在所需位置。
子.elements
需要flex-basis: 100px
来指定flex
容器上下文内的宽度。
您可以使用边距控制元素之间的间距。
参考:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
#viewport {
border: 1px solid black;
}
#content {
width: 250px;
margin: 0 auto;
border: 1px dashed blue;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.element {
border: 1px dotted black;
flex-basis: 100px;
height: 100px;
margin: 10px; /* optinal, gives you some control on spacing */
}
<div id="viewport">
<div id="content">
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
<div class="element">5</div>
</div>
</div>