This question already has answers here:
In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
(4个答案)
2年前关闭。
![css - CSS Flex导航栏-怎么样?-LMLPHP css - CSS Flex导航栏-怎么样?-LMLPHP](https://dbsqp.com/x.php?x=ZXRKaTFxVk9PZHk4OE82UEZaa2J0ZjRsc3M2bzBjbmI5ZG1Qd1M1OHBlajYtcG94LWJWREM%3D)
第一次玩Flex时,经过大量阅读和玩后,我仍然没有解决这个问题。
我想要一个固定的导航栏。但这很容易,问题是我如何将第1项和第2项和第3项从末尾对齐?没关系,我将它们分组。
我相信您可以向我展示我的菜鸟错误,因此我表示正确-谢谢!
(4个答案)
2年前关闭。
第一次玩Flex时,经过大量阅读和玩后,我仍然没有解决这个问题。
我想要一个固定的导航栏。但这很容易,问题是我如何将第1项和第2项和第3项从末尾对齐?没关系,我将它们分组。
我相信您可以向我展示我的菜鸟错误,因此我表示正确-谢谢!
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
width: 100vw;
height: 8vh;
background-color: lightgrey;
}
.flex-item {
align-self: flex-start;
-webkit-align-self: flex-end;
}
.item1 {
background-color: cornflowerblue;
width: 200px;
height: 5vh;
align-self: flex-start;
-webkit-align-self: flex-start;
}
.item2 {
background-color: red;
width: 100px;
height: 5vh;
align-self: flex-end;
-webkit-align-self: flex-end;
}
.item3 {
background-color: yellow;
width: 100px;
height: 5vh;
align-self: flex-end;
-webkit-align-self: flex-end;
}
<div class="flex-container">
<div class="flex-item item1">flex item 1</div>
<div class="flex-item item2">flex item 2</div>
<div class="flex-item item3">flex item 3</div>
</div>
最佳答案
您可以删除align-self
div上的.flex-item
属性,而将margin-left: auto
添加到第二个.flex-item
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
width: 100vw;
height: 8vh;
background-color: lightgrey;
}
.item1 {
background-color: cornflowerblue;
width: 200px;
height: 5vh;
}
.item2 {
background-color: red;
width: 100px;
height: 5vh;
margin-left: auto;
}
.item3 {
background-color: yellow;
width: 100px;
height: 5vh;
}
<div class="flex-container">
<div class="flex-item item1">flex item 1</div>
<div class="flex-item item2">flex item 2</div>
<div class="flex-item item3">flex item 3</div>
</div>
关于css - CSS Flex导航栏-怎么样? ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46850824/