如何使用 flexbox 对齐一些块

Question

基本上我想实现这个：

我有 4 个区块：

<div style="width: auto;">1</div>
<div style="width: 13px;">2</div>
<div style="width: 45px;">3</div>
<div style="width: 45px;">4</div>

目前我在第 1、3、4 块上没有任何样式，我在第 2 块上保留了一个浮点数，看起来不错，但我想使用 css flex 来实现这一点。

我怎样才能做到这一点？谢谢

更新：我没有将任何答案标记为完整的原因是我在发布任何答案之前设法找到了一个好的解决方案，而且它也更轻松。我唯一做的就是在容器div 上设置display: flex; flex-wrap: wrap;，在第一个孩子上设置flex-grow: 1;。

Answer 1

希望这会有所帮助！

你不能在弹性容器中使用float，原因是浮动属性不适用于弹性级别的盒子。

您可以通过为每个div 设置order 来实现此目的。为2nd div 设置margin-left:auto。

.box{
  background-color:green;
  display:flex;
  flex-wrap:wrap;
  width:61px;
  padding:5px;
}
.box>div{
  background-color:pink;
}
.box>div:nth-child(2){
  margin-left: auto;
    order: 2;
}
.box>div:nth-child(3){
    order: 3;
}
.box>div:nth-child(4){
    order: 4;
}

<div class="box">
<div style="width: auto;">1</div>
<div style="width: 13px;">2</div>
<div style="width: 45px;">3</div>
<div style="width: 45px;">4</div>
</div>

Answer 2

您需要将您的盒子包装在一个容器中，这样您就可以通过 flex 属性调整对齐方式，如下所示：

div:not(.container){
  height:50px;
  background:#333;
  margin-bottom:10px;
  color:#fff;
}
.container{
  display:flex;
  flex-wrap:wrap;
}
.container{
      justify-content: space-between;
}

.div1{
  flex:0 0 15%;
}
.div2{
  flex:0 0 40%;
}
.div3,.div4{
  flex:0 0 60%;
}

<div class="container">
  <div class="div1" >1</div>
  <div class="div2" >2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>