Пример:
1
2
3
4
5
6
7
8
Обратите внимание: контент, расположенный в блоках должен умещаться в них при любом разрешении экрана, иначе он будет обрезан
Если блоки используются не для текста, а например, для фоновых картинок, слой fl-col-text
не нужен.
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="fl-row"> <div class="fl-col"> <div class="fl-col-text"> 1 </div> </div> <!-- Еще блоки --> <div class="fl-col"> <div class="fl-col-text"> 8 </div> </div> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.fl-row * { box-sizing: border-box; } .fl-row { display: flex; flex-wrap: wrap; margin: 10px 0; } .fl-col { width: calc(25% - 20px); margin: 10px; position: relative; overflow: hidden; border: 8px solid #BFE2FF; } .fl-col:after { content: ""; padding-top: 100%; float: left; } .fl-col-text { padding: 20px; position: absolute; width: 100%; height: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center; font-size: 30px; color: #337AB7; } |
Добавить комментарий: