相关疑难解决方法(0)
列的动态数量,全部居中,内部左对齐
我有一些瓷砖,所有相同,静态宽度和高度在一些容器内.容器的宽度是动态的.瓷砖的数量是动态的.我需要将瓷砖"包裹",以便尽可能多地放在每一行上,但是当瓷砖的数量填满容器的宽度时会创建一个新的行.整行的瓷砖应居中.未填满的一行图块应与整行保持对齐(或者将其定位为完整并居中).见下图.
在此图中,绿色代表容器,黑色代表瓷砖.
我可以通过制作瓷砖inline-block并text-align: center在容器上使用来接近.但是,它出现如下:
这是一个代码示例.我能够对HTML进行必要的更改.
.container {
border: 5px solid #0f0;
width: 250px;
text-align: center;
}
.tile {
margin: 3px;
display: inline-block;
border: 5px solid #000;
width: 50px;
height: 40px;
}<div class="container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>8
推荐指数
推荐指数
1
解决办法
解决办法
1089
查看次数
查看次数
水平居中的Flex容器
使用flex创建图像网格时,如何在网页上水平居中网格本身？我仍然希望图像在每一行上左对齐.我希望每行的元素数量是动态的.
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.gallery-artwork {
width: 400px;
display: flex;
margin: 10px;
}<div class="gallery">
<div class="gallery-artwork">
<img src="http://placehold.it/400x225">
</div>
<div class="gallery-artwork">
<img src="http://placehold.it/400x225">
</div>
<div class="gallery-artwork">
<img src="http://placehold.it/400x225">
</div>
<div class="gallery-artwork">
<img src="http://placehold.it/400x225">
</div>
<div class="gallery-artwork">
<img src="http://placehold.it/400x225">
</div>
</div>7
推荐指数
推荐指数
1
解决办法
解决办法
198
查看次数
查看次数
是否可以在flex布局中定位每行的第一个和最后一个元素？
给定flex布局中的缩略图列表,如果Flex容器具有可变宽度,是否可以仅使用CSS来定位每行的第一个和最后一个元素？
.thumbnails {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
flex-flow: row wrap;
}
.thumbnail {
width: 250px;
height: 250px;
margin: 5px;
background: #ccc;
border: 1px solid #000;
}<ul class="thumbnails">
<li class="thumbnail"></li>
<li class="thumbnail"></li>
<li class="thumbnail"></li>
<li class="thumbnail"></li>
<li class="thumbnail"></li>
<li class="thumbnail"></li>
</ul>7
推荐指数
推荐指数
1
解决办法
解决办法
1727
查看次数
查看次数
内嵌块盒不适合其容器
不知道我做错了什么,我认为通过添加边框,它将整齐地适合这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
查看次数
查看次数
如何使用wrap并将Flex列表容器居中并对齐flex-start元素
我有一些问题实现Flex-box,在我对视图的要求我有一个卡列表,每张卡都有一个默认的宽度和高度.我可以使用柔性盒,我更喜欢它.当列表的元素不适合行时,它们应该换成新的,总是从左到右,并且所有列表都集中在容器的可用空间中.
这是布局和代码的plunker:
.list {
display: flex;
flex-grow: 0;
flex-shrink: 1;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
.item {
width: 200px;
height: 300px;
border: 1px solid black;
background-color: #e6e6e6;
margin: 12px;
}<body>
<div class="list">
<div class="item">someItem01</div>
<div class="item">someItem02</div>
<div class="item">someItem03</div>
<div class="item">someItem04</div>
<div class="item">someItem05</div>
</div>
</body>这就是我想要实现的目标:
这就是我现在所拥有的:
如何在不重复出现大量媒体查询,硬编码边距/填充等的情况下实现这一目标？
3
推荐指数
推荐指数
1
解决办法
解决办法
1426
查看次数
查看次数
如何更改flexbox包装？
我的应用程序中有一个响应式flexbox框，其中包含动态呈现的卡片（每个api调用呈现1-10张卡片）。它几乎可以完全满足我的要求，除了它的包装方式。
假设我渲染了10张卡片，如果我调整屏幕大小，使其变成例如4-4-2，则最后两张卡片居中，我希望将其包裹起来，以便最后两张卡片从左侧开始并以相等的间距从上面的卡片开始。你该怎么做？
编辑以进一步阐述：假设我将尺寸进一步调整为1-1-1-1-1-1-1-1-1-1，卡片应居中显示，我仍然需要居中，但我希望最后2张如果卡变成4-4-2或3-3-2等，则从左侧缠绕卡。
https://codepen.io/hyrosian/pen/EXKZJz
.card {
text-align: center;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
max-width: 300px;
margin: 2rem;
padding-bottom: 1rem;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.recipe-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around
}<div class="container">
<div class="recipe-grid">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - …2
推荐指数
推荐指数
1
解决办法
解决办法
1027
查看次数
查看次数
删除列表项左侧的空格
ul {
display: flex;
flex-wrap: wrap;
width: 45%;
height: 40%;
border: 1px solid red;
list-style: none;
margin: 0 auto;
}
ul li {
flex: 1;
}<ul>
<li><img src="images/yellow.gif" alt="Yellow"></li>
<li><img src="images/orange.gif" alt="Orange"></li>
<li><img src="images/purple.gif" alt="Purple"></li>
<li><img src="images/blue.gif" alt="Blue"> </li>
<li><img src="images/pink.gif" alt="Pink"> </li>
<li><img src="images/green.gif" alt="Green"> </li>
<li><img src="images/black.gif" alt="Black"> </li>
<li><img src="images/gray.gif" alt="Gray"> </li>
<li><img src="images/red.gif" alt="Red"> </li>
</ul>实际输出
根据实际输出,检查ul元素上有左边距,如下所示,
检查li元素上还有右边距,如下所示
预期产出
1)为什么存在这些边际空间？
2)如何避免这些边际空间？
1
推荐指数
推荐指数
1
解决办法
解决办法
1532
查看次数
查看次数