Почему у моей гибкой обертки большие зазоры и почему она меняет направление гибкой колонны?

Question

поэтому, когда я научился использовать flex-box, я заметил, что мой flex-wrap: wrap расположен очень странным образом, в зависимости от точки зрения, у него большие промежутки между коробками.

Также по какой-то причине столбец flex-direction равен :

Также вот код:

.cont {
  display: flex;
  border: purple solid;
  flex-wrap: wrap;
}

.cont div {
  padding: 10px;
  flex-basis: 300px;
  background: linear-gradient(45deg, rgb(233, 47, 124), rgb(9, 175, 92));
}

<div class="cont">
  <div class="box4">
    <h1>Box4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box5">
    <h1>Box5</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box6">
    <h1>Box6</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box7">
    <h1>Box7</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box8">
    <h1>Box8</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box9">
    <h1>Box9</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="box10">
    <h1>Box10</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Answer 1

Как указывает pfcodes, ваши элементы просто не помещаются в ряд и поэтому обернуты. Кроме того, когда вы используете flex-wrap, вы должны учитывать свойство align-content. Вы можете думать об этом как о выравнивании поперечной оси, когда элементы переносятся. В вашем случае, поскольку flex direction равно row (по умолчанию), align-content повлияет на вертикальное выравнивание обернутых линий. Он принимает значение stretch по умолчанию.

Взгляните на этот вспомогательный инструмент для лучшего понимания и тестирования над flexbox.

Answer 2

Свойство flex-wrap указывает, должны ли гибкие элементы переноситься или нет. В вашем случае вы указали flex-basis:300px и padding:10px, поэтому ширина каждого поля будет flex-basis + padding-left + padding-right = 300+10+10 = 320px (так как вы не установили box-sizing:border-box, отступ будет включен в ширину).

В вашем случае ширины div.cont недостаточно для трех ящиков (320*3=960px). Таким образом, ваша коробка переносится на следующую строку. Если вы хотите отобразить три поля подряд.

.cont div{
  padding:10px;
  flex-basis:calc(100% - 20px);
}

модифицированная версия вашего кода http://jsbin.com/luqevob/1/

Answer 3

flex-wrap делает так, что переполнение одной строки переносит в новую строку. Причина, по которой он переполняется так рано, что оставляет большой зазор вправо, заключается в том, что гибкие элементы слишком широки, чтобы их можно было равномерно разместить в контейнере. Попробуйте уменьшить значение flex-basis.