Flexbox: 4 элемента в строке

Я использую flex box для отображения 8 элементов, которые будут динамически изменять размер с моей страницы. Как заставить его разделить элементы на две строки? (4 в ряду)?

вот соответствующий СНиП:

(или, если вы предпочитаете jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/)

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}
.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}
.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}
<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>
7 104
html css css3 flexbox html5

7 ответов:

добавить ширину к .child элементы. Я лично бы использовал проценты на margin-left Если вы хотите иметь его всегда 4 в строке.

демо

.child {
    display: inline-block;
    background: blue;
    margin: 10px 0 0 2%;
    flex-grow: 1;
    height: 100px;
    width: calc(100% * (1/4) - 10px - 1px);
}
88

ты flex-wrap: wrap на контейнере. Это хорошо, потому что он переопределяет значение по умолчанию:nowrap (источник). Это причина, по которой элементы не переносятся, чтобы сформировать сетку в в некоторых случаях.

в этом случае основная проблема flex-grow: 1 на деталях гибкого трубопровода.

The flex-grow свойство на самом деле не размер гибких элементов. Его задача-распределить свободное пространство в контейнере (источник). Так что независимо от того, насколько мал размер экрана, каждый элемент получит пропорциональную часть свободного места на линии.

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

решение состоит в том, чтобы определить ширину на элементах. Попробуйте это:

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; /* explanation below */
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

С flex-grow: 1 определенными в flex стенография, в этом нет необходимости flex-basis быть 25%, что фактически приведет к трем элементам в строке из-за полей.

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

99

вот еще один передовой.

вы можете сделать это таким образом:

.parent{
  display: flex;
  flex-wrap: wrap;
}

.child{
  width: 25%;
  box-sizing: border-box;
}

образец: https://codepen.io/capynet/pen/WOPBBm

и более полный пример: https://codepen.io/capynet/pen/JyYaba

27
<style type="text/css">
.parent{
    display: flex;
    flex-wrap: wrap;
}
.parent .child{
    flex: 1 1 25%;
}
</style>    
<div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>

надеюсь, что это помогает. для более подробной информации вы можете следить за этим ссылке

8

Я считаю, что этот пример является более barebones и легче понять затем @dowomenfart.

.child {
    display: inline-block;
    margin: 0 1em;
    flex-grow: 1;
    width: calc(25% - 2em);
}

Это выполняет такие же вычисления ширины пока режущ прямо к мясу. Математика намного проще и em это новый стандарт благодаря своей масштабируемости и мобильности.

1

.parent-wrapper {
	height: 100%;
	width: 100%;
	border: 1px solid black;
}
	.parent {
	display: flex;
	font-size: 0;
	flex-wrap: wrap;
	margin-right: -10px;
	margin-bottom: -10px;
}
	.child {
	background: blue;
	height: 100px;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: calc(25% - 10px);
}
	.child:nth-child(even) {
	margin: 0 10px 10px 10px;
	background-color: lime;
}
	.child:nth-child(odd) {
	background-color: orange; 
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	</style>
</head>
<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>
</html>

;)

0

вот еще один способ без использования calc().

// 4 PER ROW
// 100 divided by 4 is 25. Let's use 21% for width, and the remainder 4% for left & right margins...
.child {
  margin: 0 2% 0 2%;
  width: 21%;
}

// 3 PER ROW
// 100 divided by 3 is 33.3333... Let's use 30% for width, and remaining 3.3333% for sides (hint: 3.3333 / 2 = 1.66666)
.child {
  margin: 0 1.66666% 0 1.66666%;
  width: 30%;
}

// and so on!

вот и все. Вы можете получить фантазии с размерами, чтобы получить более эстетические размеры, но это идея.

-12