The difference between flex and inline flex in CSS

Time:2020-11-26

Inline flex, like inline block, is a display:flex The container is an inline block for external elements.

The difference between them is described as follows

  • Flex: displays the object as an elastic expansion box
  • Inline flex: display objects as inline block level elastic expansion boxes

In a word, when the flex box container does not have a width limit, when display is specified as flex, the flexbox’s width will fill the parent container; when display is specified as inline flex, the flexbox’s width will wrap the child items, as shown in the following figure:

The corresponding code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>

    /*Flex container*/
    .flex__container {
      display: inline-flex;
      background-color: gray;
    }

    /*Flex sub item*/
    .flex__item {
      width: 50px;
      height: 50px;

      background-color: aqua;
      border: 1px solid black;
    }

  </style>
</head>
<body>

<! -- flex container -- >
<div class="flex__container">

  <! -- sub item in flex container -- >
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
</div>

</body>
</html>

This article will introduce the differences between flex and inline flex in CSS. For more related content of CSS flex and inline flex, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!