HTML・CSS Writing 2022

Master multi-line flex layout

Master multi-line flex layouts. Mastering a multi-line flex layout allows, for example, to arrange product images and product titles in multiple lines.

It is assumed that you have read the Introduction to Flex Layout article.

Multi-line flex layout

The flex layout can be multi-line. To make the flex layout multiple lines, first specify "flex-wrap: wrap" for the element that specified "display: flex".

<div style = "background: #fee; display: flex; flex-wrap: wrap">
  <div style = "background: red;">
    Yakiniku <br>
    No. 1
  </div>
  <div style = "background: green;">
    Yakitori
  </div>
  <div style = "background: blue;">
    salad
  </div>
  <div style = "background: yellow;">
    ramen
  </div>
</div>

Even if you specify "flex-wrap: wrap" in CSS, this alone will not result in multiple lines. After this, you need to specify the width.

Arrange with equal width

Let's specify "width: 50%" as a child element and arrange them evenly.

<div style = "background: #fee; display: flex; flex-wrap: wrap">
  <div style = "background: red; width: 50%;">
    Yakiniku <br>
    No. 1
  </div>
  <div style = "background: green; width: 50%;">
    Yakitori
  </div>
  <div style = "background: blue; width: 50%;">
    salad
  </div>
  <div style = "background: yellow; width: 50%;">
    ramen
  </div>
</div>

Oh, you lined up in two lines. You can put a product image and a product title in this child element.

Example of header layout for smartphones

Let's write a sample header layout for smartphones.

Using the flex layout, you can switch the header between your PC and smartphone simply by switching the CSS.

Header PC display

Header PC display in flex layout. The fixed width of the site title and the uniform width of the menu list.

<div style = "background: #fee; display: flex; flex-wrap: wrap;">
  <div style = "background: red; width: 180px;">
    Perl club
  </div>
  <div style = "background: green; display: none;">
    Mebo
  </div>
  <ul style = "width: calc (100%--180px); display: flex;">
    <li style = "background: blue; width: 33.3%;">
      About us
    </li>
    <li style = "background: yellow; width: 33.3%;">
      access
    </li>
    <li style = "background: pink; width: 33.4%;">
      inquiry
    </li>
  </ul>
</div>

Header smartphone display

Header smartphone display in flex layout. The site title is variable, the menu button (mebo) has a fixed width, and the menu is from the second row onward. It is a layout that can be switched and displayed with the menu button.

<div style = "background: #fee; display: flex; flex-wrap: wrap">
  <div style = "background: red; width: calc (100%-40px);">
    Perl club
  </div>
  <div style = "background: green; width: 40px; height: 40px;">
    Mebo
  </div>
  <ul style = "width: 100%; display: flex; flex-wrap: wrap;">
    <li style = "background: blue; width: 100%;">
      About us
    </li>
    <li style = "background: yellow; width: 100%;">
      access
    </li>
    <li style = "background: pink; width: 100%;">
      inquiry
    </li>
  </ul>
</div>