Bootstrap 3: автоматическое выравнивание нескольких элементов внутри контейнера - PullRequest
Новая
       26

Bootstrap 3: автоматическое выравнивание нескольких элементов внутри контейнера

0 голосов
/ 15 октября 2018

enter image description here

Мне нужен "простой" способ автоматической калибровки элементов внутри контейнера с помощью начальной загрузки 3 .

Мой подходдо сих пор: 

.container{
  width: 100%;
  height: 500px;
  background-color: purple;
  display: flex;
  flex-wrap: wrap;
}

.item{
  background-color: yellow;
  margin: 5px;
}

.item1{
  width: 30px;
  height: 50px;
}

.item2{
  width: 100px;
  height: 25px;
}

.item3{
  width: 50px;
  height: 100px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item2"></div>
  <div class="item item2"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item3"></div>
  <div class="item item1"></div>
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item2"></div>
  <div class="item item2"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item3"></div>
  <div class="item item1"></div>
</div>

В контейнере есть display: flex и flex-wrap: wrap, которые выравнивают их по горизонтали вправо, но мне как-то нужны элементы для выравнивания по вертикали.

Есть ли простой способ с флексбоксами или подобными свойствами?.

Я хочу по возможности избегать использования внешних библиотек, таких как кладка.

...