Подробное обучение макету CSS Flex

Flex Layout — это мощная модель макета CSS, которая упрощает создание адаптивных и гибких макетов. В этой статье будут представлены основные понятия, свойства и примеры кодов макета Flex.

Что такое гибкая верстка?

Flex Layout — это модель макета на основе контейнеров и элементов. Контейнер — это родительский элемент, к которому применяется гибкий макет, а элемент — это дочерний элемент внутри контейнера. Установив свойства контейнера, мы можем управлять расположением, выравниванием и размещением элементов внутри контейнера.

Как использовать гибкую верстку?

Чтобы использовать гибкий макет, сначала необходимо displayустановить для свойства контейнера значение flexили inline-flex. Это сделает контейнер гибким контейнером и активирует гибкую компоновку.

.container {
    
    
  display: flex;
}

Свойства flex-контейнеров

Вот некоторые часто используемые свойства гибкого контейнера:

• flex-direction: определяет направление расположения элементов. Значение по умолчанию равно row, что указывает на горизонтальное расположение. Другими возможными значениями являются column(выравнивание по вертикали), row-reverse(выравнивание по горизонтали в обратном порядке) и column-reverse(выравнивание по вертикали в обратном порядке).

.container {
    
    
  flex-direction: row;
}

• flex-wrap: Указывает, переносится ли элемент. Значение по умолчанию равно nowrap, что означает отсутствие новой строки. Другими возможными значениями являются wrap(новая строка) и wrap-reverse(обратный перевод строки).

.container {
    
    
  flex-wrap: wrap;
}

• justify-content: задает выравнивание элемента по главной оси. По умолчанию используется flex-start, что означает выравнивание по левому краю. Другими возможными значениями являются flex-end(выравнивание по правому краю), center(выравнивание по центру), space-between(выравнивание, с одинаковым интервалом между элементами) и space-around(одинаковое расстояние с обеих сторон каждого элемента).

.container {
    
    
  justify-content: center;
}

• align-items: задает выравнивание элемента по поперечной оси. Значение по умолчанию — stretch, что означает «Растянуть заливку». Другими возможными значениями являются flex-start(выравнивание по верхнему краю), flex-end(выравнивание по нижнему краю) и center(выравнивание по центру).

.container {
    
    
  align-items: center;
}

• align-content: задает выравнивание многострочных элементов по поперечной оси. Значение по умолчанию — stretch, что означает «Растянуть заливку». Другими возможными значениями являются flex-start(выравнивание по верхнему краю), flex-end(выравнивание по нижнему краю center), (выравнивание по центру) space-between, (выравнивание с одинаковым интервалом между строками) и space-around(равный интервал с обеих сторон каждого ряда).

.container {
    
    
  align-content: center;
}

Свойства элементов Flex

Вот некоторые часто используемые свойства flex-элементов:

• flex-grow: определяет коэффициент увеличения элемента. Значение по умолчанию равно 0, что означает отсутствие увеличения. Если установлено положительное число, элемент будет увеличен.

.item {
    
    
  flex-grow: 1;
}

• flex-shrink: определяет коэффициент уменьшения элемента. Значение по умолчанию — 1, что означает, что его можно уменьшить. 0Если установлено значение , масштаб элемента не будет уменьшен.

.item {
    
    
  flex-shrink: 0;
}

• flex-basis: указывает начальный размер элемента. Значение по умолчанию — auto, что указывает на то, что размер автоматически рассчитывается на основе содержимого элемента. Можно установить конкретное значение или процент.

.item {
    
    
  flex-basis: 50%;
}

• flex: это краткая форма flex-grow, flex-shrinkи flex-basis. Значение по умолчанию равно 0 1 auto.

.item {
    
    
  flex: 1 0 50%;
}

• align-self: задает выравнивание отдельных элементов по поперечной оси, переопределяя свойства контейнера align-items.

.item {
    
    
  align-self: flex-start;
}

образец кода

Вот пример простого гибкого макета:

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

.container {
    
    
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.item {
    
    
  flex: 1 0 25%;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

В этом примере контейнер настроен на гибкий макет, а элементы расположены горизонтально и по центру. Каждый элемент имеет размер 25% от ширины контейнера, высоту 100 пикселей, серый цвет фона и расстояние между ними 10 пикселей.

в заключение

Flex Layout — это мощная модель макета CSS, которая упрощает создание адаптивных и гибких макетов. Установив свойства для контейнеров и элементов, мы можем управлять их расположением, выравниванием и расстоянием между ними. Надеюсь, эта статья поможет вам понять и использовать макет Flex!