0

Как сделать что-бы блоки контента прижимались друг к другу по вертикали? Сейчас сделанно на flex. И выглядит вот-так. Можно ли это сделать на flex?

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

Нужно что-бы выглядело вот так.

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

1

3 ответа 3

4

Такую сетку проще сделать с помощью CSS Grid. Но и на flex-box нет ничего сложного. Я бы сделал так:

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  flex-direction: row;
}

.count_1,
.count_2,
.count_3 {
  display: inline-flex;
  flex-direction: column;
  width: calc((100% / 3) - 5px * 2);
  margin: 5px;
}

.one,
.two,
.three {
  padding: 10px;
  background: tomato;
  margin-bottom: 10px;
  flex: 1 0 auto;
}
<body>
  <div class="count_1">
    <div class="one">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Placerat duis ultricies lacus sed turpis tincidunt. Condimentum
        id venenatis a condimentum vitae. A diam sollicitudin tempor id eu nisl. At in tellus integer feugiat scelerisque varius morbi enim nunc. Viverra aliquet eget sit amet tellus cras adipiscing enim. Viverra aliquet eget sit amet tellus cras adipiscing
        enim. Gravida cum sociis natoque penatibus et magnis.</p>
    </div>
    <div class="two">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Placerat duis ultricies lacus sed turpis tincidunt. Condimentum
        id venenatis a condimentum vitae. A diam sollicitudin tempor id eu nisl. At in tellus integer feugiat scelerisque varius morbi enim nunc. Viverra aliquet eget sit amet tellus cras adipiscing enim. Viverra aliquet eget sit amet tellus cras adipiscing
        enim.</p>
    </div>
    <div class="three">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Placerat duis ultricies lacus sed turpis tincidunt. Condimentum
        id venenatis a condimentum vitae. </p>
    </div>
  </div>
  <div class="count_2">
    <div class="one">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Placerat duis ultricies lacus sed turpis tincidunt. Condimentum
        id venenatis a condimentum vitae. A diam sollicitudin tempor id eu nisl. At in tellus integer feugiat scelerisque varius morbi enim nunc. Viverra aliquet eget sit amet tellus cras adipiscing enim. Viverra aliquet eget sit amet tellus cras adipiscing
        enim. Gravida cum sociis natoque penatibus et magnis. Leo integer malesuada nunc vel risus commodo. Donec pretium vulputate sapien nec sagittis. Ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet.</p>
    </div>
    <div class="two">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt arcu non sodales neque sodales ut etiam sit amet. </p>
    </div>
    <div class="three">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Placerat duis ultricies lacus sed turpis tincidunt. Condimentum
        id venenatis a condimentum vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Placerat duis ultricies lacus
        sed turpis tincidunt. Condimentum id venenatis a condimentum vitae. </p>
    </div>
  </div>
  <div class="count_3">
    <div class="one">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Placerat duis ultricies lacus sed turpis tincidunt. Condimentum
        id venenatis a condimentum vitae. A diam sollicitudin tempor id eu nisl. At in tellus integer feugiat scelerisque varius morbi enim nunc. Viverra aliquet eget sit amet tellus cras adipiscing enim. Viverra aliquet eget sit amet tellus cras adipiscing
        enim. Gravida cum sociis natoque penatibus et magnis. Leo integer malesuada nunc vel risus commodo. Donec pretium vulputate sapien nec sagittis. Ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet. Pellentesque eu tincidunt tortor
        aliquam nulla facilisi cras fermentum. Mauris vitae ultricies leo integer malesuada nunc. Mauris ultrices eros in cursus. A pellentesque sit amet porttitor eget dolor. Mauris ultrices eros in cursus turpis massa tincidunt. Sollicitudin aliquam
        ultrices sagittis orci a scelerisque purus. Vitae elementum curabitur vitae nunc sed velit.</p>
    </div>
    <div class="two">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Placerat duis ultricies lacus sed turpis tincidunt. Condimentum
        id venenatis a condimentum vitae. A diam sollicitudin tempor id eu nisl. At in tellus integer feugiat scelerisque varius morbi enim nunc. Viverra aliquet eget sit amet tellus cras adipiscing enim. Viverra aliquet eget sit amet tellus cras adipiscing
        enim.</p>
    </div>
  </div>
</body>

Нужно просто сделать отдельный flex-контейнер для каждого столбца.

2
  • сделать отдельный flex-контейнер для каждого столбца - Не обязательно, посмотрите мой ответ Commented 29 дек. 2019 в 16:38
  • @МихаилКамахин вы посмотрите свой пример и пример Романа ..так вот у него лучше Commented 29 дек. 2019 в 17:01
1

Можно так сделать, если есть вопросы, могу пояснить как-что прижимается

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0;
	color: black;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
}

.wrapper {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
        display: flex;
	flex-direction: column;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	max-width: 200px;
	max-height: 600px;
	border: 1px solid black;
	align-content: flex-start;
}

.flex__item {
	height: 70px;
	width: 40px;
	background-color: green;
	margin-bottom: 20px;
	margin-right: 10px;
}

.flex__item:nth-child(3) {
	height: 20px;
}

.flex__item:nth-child(6) {
	height: 40px;
}

.flex__item:nth-child(2) {
	height: 100px;
}
<div class="wrapper">
	<div class="flex__item"></div>
	<div class="flex__item"></div>
	<div class="flex__item"></div>
	<div class="flex__item"></div>
	<div class="flex__item"></div>
	<div class="flex__item"></div>
	<div class="flex__item"></div>
	<div class="flex__item"></div>
	<div class="flex__item"></div>
	<div class="flex__item"></div>
	<div class="flex__item"></div>
	<div class="flex__item"></div>
	<div class="flex__item"></div>
	<div class="flex__item"></div>
</div>

0

внутри дива с определенной высотывведите сюда описание изображения делаете 3 столбца по ширине 32 процента гдето, а высота каждого элемента тоже можно подогнать и между ними маргин-топ промежуток 20пикселя например

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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