Понять свойство flex-basis в CSS Flexbox

Введение

В этом практическом занятии участники изучат свойство flex-basis в CSS Flexbox с использованием комплексного практического подхода. Создав структурированный HTML-файл и последовательно добавляя стили CSS, участники получат практический опыт в понимании того, как flex-basis влияет на начальную размерность элементов-flex внутри контейнера.

В практическом занятии студенты знакомятся с созданием макета Flexbox, определением свойств контейнера, применением flex-basis к отдельным элементам и экспериментированием с разными значениями. Участники узнают, как flex-basis взаимодействует с другими свойствами Flexbox, что позволяет им контролировать основную размерность и распределение элементов в адаптивных веб-дизайнах.

Создать HTML-файл для макета Flexbox

В этом шаге вы создадите базовый HTML-файл для изучения свойства flex-basis в CSS Flexbox. Мы настроим простую HTML-структуру, которая будет служить основой для наших экспериментов с макетом Flexbox.

Откройте WebIDE и перейдите в каталог ~/project. Создайте новый файл с именем flexbox-demo.html с использованием интерфейса WebIDE.

Вот базовая HTML-структура, которую вы будете использовать:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flexbox flex-basis Demo</title>
    <style>
      /* CSS стили будут добавлены в последующих шагах */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="flex-item item1">Item 1</div>
      <div class="flex-item item2">Item 2</div>
      <div class="flex-item item3">Item 3</div>
      <div class="flex-item item4">Item 4</div>
      <div class="flex-item item5">Item 5</div>
    </div>
  </body>
</html>

Разберём HTML-структуру:

Мы создали контейнер <div> с классом container
Внутри контейнера у нас есть пять элементов <div> с классами flex-item и индивидуальными классами элементов
Эта структура позволит нам продемонстрировать свойства flex-basis в следующих шагах

Пример вывода при сохранении файла в WebIDE:

File created: ~/project/flexbox-demo.html

Определить базовый контейнер Flexbox в CSS

В этом шаге вы узнаете, как создать базовый контейнер Flexbox в CSS, добавив стили в HTML-файл, созданный на предыдущем шаге. Откройте файл flexbox-demo.html в WebIDE и измените раздел <style>, чтобы определить контейнер Flexbox.

Добавьте следующий CSS, чтобы определить базовый контейнер Flexbox:

<style>
  .container {
    display: flex;
    background-color: #f0f0f0;
    border: 2px solid #333;
    padding: 20px;
  }

  .flex-item {
    background-color: #4caf50;
    color: white;
    margin: 10px;
    padding: 20px;
    text-align: center;
  }
</style>

Разберём ключевые свойства CSS:

display: flex; превращает контейнер в контейнер Flexbox
background-color и border помогают визуализировать контейнер
Стили .flex-item определяют внешний вид отдельных элементов-flex
margin и padding обеспечивают расстояние между элементами

Пример вывода при сохранении файла:

Flexbox container styles added to flexbox-demo.html

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

Применить свойство flex-basis к элементам-flex

В этом шаге вы узнаете о свойстве flex-basis и о том, как оно контролирует начальную размерность элементов-flex. Откройте файл flexbox-demo.html в WebIDE и обновите стили CSS, чтобы продемонстрировать flex-basis.

Добавьте следующий CSS, чтобы применить flex-basis к отдельным элементам-flex:

<style>
  .container {
    display: flex;
    background-color: #f0f0f0;
    border: 2px solid #333;
    padding: 20px;
  }

  .flex-item {
    background-color: #4caf50;
    color: white;
    margin: 10px;
    padding: 20px;
    text-align: center;
  }

  .item1 {
    flex-basis: 100px;
  }
  .item2 {
    flex-basis: 200px;
  }
  .item3 {
    flex-basis: 150px;
  }
  .item4 {
    flex-basis: 250px;
  }
  .item5 {
    flex-basis: 120px;
  }
</style>

Основные моменты о flex-basis:

Определяет начальную основную размерность элемента-flex
Может быть указано в пикселях, процентах или других единицах
Определяет размер по умолчанию до расширения или сужения элемента-flex
Заменяет width в контейнере Flexbox

Пример вывода при сохранении файла:

Flex items with different flex-basis values added

При открытии HTML-файла в браузере вы увидите элементы-flex с различными начальными ширинами в зависимости от их значений flex-basis.

Проводить эксперименты с разными значениями flex-basis

