html - 当对齐项设置为拉伸(stretch)以外的任何其他值时，flex-wrap 不适用于列-6ren

html - 当对齐项设置为拉伸(stretch)以外的任何其他值时，flex-wrap 不适用于列

转载作者：行者123 更新时间：2023-12-03 23:40:05

当 box-container 有 align-items: flex-start标记为 b3 的框和 b4不想包装它们包含的元素。为什么？
如果删除该行，则包装有效(额外问题，为什么元素不拉伸(stretch)父容器？)

#box-container {
  width: 100%;
  height: 100vh;
  background-color: hsl(0, 0%, 80%);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* !!! */
}

.box {
  min-width: 135px;
  min-height: 135px;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  /* переносит на следующую строку/столбец элемент, если мало места */
  align-content: flex-start;
  /* выравнивание рядов по вертикали */
  justify-items: flex-start;
  /* выравнивание столбцов по горизонтали */
}

#b1 {
  background-color: hsl(0, 25%, 50%);
  flex-direction: row;
}

#b2 {
  background-color: hsl(90, 25%, 50%);
  flex-direction: row-reverse;
}

#b3 {
  background-color: hsl(180, 25%, 50%);
  flex-direction: column;
}

#b4 {
  background-color: hsl(270, 25%, 50%);
  flex-direction: column-reverse;
}

.smallbox {
  width: 125px;
  height: 125px;
  margin: 5px;
  display: flex;
  align-items: center;
  /* выравнивание содержимого по вертикали */
  justify-content: center;
  /* выравнивание содержимого по горизонтали */
}

<html>

<head>
  <title>CSSFlexbox Main Page</title>
  <link rel="stylesheet" href="style.css">
</head>

<body style="margin: 0;">
  <div id="box-container">
    <div id="b1" class="box">
      <div class="smallbox sb1" style="background-color:hsla(0, 50%, 50%);">
        <h2>1</h2>
      </div>
      <div class="smallbox sb2" style="background-color:hsla(30, 50%, 50%);">
        <h2>2</h2>
      </div>
      <div class="smallbox sb3" style="background-color:hsla(60, 50%, 50%);">
        <h2>3</h2>
      </div>
    </div>
    <div id="b2" class="box">
      <div class="smallbox sb1" style="background-color:hsla(90, 50%, 50%);">
        <h2>1</h2>
      </div>
      <div class="smallbox sb2" style="background-color:hsla(120, 50%, 50%);">
        <h2>2</h2>
      </div>
      <div class="smallbox sb3" style="background-color:hsla(150, 50%, 50%);">
        <h2>3</h2>
      </div>
    </div>
    <div id="b3" class="box">
      <div class="smallbox sb1" style="background-color:hsla(180, 50%, 50%);">
        <h2>1</h2>
      </div>
      <div class="smallbox sb2" style="background-color:hsla(210, 50%, 50%);">
        <h2>2</h2>
      </div>
      <div class="smallbox sb3" style="background-color:hsla(240, 50%, 50%);">
        <h2>3</h2>
      </div>
    </div>
    <div id="b4" class="box">
      <div class="smallbox sb1" style="background-color:hsla(270, 50%, 50%);">
        <h2>1</h2>
      </div>
      <div class="smallbox sb2" style="background-color:hsla(300, 50%, 50%);">
        <h2>2</h2>
      </div>
      <div class="smallbox sb3" style="background-color:hsla(330, 50%, 50%);">
        <h2>3</h2>
      </div>
    </div>
  </div>
</body>

</html>

最佳答案

这是因为stretch (这是默认对齐方式)使 b3 b4具有其父容器的完整高度，这是进行包装所需的约束。没有拉伸(stretch)，你只会有一个溢出，因为没有高度限制。在这两种情况下检查元素，您会注意到:

拉伸(stretch)高度可变基于父 屏幕大小的容器

没有拉伸(stretch)(当你定义 align-items: flex-start 时)高度是固定的 基于内容 (里面的3个盒子)

您可以使用 b1 获得类似的行为和 b2如果禁用默认收缩效果:

#box-container {
  width: 100%;
  height: 100vh;
  background-color: hsl(0, 0%, 80%);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* !!! */
}

.box {
  min-width: 135px;
  min-height: 135px;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  /* переносит на следующую строку/столбец элемент, если мало места */
  align-content: flex-start;
  /* выравнивание рядов по вертикали */
  justify-items: flex-start;
  /* выравнивание столбцов по горизонтали */
}

#b1 {
  background-color: hsl(0, 25%, 50%);
  flex-direction: row;
  flex-shrink:0;
}

#b2 {
  background-color: hsl(90, 25%, 50%);
  flex-direction: row-reverse;
  flex-shrink:0;
}

#b3 {
  background-color: hsl(180, 25%, 50%);
  flex-direction: column;
}

#b4 {
  background-color: hsl(270, 25%, 50%);
  flex-direction: column-reverse;
}

.smallbox {
  width: 125px;
  height: 125px;
  margin: 5px;
  display: flex;
  align-items: center;
  /* выравнивание содержимого по вертикали */
  justify-content: center;
  /* выравнивание содержимого по горизонтали */
}

<html>

<head>
  <title>CSSFlexbox Main Page</title>
  <link rel="stylesheet" href="style.css">
</head>

<body style="margin: 0;">
  <div id="box-container">
    <div id="b1" class="box">
      <div class="smallbox sb1" style="background-color:hsla(0, 50%, 50%);">
        <h2>1</h2>
      </div>
      <div class="smallbox sb2" style="background-color:hsla(30, 50%, 50%);">
        <h2>2</h2>
      </div>
      <div class="smallbox sb3" style="background-color:hsla(60, 50%, 50%);">
        <h2>3</h2>
      </div>
    </div>
    <div id="b2" class="box">
      <div class="smallbox sb1" style="background-color:hsla(90, 50%, 50%);">
        <h2>1</h2>
      </div>
      <div class="smallbox sb2" style="background-color:hsla(120, 50%, 50%);">
        <h2>2</h2>
      </div>
      <div class="smallbox sb3" style="background-color:hsla(150, 50%, 50%);">
        <h2>3</h2>
      </div>
    </div>
    <div id="b3" class="box">
      <div class="smallbox sb1" style="background-color:hsla(180, 50%, 50%);">
        <h2>1</h2>
      </div>
      <div class="smallbox sb2" style="background-color:hsla(210, 50%, 50%);">
        <h2>2</h2>
      </div>
      <div class="smallbox sb3" style="background-color:hsla(240, 50%, 50%);">
        <h2>3</h2>
      </div>
    </div>
    <div id="b4" class="box">
      <div class="smallbox sb1" style="background-color:hsla(270, 50%, 50%);">
        <h2>1</h2>
      </div>
      <div class="smallbox sb2" style="background-color:hsla(300, 50%, 50%);">
        <h2>2</h2>
      </div>
      <div class="smallbox sb3" style="background-color:hsla(330, 50%, 50%);">
        <h2>3</h2>
      </div>
    </div>
  </div>
</body>

</html>