2021-09-11 00:00:00

3 способа выравнивания блоков по ширине Сегодня мы разберем 3 основных способа выравнивания блоков по ширине с помощью CSS. 1. Выравнивание блоков на flexbox На данный момент способ выравнивания блоков по ширине на флексах, самый простой, элегантный и имеет хорошую поддержку у браузеров. Чтобы решить нашу задачу, достаточно flex-контейнеру прописать всего два свойства: display: flex и justify-content: center. // HTML разметка <div class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div> // CSS стили .flex-container { display: flex; justify-content: center; margin-bottom: 20px; } .flex-item { width: 100px; height: 100px; border: 2px solid salmon; background-color: pink; margin-left: 20px; } 2. Выравнивание на inline-block Свойство заданное контейнеру text-align: center, поставит все блоки по центру. Свойство display: inline-block, удерживает блоки в одном ряду. Этот способ можно использовать при верстке блоков преимуществ, карточек членов команды. Одним словом - все отдельно стоящие блоки на странице. // HTML разметка <div class="inline-container"> <div class="inline-item"></div> <div class="inline-item"></div> <div class="inline-item"></div> <div class="inline-item"></div> </div> // CSS стили .inline-container { text-align: center; /* выравнивание по центру */ margin-bottom: 20px; /* отступ снизу */ } .inline-item { display: inline-block; /* отобразить элементы в строку */ border: 2px solid salmon; /* рамка у блока */ background-color: pink; /* цвет блока */ width: 100px; /* ширина блока */ height: 100px; /* высота блока */ margin-left: 20px; /* промежутки между блоками */ } 3. Выравнивание на float При выравнивании блоков на флоатах, элементы один за другим извлекаются из потока и сдвигаются влево (float: left), пока не закончится место в ряду. Тем, кому не хватило места, спускаются на следующую строчку. До появления флексбоксов, флоаты были единственным адекватным способом выравнивания по горизонтали. // HTML разметка <div class="float-container"> <div class="float-item"></div> <div class="float-item"></div> <div class="float-item"></div> <div class="float-item"></div> </div> // CSS стили .float-container { margin-bottom: 20px; /* отступ снизу */ } .float-item { float: left; border: 2px solid salmon; background-color: pink; width: 100px; height: 100px; margin-left: 22px; /* отбить блоки друг от друга */ } В заключении хочу сказать, что самый актуальный способ выравнивания блоков на флексбоксах. И это неудивительно, ведь технология flexbox позволяет гибко управлять элементами на странице, без всяких костыльных методов. Выравнивание на флоатах - давно устаревший способ. Но стоит о нем знать, чтобы не растеряться, если потребуется вносить правки в старом проекте.