HTML・CSS Writing 2022

Create a sidebar-Flex layout for smartphones

Let's create a sidebar using flex layout. You can support smartphones just by switching CSS. Confirmed in IE11.

Sidebar right, fixed length, content left, variable length, PC display

Sidebar right, fixed length, content left, variable length PC display. I'm using a flex layout. The content uses calc to calculate the variable length width.

<div style = "display: flex;">
  <div style = "width: calc (100%--200px); background: pink;">
    content
  </div>
  <div style = "width: 200px; background: green;">
    Sidebar <br>
    Item 1 <br>
    Item 2
  </div>
</div>

Sidebar left, fixed length, content right, variable length, PC display

Sidebar left, fixed length, content right, variable length PC display. You can use "flex-direction: row-reverse;" to change the order of left and right. Even if you put the sidebar on the left, consider SEO measures and smartphone compatibility, and write the content first.

<div style = "display: flex; flex-direction: row-reverse;">
  <div style = "width: calc (100%--200px); background: pink;">
    content
  </div>
  <div style = "width: 200px; background: green;">
    Sidebar <br>
    Item 1 <br>
    Item 2
  </div>
</div>

Under the sidebar, on the content, smartphone display

Below the sidebar, on the content, and on the smartphone. Display multiple lines in flex layout, so add "flex-wrap: wrap;" to make the sidebar and content 100%wide ..

<div style = "display: flex; flex-wrap: wrap;">
  <div style = "width: 100%; background: pink;">
    content
  </div>
  <div style = "width: 100%; background: green;">
    Sidebar <br>
    Item 1 <br>
    Item 2
  </div>
</div>

Sidebar hidden, content only, smartphone display

The sidebar is hidden, only the content is displayed on the smartphone. Hide the sidebar with "display: none;" to make the content 100%wide.

<div style = "display: flex;">
  <div style = "width: 100%; background: pink;">
    content
  </div>
  <div style = "display: none; background: green;">
    Sidebar <br>
    Item 1 <br>
    Item 2
  </div>
</div>