Учебники

Flexbox — Flex контейнеры

Февраль 2, 2019

Чтобы использовать Flexbox в своем приложении, вам нужно создать / определить контейнер Flex, используя свойство display .

Использование — 

display: flex | inline-flex

Это свойство принимает два значения

  • flex — создает контейнер Flex уровня блока.

  • inline-flex — генерирует встроенный контейнер flex-контейнера.

flex — создает контейнер Flex уровня блока.

inline-flex — генерирует встроенный контейнер flex-контейнера.

Теперь мы увидим, как использовать свойство display с примерами.

сгибать

При передаче этого значения в свойство display будет создан гибкий контейнер уровня блока. Он занимает всю ширину родительского контейнера (браузера).

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

Live Demo 

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:flex;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Это даст следующий результат —

Поскольку мы присвоили значение flex свойству display , контейнер использует ширину контейнера (браузер).

Вы можете наблюдать это, добавив границу к контейнеру, как показано ниже. 

.container {
   display:inline-flex;
   border:3px solid black;
}

Это даст следующий результат —

Inline flex

При передаче этого значения свойству display будет создан гибкий контейнер встроенного уровня. Это просто занимает место, необходимое для содержания.

В следующем примере показано, как создать встроенный гибкий контейнер. Здесь мы создаем шесть коробок с разными цветами, и мы использовали контейнер inline-flex для их хранения.

Live Demo 

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Это даст следующий результат —

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

48
Share: