如何使用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块上没有任何样式，我在第二块上保持一个浮动，看起来不错，但我想用css flex来实现这个目标。 / p>

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

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

Answer 1

希望这有帮助！

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

您可以为每个order设置div。margin-left:auto设置2nd div。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>