CSS：flexbox的第一个孩子向左并休息到中心[重复]

Posted 2023-03-05

【中文标题】CSS：flexbox的第一个孩子向左并休息到中心[重复]

【英文标题】：CSS: flexbox first child to left and rest to center [duplicate]

【发布时间】：2017-03-15 13:19:36

【问题描述】：

我正在玩 CSS 的 flexbox。我正在尝试创建导航菜单。我希望菜单的第一项位于最左侧，其余项目位于中间。目前我的一切都在中心。为了使内容居中对齐，我将justify-content: center 与容器一起使用。

但我不知道我可以对齐flex-box 中的特定项目。我尝试float 它，但由于float 不适合对齐，而且浮动也不适用于弹性框项目。有没有办法/解决方法来实现这一点？谢谢。这是要玩的pen。

body
  background: #e0f080;
    color: white;
    font-weight: bold;
    font-size: 1em;

.flex-container 
    display: -webkit-flex;
    display: flex;
    background-color: tomato;
    color: white;
    font-weight: bold;
    font-size: 1em;
    justify-content: center;

.flex-item  
    align-content: space-around;
    margin: 10px;
  border: 2px solid white;
  padding: 5px;

.menu
  order: -1;  
  align-self: start;
  font-size: 3em;

【参考方案1】：

对于 flex-direction: row （默认），您应该设置 margin-right: auto 以使子元素向左对齐。

.container 
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;

.block 
  width: 50px;
  background: tomato;

.justify-start 
  margin-right: auto;

<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

试试这个代码，让我知道如果你想要你也可以去这个链接https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins

【参考方案2】：

使用定位 - 将 position: relative 添加到 flex-container 并将其应用于 menu：

position: absolute;
top: 0;
left: 0;

我还删除了您使用的一个无效属性 (align-self: start) 来清理它 - 演示如下：

body 
  background: #e0f080;
  color: white;
  font-weight: bold;
  font-size: 1em;

.flex-container 
  display: -webkit-flex;
  display: flex;
  background-color: tomato;
  color: white;
  font-weight: bold;
  font-size: 1em;
  justify-content: center;
  position: relative;

.flex-item 
  align-content: space-around;
  margin: 10px;
  border: 2px solid white;
  padding: 5px;

.menu 
  order: -1;
  font-size: 3em;
  position: absolute;
  top: 0;
  left: 0;

<div class="flex-container">
  <div class="menu">
    <span>&#8801;<span>
  </div>
      
<a class="flex-item">item 1</a>
<a class="flex-item">item 2</a>
<a class="flex-item">item 3</a>
</div>

【讨论】：

@HiteshKumar 让我知道您对此的反馈，谢谢！

你成功了。非常感谢！