我正在使用flexbox將某些項目居中放置在一個塊中，但我希望其中的每個項目都位于其自己的行中。例如，我希望橙色方塊位于文本上方，但是在使用flex之后，將其移動到了文本的側面-請問有人知道解決這個問題的方法嗎？.container { height: 200px; width: 200px; background: cornflowerblue; position: relative;}.inner { height: 100%; position: absolute; left: 0; width: 100%; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;}.square { width: 30px; height: 30px; background: tomato; display: block;}<div class="container"> <div class="inner"> <div class="square"></div> <p>some text</p> </div></div>
3 回答
BIG陽
TA貢獻1859條經驗 獲得超6個贊
添加此樣式：
.inner {
flex-direction: column;
}
這告訴flexbox在行而不是列中顯示其子級。（我知道，很奇怪，對吧？）
更新的代碼段：
.container {
height: 200px;
width: 200px;
background: cornflowerblue;
position: relative;
}
.inner {
height: 100%;
position: absolute;
left: 0;
width: 100%;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.square {
width: 30px;
height: 30px;
background: tomato;
display: block;
}
<div class="container">
<div class="inner">
<div class="square"></div>
<p>some text</p>
</div>
</div>
慕田峪4524236
TA貢獻1875條經驗 獲得超5個贊
我看到這個問題來自：垂直對齊兩個 被標記為重復但實際上不是的彈性項目。
BTW賦予2個元素不同的垂直位置，請設置以下屬性：
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
容器內部只有2個元素，它將在頂部顯示第一個元素，在底部顯示第二個元素。因此，為了使其中1個垂直居中，需要向容器中添加一個空的偽元素，這樣容器內就有3個元素。
.container:before {
content: "";
}
html, body {
height: 100%;
margin: 0;
}
.container {
width: 500px;
margin: 0 auto;
border: 5px solid orange;
height: 100%;
/* Flex properties */
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.container:before {
content: "";
}
.item-one {
border: 5px solid yellow;
}
.item-two {
border: 5px solid red;
}
<div class="container">
<div class="item-one">Item One</div>
<div class="item-two">Item Two</div>
</div>
- 3 回答
- 0 關注
- 695 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消