Question

我有一个有4个元素的flexbox容器：C1，C2，C3，C4。

目前，它显示在一行中。

我的目标是让C4显示在C3下。

有人可以指导我如何实现目标吗？提前谢谢。

以下是我的代码：https://jsfiddle.net/vvqhejt3/3/

.flexbox {
  display: flex;
  border: 1px solid black;
  width: 330px;
}
.content1 {
  width: 100px;
  margin-right: 10px;
  background-color: blue;
  height: 50px;
}
.content2 {
  width: 100px;
  margin-right: 10px;
  background-color: yellow;
}
.content3 {
  width: 100px;
  margin-right: 10px;
  background-color: red;
}
.content4 {
  width: 100px;
  background-color: green;
  height: 10px;
}

<div class="flexbox">
  <div class="content1">C1</div>
  <div class="content2">C2</div>
  <div class="content3">C3</div>
  <div class="content4">C4</div>
</div>

Answer 1

创建弹性容器（display: flex或display: inline-flex）时，它会带有几个默认设置。其中包括：

flex-direction: row - 弹性项目将水平对齐
justify-content: flex-start - 弹出项目将叠加在行的开头
align-items: stretch - flex项目将展开以涵盖容器的交叉大小
flex-wrap: nowrap - Flex项目被强制保留在一行

请注意上一次设置。

你的四个div被迫保持一条线。

您可以使用flex-wrap: wrap覆盖此设置。

然后，您可以使用auto margin将项目放在右侧。

.flexbox {
    display: flex;
    flex-wrap: wrap;           /* NEW */
    border: 1px solid black;
    width: 330px;
}

.content1 {
    width: 100px;
    margin-right: 10px;
    background-color: blue;
    height: 50px;
}

.content2 {
    width: 100px;
    margin-right: 10px;
    background-color: yellow;
}

.content3 {
    width: 100px;
    margin-right: 10px;
    background-color: red;
}

.content4 {
    width: 100px;
    background-color: green;
    height: 10px;
    margin-left: auto;         /* NEW */
    margin-right: 10px;        /* NEW */
}

<div class="flexbox">
    <div class="content1"> C1 </div>
    <div class="content2"> C2 </div>
    <div class="content3"> C3 </div>
    <div class="content4"> C4 </div>
</div>

参考文献：

Answer 2

将flex-flow: row wrap;和justify-content: flex-end;添加到容器，将margin-right: 10px;添加到div类.content4。还要确保更正最后一个容器中的类。目前它说conten4

此外，这里还有一个指向flexbox简单指南的链接。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

HTML

<div class="flexbox">
  <div class="content1"> C1 </div>

  <div class="content2"> C2 </div>

  <div class="content3"> C3 </div>

  <div class="content4"> C4 </div>
</div>

CSS

.flexbox {
  display: flex;
  border: 1px solid black;
  width: 330px;
  flex-flow: row wrap;
  justify-content: flex-end;
}

.content1 {
  width: 100px;
  margin-right: 10px;
  background-color: blue;
  height: 50px;
}

.content2 {
  width: 100px;
  margin-right: 10px;
  background-color: yellow;
}

.content3 {
  width: 100px;
  margin-right: 10px;
  background-color: red;
}

.content4 {
  width: 100px;
  background-color: green;
  height: 10px;
  margin-right: 10px;
}

将弹性项目移动到下一行的最右侧

2 个答案: