Flex-box：將最后一行與網格對齊。我有一個簡單的彈性箱布局，容器如下：.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;}現在，我希望最后一行中的項目與另一行對齊。justify-content: space-between;應該使用，因為網格的寬度和高度可以調整。目前看來在這里，我希望右下角的項目在“中間欄”。實現這一目標的最簡單方法是什么？這里有一個小的小提琴這表明了這種行為。.exposegrid { display: flex; flex-flow: row wrap; justify-content: space-between;}.exposetab { width: 100px; height: 66px; background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 5px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); margin-bottom: 10px;}<div class="exposegrid"> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div></div>
3 回答
largeQ
TA貢獻2039條經驗 獲得超8個贊
body {
padding: 5%;
}
div {
overflow: hidden;
background-color: yellow;
}
ul {
display: flex;
flex-wrap: wrap;
margin: 0 -4px -4px 0;
list-style: none;
padding: 0;
}
li {
flex: 1 0 200px;
height: 200px;
border-right: 4px solid black;
border-bottom: 4px solid black;
background-color: deeppink;
}
li:empty {
height: 0;
border: none;
}
*,
:before,
:after {
box-sizing: border-box;
}
<div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
::after(n).
江戶川亂折騰
TA貢獻1851條經驗 獲得超5個贊
ul {
display: grid; /* 1 */
grid-template-columns: repeat(auto-fill, 100px); /* 2 */
grid-gap: 1rem; /* 3 */
justify-content: space-between; /* 4 */}auto-fit
ul {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-gap: 1rem;
justify-content: space-between;
/* boring properties */
list-style: none;
background: wheat;
padding: 2rem;
width: 80vw;
margin: 0 auto;}li {
height: 50px;
border: 1px solid green;}<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul>
Codepen演示 (調整大小以查看效果)
- 3 回答
- 0 關注
- 563 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消