我正在使用 flexbox 模型將 div 項向右對齊。它在專案只有一行時有效,但當我有多行時,只有第一行右對齊。如果 div 填充兩行或多行,則下一行將向左對齊。
注意第一列的最后一個 div,以粗體顯示。
這是一種使用 flexbox 使所有行的多行文本正確對齊的方法嗎?
/* CSS */
.wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.col-md-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-md-9 {
flex: 0 0 65%;
max-width: 65%;
margin-left: 20px;
}
.item-first-col {
justify-content: flex-end;
border: 1px solid blue;
}
.item-second-col {
border: 1px solid blue;
}
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
<!-- HTML -->
<div class="wrapper">
<div class="item-first-col col-md-3 d-flex">
One line text
</div>
<div class="item-second-col col-md-9 d-flex align-items-center">
Second column text
</div>
<div class="item-first-col col-md-3 d-flex">
One line text
</div>
<div class="item-second-col col-md-9 d-flex align-items-center">
Second column text
</div>
<div class="item-first-col col-md-3 d-flex" style="font-weight: bold;">
Here goes the text that fills two lines
</div>
<div class="item-second-col col-md-9 d-flex align-items-center">
Second column text
</div>
</div>
uj5u.com熱心網友回復:
只需使用text-align: right;
.wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.col-md-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-md-9 {
flex: 0 0 65%;
max-width: 65%;
margin-left: 20px;
}
.item-first-col {
justify-content: flex-end;
border: 1px solid blue;
text-align: right;
}
.item-second-col {
border: 1px solid blue;
}
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
<div class="wrapper">
<div class="item-first-col col-md-3 d-flex">
One line text
</div>
<div class="item-second-col col-md-9 d-flex align-items-center">
Second column text
</div>
<div class="item-first-col col-md-3 d-flex">
One line text
</div>
<div class="item-second-col col-md-9 d-flex align-items-center">
Second column text
</div>
<div class="item-first-col col-md-3 d-flex" style="font-weight: bold;">
Here goes the text that fills two lines
</div>
<div class="item-second-col col-md-9 d-flex align-items-center">
Second column text
</div>
</div>
謝謝和最好的問候!
uj5u.com熱心網友回復:
您可以使用text-align
css 屬性
/* CSS */
.wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
text-align: right;
}
.text {
text-align: right;
width: 100%;
}
.col-md-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-md-9 {
flex: 0 0 65%;
max-width: 65%;
margin-left: 20px;
}
.item-first-col {
justify-content: flex-end;
border: 1px solid blue;
}
.item-second-col {
border: 1px solid blue;
}
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
<!-- HTML -->
<div class="wrapper">
<div class="item-first-col col-md-3 text">
One line text
</div>
<div class="item-second-col col-md-9 align-items-center text">
Second column text
</div>
<div class="item-first-col col-md-3 text">
One line text
</div>
<div class="item-second-col col-md-9 align-items-center text">
Second column text
</div>
<div class="item-first-col col-md-3 text" style="font-weight: bold;">
Here goes the text that fills two lines
</div>
<div class="item-second-col col-md-9 align-items-center text">
Second column text
</div>
</div>
uj5u.com熱心網友回復:
僅使用 Flexbox 屬性無法按照您想要的方式對齊文本。
原因出現在Flexbox 規范中:
flex 容器的每個流入子項都成為一個 flex 項,并且每個連續的子文本運行序列都包裝在一個匿名塊容器 flex 項中。
在您的示例中,您可以對齊單行文本,但對齊的不是文本,而是包含它的匿名塊。這就是它起作用的原因。
它不適用于多行文本,因為撰寫更多文本只會增加匿名塊的大小并拉伸以填充整個 parent div
。那時,您設定的值無關緊要justify-content
。
做你想做的事情的唯一方法是在匿名塊將繼承text-align:right
的父div
級上使用,使其包含的文本向右對齊。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/474073.html
上一篇:如何解決CSS檔案的問題?