1

Здравствуйте!

Что-то не придумать мне как располагать блоки по три в вертикальный ряд, может вы подскажите?

Есть форма с горизонтальным скроллом.

Надо что бы она наполнялась по принципу: сначала вниз до трёх, потом в следующий ряд (правее).

Наглядно это выглядит примерно так:

[1]
[2]

Потом

[1][4]
[2][5]
[3]

Ну и так далее:

[1][4][7]
[2][5]
[3][6]
2

2 ответа 2

2

Вариант flexbox

.container {
   height:200px;
  width:500px;
  display:flex;
  flex-flow: column wrap;
 }
  
.item {
   margin:20px 2px;
  background:red;
  widtth:20px;
  }
<div class="container">
   <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
   <div class="item">10</div>
  </div>
Вариант c columns

.container {
    columns: 130px 6;
    column-gap: 40px;
  width:400px
  }
.item {
      padding: 10px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
<div class="container">
   <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
   <div class="item">9</div>
  <div class="item">10</div>
  </div>

2

Всё решилось с помощью flex`a :)

.wrapper {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 400px;
}
.wrapper .item {
	width: 25%;
	height: 200px;
	background-color: gray;
	display: flex;
	justify-content: center;
    align-items: center;
    font-size: 50px;

}
<div class="wrapper">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
</div>

Ваш ответ

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

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