CSS Flexbox (Гибкая коробка)

Оглавление

    Показать оглавление

1

2

3

4

5

6

7

8

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

</body>
</html>

Модуль макета CSS Flexbox

До модуля Flexbox Layout существовало четыре режима макета:

Block

Блочный, для разделов веб-страницы.

Inline

Встроенный, для текста

Table

Таблица для двумерных табличных данных.

Positioned

Позиционировано, для явного положения элемента.

Модуль Flexible Box Layout упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования.

Поддержка браузера

Свойства flexbox поддерживаются во всех современных браузерах.

29.0 11.0 22.0 10 48

Флексбокс-элементы

Чтобы начать использовать модель Flexbox, вам необходимо сначала определить гибкий контейнер.

1

2

3

Элемент выше представляет гибкий контейнер (синяя область) с тремя гибкими элементами.

Пример

Гибкий контейнер с тремя гибкими элементами:

<div 
  class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Create a Flex Container</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

В следующих главах вы узнаете больше о гибких контейнерах и гибких элементах.