В этом шаге вы изучите различные способы указания значений flex-basis и поймете, как разные единицы и подходы влияют на размерность элементов-flex. Обновите CSS в файле flexbox-demo.html следующими стилями:

<style>
  .container {
    display: flex;
    background-color: #f0f0f0;
    border: 2px solid #333;
    padding: 20px;
  }

  .flex-item {
    background-color: #4caf50;
    color: white;
    margin: 10px;
    padding: 20px;
    text-align: center;
  }

  /* Различные типы значений flex-basis */
  .item1 {
    flex-basis: 100px;
  } /* Фиксированная ширина в пикселях */
  .item2 {
    flex-basis: 20%;
  } /* Процент от контейнера */
  .item3 {
    flex-basis: auto;
  } /* Основывается на содержимом */
  .item4 {
    flex-basis: 10rem;
  } /* Использует единицы rem */
  .item5 {
    flex-basis: content;
  } /* Основывается на размере содержимого */
</style>

Основные наблюдения по значениям flex-basis:

Пиксельные значения (100px) задают фиксированную ширину
Процентные значения (20%) масштабируются относительно контейнера
auto использует размер содержимого элемента
Различные единицы, такие как rem, обеспечивают адаптивную размерность
Ключевое слово content адаптируется под размер содержимого элемента

Пример вывода при сохранении файла:

Flex items with diverse flex-basis configurations

При открытии HTML-файла в браузере вы увидите, как разные значения flex-basis влияют на размерность элементов и макет.

Изучить взаимодействие flex-basis с другими свойствами Flex

В этом шаге вы узнаете, как flex-basis взаимодействует с другими свойствами Flex, такими как flex-grow и flex-shrink. Обновите CSS в файле flexbox-demo.html следующим полным примером:

<style>
  .container {
    display: flex;
    background-color: #f0f0f0;
    border: 2px solid #333;
    padding: 20px;
    width: 100%;
  }

  .flex-item {
    background-color: #4caf50;
    color: white;
    margin: 10px;
    padding: 20px;
    text-align: center;
  }

  /* Демонстрация взаимодействия свойств Flex */
  .item1 {
    flex-basis: 100px;
    flex-grow: 1;
    flex-shrink: 0;
  }
  .item2 {
    flex-basis: 200px;
    flex-grow: 2;
    flex-shrink: 1;
  }
  .item3 {
    flex-basis: 150px;
    flex-grow: 1;
    flex-shrink: 2;
  }
  .item4 {
    flex: 1 1 250px; /* сокращение для grow, shrink, basis */
  }
  .item5 {
    flex: 2 0 120px;
  }
</style>

Основные концепции взаимодействия свойств Flex:

flex-grow: Определяет, насколько элемент будет растать по сравнению с другими элементами
flex-shrink: Управляет тем, насколько элемент будет сужаться по сравнению с другими элементами
Сокращение flex комбинирует grow, shrink и basis
Различные комбинации создают уникальные поведения макета

Пример вывода при сохранении файла:

Flex items with complex grow, shrink, and basis interactions

При открытии HTML-файла в браузере вы увидите, как эти свойства работают вместе для создания гибких макетов.

Резюме

В этом практическом занятии участники исследуют свойство flex-basis в CSS Flexbox, создавая полноценное демонстрацию на HTML и CSS. Практическое занятие начинается с построения основного HTML-файла, в котором есть контейнер с несколькими элементами-flex, что создает структурную основу для экспериментов с макетом Flexbox. Участники учатся определять базовый контейнер Flexbox с использованием CSS, настраивая свойства отображения, цвета фона и начальный стиль, чтобы создать адаптивный и визуально привлекательный макет.

Практическое занятие помогает ученикам применить свойство flex-basis к элементам-flex, чтобы они поняли, как это свойство контролирует начальную размерность элементов-flex до распределения дополнительного пространства. 通过实验不同的 flex-basis 值并探索其与其他 flex 属性的相互作用，参与者获得了管理灵活布局和控制 flexbox 容器内元素大小的实用见解。

通过实验不同的 flex-basis 值并探索其与其他 flex 属性的相互作用，参与者获得了管理灵活布局和控制 flexbox 容器内元素大小的实用见解。

（最后一句英文原文表述有误，正确翻译应该是：通过试验不同的 flex-basis 值并探究其与其他 flex 属性的交互作用，参与者获得了关于管理灵活布局以及控制 flexbox 容器内元素大小的实用见解。）