Previous Article:

Flex Layout Writing Tutorial – Introduces the syntax of Flex layout, and today introduces common layout writing in Flex.

As you can see, No matter what the layout is, Flex can often do it with a few lines of command.

I’ll just list the code, but see Flex Layout Tutorial: Syntax for a detailed explanation of the syntax. My main references are Landon Schropp’s article and Solved by Flexbox.

First, the layout of dice

On one side of the die, up to 9 dots can be placed.

Let’s take a look at how Flex implements a 1-point to 9-point layout. You can check out the Demo at Codepen.

Unless otherwise specified, the HTML template for this section is as follows.

<div class="box">
  <span class="item"></span>
</div>
Copy the code

In the code above, the div element (representing a face of the die) is the Flex container, and the SPAN element (representing a point) is the Flex item. If you have multiple projects, add multiple SPAN elements, and so on.

1.1 single project

First of all, I only have one point in the upper left corner. Flex layout defaults to left-aligned first line, so one line of code is sufficient.

.box {
  display: flex;
}
Copy the code

By setting the alignment of items, you can achieve center and right alignment.

.box {
  display: flex;
  justify-content: center;
}
Copy the code

.box {
  display: flex;
  justify-content: flex-end;
}
Copy the code

Set the cross axis alignment to move the spindle vertically.

.box {
  display: flex;
  align-items: center;
}
Copy the code

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}
Copy the code

.box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
Copy the code

.box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
Copy the code

1.2 double project

.box {
  display: flex;
  justify-content: space-between;
}
Copy the code

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
Copy the code

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
Copy the code

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
Copy the code

.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}
Copy the code

.box {
  display: flex;
  justify-content: space-between;
}

.item:nth-child(2) {
  align-self: flex-end;
}
Copy the code

1.3 three projects

.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

.item:nth-child(3) {
  align-self: flex-end;
}
Copy the code

1.4 the four projects

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;
}
Copy the code

The HTML code is as follows:

<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>
Copy the code

The CSS code is as follows:

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}
Copy the code

1.5 six projects

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
Copy the code

.box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
}
Copy the code

The HTML code is as follows:

<div class="box">
  <div class="row">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="row">
    <span class="item"></span>
  </div>
  <div class="row">
     <span class="item"></span>
     <span class="item"></span>
  </div>
</div>
Copy the code

The CSS code is as follows:

.box {
  display: flex;
  flex-wrap: wrap;
}

.row{
  flex-basis: 100%;
  display:flex;
}

.row:nth-child(2){
  justify-content: center;
}

.row:nth-child(3){
  justify-content: space-between;
}
Copy the code

1.6 the nine project

.box {
  display: flex;
  flex-wrap: wrap;
}
Copy the code

Second, grid layout

2.1 Basic grid layout

The simplest grid layout is evenly distributed. Divide the space evenly within the container, much like the dice layout above, but set the project to automatically scale.

The HTML code is as follows:

<div class="Grid">
  <div class="Grid-cell">... </div> <div class="Grid-cell">... </div> <div class="Grid-cell">... </div> </div>Copy the code

The CSS code is as follows:

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}
Copy the code

2.2 Percentage Layout

The width of one grid is a fixed percentage, and the remaining space is allocated equally to the remaining grids.

The HTML code is as follows:

<div class="Grid">
  <div class="Grid-cell u-1of4">... </div> <div class="Grid-cell">... </div> <div class="Grid-cell u-1of3">... </div> </div>Copy the code

The CSS code is as follows:

.Grid { display: flex; } .Grid-cell { flex: 1; } .Grid-cell.u-full { flex: 0 0 100%; } .Grid-cell.u-1of2 { flex: 0 0 50%; }.grid-cell. U-1of3 {flex: 0 0 33.3333; } .Grid-cell.u-1of4 { flex: 0 0 25%; }Copy the code

The Layout of the Grail

Holy Grail Layout is the most common type of website Layout. From top to bottom, the page is divided into three sections: header, body, and footer. The torso is horizontally divided into three columns, from left to right: navigation, main column, secondary column.

The HTML code is as follows:

<body class="HolyGrail"> <header>... </header> <div class="HolyGrail-body">
    <main class="HolyGrail-content">... </main> <nav class="HolyGrail-nav">... </nav> <aside class="HolyGrail-ads">... </aside> </div> <footer>... </footer> </body>Copy the code

The CSS code is as follows:

.HolyGrail { display: flex; min-height: 100vh; flex-direction: column; } header, footer { flex: 1; } .HolyGrail-body { display: flex; flex: 1; } .HolyGrail-content { flex: 1; }. Holygrail-nav,. Holygrail-ads {/* Set the width of the two sidebars to 12em */ flex: 0 0 12em; }. Holygrail-nav {/* Navigation to the left */ order: -1; }Copy the code

If the screen is small, the three columns of the torso automatically become vertical overlay.

@media (max-width: 768px) { .HolyGrail-body { flex-direction: column; flex: 1; } .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content { flex: auto; }}Copy the code

Four, the layout of the input box

We often need to add a prompt in front of the input field and a button in the back.

The HTML code is as follows:

<div class="InputAddOn">
  <span class="InputAddOn-item">... </span> <input class="InputAddOn-field">
  <button class="InputAddOn-item">... </button> </div>Copy the code

The CSS code is as follows:

.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
}
Copy the code

Five, hanging layout

Sometimes, to the left or right of the main column, you need to add a picture bar.

The HTML code is as follows:

<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">... </p> </div>Copy the code

The CSS code is as follows:

.Media {
  display: flex;
  align-items: flex-start;
}

.Media-figure {
  margin-right: 1em;
}

.Media-body {
  flex: 1;
}
Copy the code

Six, fixed bottom column

Sometimes, with too little content to fill a screen, the bottom column is pushed up to the center of the page. You can use the Flex layout so that the bottom column always appears at the bottom of the page.

The HTML code is as follows:

<body class="Site"> <header>... </header> <main class="Site-content">... </main> <footer>... </footer> </body>Copy the code

The CSS code is as follows:

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
Copy the code

Seventh, flow layout

The number of items per row is fixed, and the line will automatically branch.

CSS:

.parent {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}
Copy the code

(after)

Xiaobian recommendation: programmer navigation

As a coder, I have collected many excellent websites at home and abroad, including online tools, online operation, free interface, online resources, online learning, technical forum, technical blog and so on, to meet the daily needs of ordinary programmers.

Nav.imaring.com Address 1: www.code-elf.cn

Author: Ruan Yifeng original link