10 современных CSS-макетов с одной строкой

Современная разметка CSS позволяет разработчикам писать содержательные и мощные правила стиля всего несколькими нажатиями клавиш. В приведенном выше обсуждении и в следующем посте рассматриваются 10 мощных CSS-макетов, которые выполняют невероятную работу.

01. Суперцентр: место-предметы: центр

Для нашего первого «однострочного» макета давайте разгадаем самую большую загадку CSS: центрирование. Я хочу, чтобы вы знали, что использование Place-Items: Center делает это проще, чем вы думаете.

Сначала укажите сетку в качестве метода отображения, затем напишите Place-items: center на том же элементе. Place-items — это быстрый способ одновременно установить выравнивание и выравнивание элементов. Если установить его в центр, как align-items, так и justify-items будут установлены в центр.

.parent {
  display: grid;
  place-items: center;
}

Это позволяет контенту быть идеально центрированным внутри родительского элемента, независимо от внутреннего размера.

02. Деконструкция макета блина: flex: <grow> <shrink> <baseWidth>

Далее мы разбираем блины! Это обычный макет для маркетинговых веб-сайтов, например, может быть ряд из трех элементов, обычно с изображением, заголовком, а затем текстом, описывающим некоторые особенности продукта. На мобильных устройствах мы хотим, чтобы они хорошо складывались и масштабировались по мере увеличения размера экрана.

Используя Flexbox для достижения этого эффекта, вам не нужно использовать медиа-запросы для настройки положения этих элементов при изменении размера экрана.

Аббревиатура flex означает: flex: <flex-grow> <flex-shrink> <flex-basis> .

По этой причине, если вы хотите, чтобы ваши блоки заполнялись до размера <flex-basis>, сжимались до меньшего размера, но не растягивались для заполнения дополнительного пространства, напишите: flex: 0 1 <flex-basis> . В данном случае ваш <flex-basis> равен 150 пикселей, поэтому он должен выглядеть так:

.parent {
  display: flex;
}…