Flexbox не полная ширина - PullRequest
0 голосов
/ 21 мая 2018

У меня есть базовый flexbox, как этот ..

.masonry_container {
  display: flex;
}

.masonry_left_col {
  border: 1px solid grey;
}

.masonry_right_col {
  border: 1px solid grey;
}
<div class="masonry_container">

  <div class="masonry_left_col">
    Content
  </div>

  <div class="masonry_right_col">
    Content
  </div>

</div>

Почему это не распространяется на всю ширину?

Я знаю, что это, вероятно, действительно просто, но я не могу решить это,куда я иду не так?

Ответы [ 3 ]

0 голосов
/ 21 мая 2018

Контейнер flex расширяет всю ширину - это элемент уровня блока.

.masonry_container {
  display: flex;
  border: 1px solid red;
}

.masonry_container > div {
  border: 1px solid grey;
  background-color: lightgreen;
}
<div class="masonry_container">
  <div class="masonry_left_col">Content</div>
  <div class="masonry_right_col">Content</div>
</div>

Но гибкие элементы имеют две настройки по умолчанию, которые предотвращают автоматическое расширение:

Это означает, что элементы берут длину своего содержимого и не потребляют бесплатнопробел.

Для расширения элементов необходимо переопределить значение по умолчанию flex-grow.

.masonry_container {
  display: flex;
  border: 1px solid red;
}

.masonry_container > div {
  flex-grow: 1;
  border: 1px solid grey;
  background-color: lightgreen;
}
<div class="masonry_container">
  <div class="masonry_left_col">Content</div>
  <div class="masonry_right_col">Content</div>
</div>
0 голосов
/ 21 мая 2018

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

.masonry_container {
  display:flex;
}
.masonry_left_col {
  border:1px solid grey;
  flex-grow: 1; /* 33% width relative to right column */
}
.masonry_right_col {
  border:1px solid grey;
  flex-grow: 2; /* 66% width relative to left column */
}
<div class="masonry_container">
    <div class="masonry_left_col">
        Content
    </div>
    <div class="masonry_right_col">
        Content
    </div>
</div>
0 голосов
/ 21 мая 2018

Контейнер на самом деле имеет ширину 100%, т.е. охватывает всю ширину окна.Но с настройками Flex по умолчанию его дочерние элементы будут просто выравниваться по левому краю и будут иметь ширину, равную только их содержимому.

Однако, если вы примените flex-grow: 1; к дочерним элементам, чтобы они стали шире, они будутрастянуть и заполнить всю ширину контейнера.

.masonry_container {
  display: flex;
}

.masonry_left_col {
  border: 1px solid grey;
  flex-grow: 1;
}

.masonry_right_col {
  border: 1px solid grey;
  flex-grow: 1;
}
<div class="masonry_container">

  <div class="masonry_left_col">
    Content
  </div>

  <div class="masonry_right_col">
    Content
  </div>

</div>

Или, если вы хотите, чтобы гибкие элементы полностью и без усилий растягивались влево и вправо внутри контейнера, добавьте justify-items: space-between в контейнер

.masonry_container {
  display: flex;
  justify-content: space-between;
}

.masonry_left_col {
  border: 1px solid grey;
}

.masonry_right_col {
  border: 1px solid grey;
}
<div class="masonry_container">

  <div class="masonry_left_col">
    Content
  </div>

  <div class="masonry_right_col">
    Content
  </div>

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...