Flex Layout Example Demo

Today introduces flex notation for common layouts.

You will see that, no matter what the layout, flex can often be done with a few lines of command.

Dice Layout

On one side of the dice, you can place up to 9 points.

Here's a look at how flex is implemented, from 1 points to 9 points of layout. You can check the demo at Codepen.

If not stated, the HTML templates in this section are as follows.

<div class= "box" >
  <span class= "item" ></span>
</div>

In the above code, the DIV element (representing a face of the dice) is a flex container, and the span element (representing a point) is a flex project. If you have more than one project, add multiple span elements, and so on. 1.1 Single Item

First, there are only 1 points in the upper left corner of the case. The flex layout defaults to the left alignment of the first line, so one line of code is enough.

. box {
  Display:flex;
}

You can align the alignment of the item to align the center and right.

. box {
  Display:flex;
  Justify-content:center;
}

. box {
  Display:flex;
  Justify-content:flex-end;
}

Set the intersection axis alignment to move the spindle vertically.

. box {
  Display:flex;
  Align-items:center;
}

. box {
  Display:flex;
  Justify-content:center;
  Align-items:center;
}

. box {
  Display:flex;
  Justify-content:center;
  Align-items:flex-end;
}

. box {
  Display:flex;
  Justify-content:flex-end;
  Align-items:flex-end;
}

1.2 Pairs of items

. box {
  Display:flex;
  Justify-content:space-between;
}

. box {
  Display:flex;
  Flex-direction:column;
  Justify-content:space-between;
}

. box {
  Display:flex;
  Flex-direction:column;
  Justify-content:space-between;
  Align-items:center;
}

. box {
  Display:flex;
  Flex-direction:column;
  Justify-content:space-between;
  Align-items:flex-end;
}

. box {
  display:flex;
}

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

. box {
  Display:flex;
  Justify-content:space-between;
}

. Item:nth-child (2) {
  align-self:flex-end;
}

1.3 Three items

. box {
  display:flex;
}

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

. Item:nth-child (3) {
  align-self:flex-end;
}

1.4 Four Items

. box {
  Display:flex;
  Flex-wrap:wrap;
  Justify-content:flex-end;
  Align-content:space-between;
}

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>

The CSS code is as follows.

. box {
Display:flex;
Justify-content:space-between;
}
. box. column {
display:flex;
Flex-direction:column;
Justify-content:space-between;
}

1.5 Six items

. box {
  Display:flex;
  Flex-wrap:wrap;
  Align-content:space-between;
}

. box {
  Display:flex;
  Flex-direction:column;
  Flex-wrap:wrap;
  Align-content:space-between;
}

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>

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;
}

1.6 Nine Items

. box {
  Display:flex;
  Flex-wrap:wrap;
}

second, grid layout 2.1 Basic Grid Layout

The simplest grid layout is the average distribution. The average space is allocated inside the container, much like the dice layout above, but you need to set the project's Autoscale.

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>

The CSS code is as follows.

. Grid {
  display:flex;
}

. Grid-cell {
  flex:1;
}

2.2 percent Layout

The width of a grid is a fixed percentage, and the rest of the grid distributes the remaining space evenly.

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>

. 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%;
}

Third, the Holy Grail layout

The Grail arrangement (Holy Grail layout) refers to one of the most common site layouts. Page from top to bottom, divided into three parts: Head (header), torso (body), tail (footer). The torso is divided horizontally into three columns, from left to right: navigation, main bar, sub-bar.

The HTML code is as follows.

<body class= "Holygrail" >
  
 
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,.
  the width of the holygrail-ads {/* Two sidebar is set to 12em */
  flex:0 0 12em;
}

. Holygrail-nav {/
  * navigation to the leftmost */
  order:-1;
}
 
If it is a small screen, the three columns of the torso automatically become vertical overlays.

@media (max-width:768px) {
  . holygrail-body {
    flex-direction:column;
    flex:1;
  }
  . Holygrail-nav,
  . Holygrail-ads,
  . holygrail-content {
    flex:auto;
  }
}
 
iv. layout of the input box 
We often need to add a hint to the front of the input box before adding a button.