Как сделать что-бы блоки контента прижимались друг к другу по вертикали? Сейчас сделанно на flex. И выглядит вот-так. Можно ли это сделать на flex?
Нужно что-бы выглядело вот так.
Как сделать что-бы блоки контента прижимались друг к другу по вертикали? Сейчас сделанно на flex. И выглядит вот-так. Можно ли это сделать на flex?
Нужно что-бы выглядело вот так.
Такую сетку проще сделать с помощью 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-контейнер для каждого столбца.
сделать отдельный flex-контейнер для каждого столбца
- Не обязательно, посмотрите мой ответ
Commented
29 дек. 2019 в 16:38
Можно так сделать, если есть вопросы, могу пояснить как-что прижимается
*, *: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>