时间戳

首页 > 解决方案 > 当对齐项设置为拉伸以外的任何其他值时，flex-wrap 不适用于列

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

问题描述

当 box-container 将align-items: flex-start盒子标记为b3并且b4不想包装它们包含的项目时。为什么？

如果删除该行，则包装有效（额外问题，为什么项目不拉伸父容器？）

#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>

标签： htmlcssflexbox

解决方案

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

  1. 使用拉伸，高度会根据父容器（即屏幕尺寸）而变化
  2. 没有拉伸（当您定义时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>

flex-shrink:0没有宽度限制，因此项目将具有其内容的宽度，不再收缩，不再包装。

对于您的额外问题，请检查以下内容：当 flexbox 项目以列模式包装时，容器不会增加其宽度

推荐阅读