1

Стандартно при space-between получается такое расположение элементов. Последний элемент располагается всегда справа. Если в последней строке 3 элемента, то между ними согласно space-between также равное расстояние, но оно отличается от расстояния которое между блоками выше строкой.

Стандартно при space-between

Как можно сделать вот такой вид с помощью flexbox? Мне всё также нужно сделать равное расстояние между блоками (т.к. я незнаю заранее ширину контейнера/ширину экрана), незнаю кол-во блоков которое будет, знаю только размер этих блоков (по ширине их может влазить то 2, то 3, то 4 шт.).

введите сюда описание изображения

Т.е. идут блоки к примеру по 4 шт в ряд и между ними такое-то расстояние, как сделать так, чтобы в последней строке, если блоков не 4 шт. то расстояние между ними всё равно было такое-же, как в рядах выше?

1
  • Добавьте свой код сюда 4 окт 2018 в 5:34

2 ответа 2

1

.column {
  border: 2px solid black;
  width: 200px;
  height: 200px;
  margin: 15px;
}

.BigBlock {
  display: inline-block;
}

.block {
  display: flex;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bootstrap 101 Template</title>
  <link rel="stylesheet" type="text/css" href="css/style2.css">

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">


</head>



<body>
  <div class="BigBlock">
    <div class="block">
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
    </div>

    <div class="block">

      <div class="column"></div>
      <div class="column"></div>
    </div>

    <div class="block">

      <div class="column"></div>
      <div class="column"></div>
      <div class="column"></div>
    </div>

  </div>


</body>

</html>

1

Используй flex-basis для разделения на блоки.

Пример flex-basis с разметкой

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
}

.block {
  height: 200px;
  flex-basis: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 1px solid black;
}

.item {
  height: 100px;
  border: 10px solid black;
  width: 100px;
}
<div class="container">
  <div class="block">
    <div class="item">

    </div>
  </div>
  <div class="block">
    <div class="item">

    </div>
  </div>
  <div class="block">
    <div class="item">

    </div>
  </div>
  <div class="block">
    <div class="item">

    </div>
  </div>
  <div class="block">
    <div class="item">

    </div>
  </div>
  <div class="block">
    <div class="item">

    </div>
  </div>
  <div class="block">
    <div class="item">

    </div>
  </div>
</div>

Для маленьких разрешений используй media-запрос для создания адаптивности, если она нужна.

Использование Gridов

А вообще я бы рекомендовал использовать grid для создания подобного рода разметки, потому что это более гибкое и удобное решение.

Например вы можете задать сколько нужно вам элементов в строке grid-template-columns: repeat(4, 1fr) и какие зазоры вам нужны grid-gap: 10px, чего вы не сможете сделать на flexbox или сможете но не так просто.

Пример c Grid

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid black;
  border-radius: 5px;
}

.wrapper>div {
  border: 2px solid black;
  border-radius: 5px;
  background-color: white;
  padding: 1em;
  height: 100px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.