相关疑难解决方法(0)
如何使Flex容器居中但左对齐flex项目
我希望flex项目居中,但是当我们有第二行时,将5(从下面的图像)下调到1并且不在父项中居中.
这是我的一个例子:
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
border: 1px solid gray;
margin: 15px;
padding: 5px;
width: 200px;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>67
推荐指数
推荐指数
3
解决办法
解决办法
3万
查看次数
查看次数
在元素的居中网格中左对齐的最后一行
我有一堆相同大小的块设置display:inline-block在div内部,text-align:center设置为对齐块.
| _____ _____ _____ _____ |
| | | | | | | | | |
| | 1 | | 2 | | 3 | | 4 | |
| |_____| |_____| |_____| |_____| |
| _____ _____ _____ _____ |
| | | | | | | | | |
| | 5 | | 6 | | 7 | | 8 | |
| |_____| |_____| |_____| |_____| |
| |
这些块水平填充div,随着浏览器窗口缩小,一些块会断开到新行,从而创建更多行和更少列.我希望所有内容仍然保持居中,最后一行与左边齐平,如下所示: …
47
推荐指数
推荐指数
3
解决办法
解决办法
2万
查看次数
查看次数
如何将项目与弹性容器的开始和居中对齐？
我试图水平对齐弹性容器，同时保持它们的项目与开头对齐。
我正在尝试align-content: flex-start在使用justify-content: center.
现在，如果最后一行的项目较少，它将以弹性容器为中心，而不是行的开头。
更新1
这是预期的结果：
9
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
具有固定列宽的流体flexbox网格
我有一个通过flexbox设置的容器.我想平均分配容器内的每个瓷砖,但保持它们的固定宽度为220px.
我已经接近使用flex-grow并设置了一个min-width: 220px,但它显然已经计算大小调整了瓷砖以填充容器.
我还设置了一些媒体查询,以便瓦片堆栈在某些断点上.
我目前的造型是否可以将这些瓷砖保持在220px而不会拉伸？这可以通过flexbox完成吗？有没有像flexbox一样好的替代品？
.container {
border: 1px solid red;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 2000px;
}
.tiles {
border: 1px solid black;
margin: 0 15px 30px 15px;
flex-grow: 1;
padding: 0;
height: 220px;
min-width: 220px;
}
@media screen and (max-width: 1140px) {
.container {
max-width: 850px;
}
}
@media screen and (max-width: 2040px) {
.container {
max-width: 1750px;
}
}
@media screen and (max-width: 1790px) {
.container {
max-width: 1500px; …8
推荐指数
推荐指数
1
解决办法
解决办法
9293
查看次数
查看次数
内嵌块盒不适合其容器
不知道我做错了什么,我认为通过添加边框,它将整齐地适合这4个盒子.
http://jsfiddle.net/jzhang172/x3ftdx6n/
.ok{
width:300px;
background:red;
height:100px;
box-sizing:border-box;
}
.box{
display:inline-block;
box-sizing:border-box;
width:25%;
border:2px solid blue;
height:100%;
}<div class="ok">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>5
推荐指数
推荐指数
1
解决办法
解决办法
816
查看次数
查看次数