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

第一次玩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/

10-12 12:36
查看更多