时间戳

首页 > 解决方案 > 是否有可能使用 flexbox 包装来打破最后几个元素的流动？

css - 是否有可能使用 flexbox 包装来打破最后几个元素的流动？

问题描述

2个问题。似乎 flexbox 是对称布局的绝佳工具。但是，在包装元素时，我找不到将最后一个项目操作为“中断行流”的示例，或者将其粘贴到类似于justify-content:flex-end;工作方式的右侧，或者相互堆叠。

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

这是行换行的屏幕截图： 在此处输入图像描述

这是我所追求的： 在此处输入图像描述

我找不到任何类似的问题是是否可以将最后两个元素堆叠在一起。

标签： cssflexbox

解决方案

你可以尝试这样做。

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

请查看 codepen 链接： 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%;
}

推荐阅读