CSS:flexbox第一个孩子到左边休息到中心

Question

我正在玩flexboxCSS.我正在尝试创建导航菜单.我希望菜单的第一项位于最左侧,其余项目位于中心.目前我的一切都在中心.要在中心对齐内容我正在使用justify-content: center容器.

但我不知道我可以调整特定项目flex-box.我试过float它但是因为float不是为了对齐而且float也不能用于flexbox项目.有没有办法/解决方法来实现这一目标？谢谢.这是可以玩的笔.

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;
}

Answer 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

Answer 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>