Question

这是一个非常简单的练习，但是我似乎找不到一种整齐的方法来解决它（刚刚开始学习HTML和CSS）。

5 blocks in a row

使用Flexbox，我需要红色的第5个块（“ blood 5”）在其他四个块下面。结果应该是：

4 blocks in a row and 1 in another row

有人可以帮我吗？这是我到目前为止的内容：

div {
  margin: 5px;
  border: 1px solid pink;
  padding: 5px;
  font-family: arial, sans-serif;
  font-size: 14px;
}

.contenidor {
  width: 760px;
  display: flex;
}

div[class*=element] {
  width: 100%;
  padding: 2px 30px 5px 2px;
}

.element5 {
  background-color: red;
}

<div class="contenidor">
  <div class="element1">bloque 1</div>
  <div class="element2">bloque 2</div>
  <div class="element3">bloque 3</div>
  <div class="element4">bloque 4</div>
  <div class="element5">bloque 5</div>
</div>

Answer 1

在flexbox中连续包含 n个项目的要点是， padding 和 margin 也必须是考虑是因为您包装弹性盒。我对您的代码进行了以下更改：

要包装Flexbox，您需要在 flexbox容器上输入flex-wrap: wrap
要获得每行4个项目，可以使用flex-basis作为25％，并使用calc调整边距，
要获得少于4个项目的行填充可用空间，您也可以在 flex项目上考虑flex-grow: 1，
还考虑在box-sizing: border-box上添加element*，以便将 padding 包含在 width 中（因此也包含在{{ 1}}）

您可以在这里找到类似的问题：arranging 5 items in a row。参见下面的演示：

flex-basis

div {
  margin: 5px;
  border: 1px solid pink;
  padding: 5px;
  font-family: arial, sans-serif;
  font-size: 14px;
}

.contenidor {
  width: 760px;
  display: flex;
  flex-wrap: wrap; /* wrapping flexbox */
}

div[class*=element] {
  /*width: 100%;*/
  padding: 2px 30px 5px 2px;
  box-sizing: border-box; /* adjusts for padding */
  flex-grow: 1; /* expand to fill remaining space */
  flex-basis: calc(25% - 10px); /* 4 items per row, adjust for the 5px margin */
}

.element5 {
  background-color: red;
}

Answer 2

真的没有理由要做这样的事情div[class*=element]，而只需用点div.element
您的代码不起作用的原因之一是您缺少框大小。以这种方式添加填充和边距将使您的孩子超过所需的大小。
使用flex时，使用flex参数确实可以简化您的工作。

您可以在此处看到有关如何使用flex-box的很好的教程 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这是一种简单的方法。

 div {
      border: 1px solid black;
       box-sizing: border-box;
    }
    
    .parent {
      display: flex;
      flex-wrap: wrap;
      justify-content: stretch;
    }
    
    .child {
      flex: 1 0 25%;
    }

<div class="parent">
      <div class="child">I am one</div>
      <div class="child">I am two</div>
      <div class="child">I am three</div>
      <div class="child">I am four</div>
      <div class="child">I am five</div>
    </div>

Answer 3

* {
  margin: 0;
  box-sizing: border-box;
}

section {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: 100vh;
}

section > div {
  flex-basis: 25%;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.1);
  text-align: center;
}

section > div:last-child {
  flex-basis: 100%;
}

<section>
  <div>
  1
  </div>
  <div>
  2
  </div>
  <div>
  3
  </div>
  <div>
  4
  </div>
  <div>
  5
  </div>
</section>

如何使用Flexbox从特定项目开始新行？

3 个答案: