如何使用 flexbox 將右側的專案串列對齊為串列？
像這樣的東西？
p {
display: flex;
justify-content: space-between;
}<p>
<span>List</span>
<span>3 oranges</span>
<span>4 apples</span>
<span>6 bananas</span>
</p>uj5u.com熱心網友回復：
您需要將這兩個元素分開。
像這樣的東西：
.list {
display: flex;
justify-content: space-between;
}<div class="list">
<div>
<span>List</span>
</div>
<div>
<div>3 oranges</div>
<div>4 apples</div>
<div>6 bananas</div>
</div>
</div>uj5u.com熱心網友回復：
- 集團近三年
<span>的<p> - 總結第一
<span>和<p>在<div>
??
使用語意元素：p用于段落/文本。
1 - justify-content: space-between;
在 的兩個孩子之間添加空格<div>。因此，第一個 the<span>和 the<p>被推到兩側。
div {
display: flex;
justify-content: space-between;
}
p {
display: flex;
flex-direction: column;
}<div>
<span>List</span>
<p>
<span>3 oranges</span>
<span>4 apples</span>
<span>6 bananas</span>
</p>
</div>我會使用第一種方法。
2 - margin-left: auto;
將 推<p>到右側。
div {
display: flex;
}
p {
display: flex;
flex-direction: column;
margin-left: auto;
}<div>
<span>List</span>
<p>
<span>3 oranges</span>
<span>4 apples</span>
<span>6 bananas</span>
</p>
</div>3 margin-right: auto;
將 推<p>到右側。
div {
display: flex;
}
div > span {
margin-right: auto;
}
p {
display: flex;
flex-direction: column;
}<div>
<span>List</span>
<p>
<span>3 oranges</span>
<span>4 apples</span>
<span>6 bananas</span>
</p>
</div>4 - flex-grow: 1;
第一個<span>占用盡可能多的空間。因此，<p>被推到了右邊。
div {
display: flex;
}
div > span {
flex-grow: 1;
}
p {
display: flex;
flex-direction: column;
}<div>
<span>List</span>
<p>
<span>3 oranges</span>
<span>4 apples</span>
<span>6 bananas</span>
</p>
</div>uj5u.com熱心網友回復：
<div class="list">
<span>List</span>
<div>
<span>3 oranges</span>
<span>4 apples</span>
<span>6 bananas</span>
</div>
.list {
display: flex;
flex-direction:row;
justify-content: space-between;
}
.list div{
display:flex;
flex-direction:column;
}
您應該將串列包裝在一個 div 中，然后將串列項包裝在另一個 div 中以實作您想要的布局。
uj5u.com熱心網友回復：
這應該可以解決問題
.cont {
display: flex;
justify-content: space-between;
}
.cont div {
display: flex;
flex-direction: column;
}<div class="cont">
<div>
<span>List</span>
</div>
<div>
<span>3 oranges</span>
<span>4 apples</span>
<span>6 bananas</span>
</div>
</div>uj5u.com熱心網友回復：
在不更改 HTML 結構的情況下，您可以執行以下操作：
p {
display: flex;
flex-wrap:wrap;
justify-content: space-between;
}
p span:nth-child(n 3) {
width:100%;
text-align:right;
}<p>
<span>List</span>
<span>3 oranges</span>
<span>4 apples</span>
<span>6 bananas</span>
</p>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/335875.html
上一篇：否定全屏選擇器不起作用