4

When box-container have align-items: flex-start boxes marked as b3 and b4 do not want to wrap items they contain. Why is it?

If you remove the line, wrapping works (bonus question, why items don't stretch parent container?)

#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>
ikiK
  • 6,328
  • 4
  • 20
  • 40
AN-
  • 53
  • 3

1 Answers1

3

It's because stretch (which is the default alignment) make the b3 b4 have full height of their parent container which is a needed constraint in order to have a wrapping. Without stretch you will simply have a, overflow since there is no height contraint. Inspect the element in both cases and you will notice that:

  1. With stretch the height is variable based on the parent container which is the screen size
  2. without stretch (when you define align-items: flex-start) the height is fixed based on the content (the 3 boxes inside)

You can get a similar behavior with b1 and b2 if you disable the default shrink effect:

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

Having flex-shrink:0 there is no width contraint so the item will have the width of its content, no more shrinking and no more wrapping.

For your bonus question check this: When flexbox items wrap in column mode, container does not grow its width

Temani Afif
  • 245,468
  • 26
  • 309
  • 415