flexbox包装是否有可能打破最后几个元素的流程？

Question

2个问题。似乎flexbox是用于对称布局的好工具。但是，在包装元素时，我找不到将最后一个项目处理为某种“中断行流”的示例，并且无法像justify-content:flex-end;那样将其粘贴到右侧，也不能堆叠在一起。 / p>

这里是codepen 和代码：

body {
  display: flex;
  flex-wrap: wrap;
}

.full-width {
  flex: 100%;
}

.fifty {
  flex: 0 0 50%;
}

.one-third {
  flex: 0 0 33%;
  /*how do we get the second .one-third to stick to the right?*/
}

<div class="full-width">full-width</div>
<div class="fifty">fifty</div>
<div class="fifty">fifty</div>
<div class="one-third">one-third</div>
<div class="one-third">one-third <br/> How do we get this to stick to the right when part of a row?</div>

下面是行换行的屏幕截图：

这是我的追求：

一个我找不到的类似问题是，是否有可能将最后两个元素彼此堆叠在一起。

Answer 1

您可以尝试这样做。

设置margin-left最后一个元素的.one-third。

请参阅代码笔链接： https://codepen.io/davecar21/pen/QBQRvL

body{
  display:flex;
  flex-wrap: wrap;
}
.full-width{
  flex:100%;
}
.fifty{
  flex:0 0 50%;
}
.one-third{
  flex:0 0 33%;
  // how do we get the second .one-third to stick to the right?
}

.one-third:last-child{
  margin-left: auto;
  // will make the last-child margin-left to be auto so it will align to the right side
}




<div class="full-width">full-width</div>
<div class="fifty">fifty</div>
<div class="fifty">fifty</div>
<div class="one-third">one-third</div>
<div class="one-third">one-third <br/> How do we get this to stick to the right when part of a row?</div>

---

  

一个我找不到的类似问题是是否有可能   将最后两个元素彼此堆叠在一起。

我认为只有两个堆叠元素的宽度大于50％才有可能。

div.one-third:nth-child(4),
div.one-third:nth-child(5){
      margin:auto;
      flex:0 0 55%;
}