Links to the original text: https://www.mk2048.com/blog/blog.php?id=b12jh2jjb&title=%E3%80%90CSS3%E3%80%91+CSS3%3A%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%EF%BC%88Flex+Box%EF%BC%89
  1. What is Flex layout?
  2. How to specify a container as Flex layout
  3. Basic grammar of Flex
    1. display
    2. flex-direction
    3. justify-content
    4. align-items
    5. flew-wrap
    6. align-self
    7. flex-flow
    8. flex
    9. order
  4. Example
    1. The layout of dice
    2. Grail Layout
  5. Reference articles

First, what is Flex layout?

Traditional solutions for layout, based on Box model Rely on display Attribute position Attribute float Attribute. It is very inconvenient for those special layout, for example, Vertical centering It's not easy to achieve. Flex layout is a layout scheme proposed by W3C in 2009, which can easily, completely and responsively realize various page layout. At present, it has been supported by all browsers. Flex layout will be the first choice for future layout.

 

Second, how to specify a container as Flex layout

All you need to do is add a display attribute with a value of flex to the container.

.box{
  display: flex;
}

 

Third, the basic grammar of Flex

display

Grammar: display:flex;

Specify Flex.

 flex-direction

Grammar: flex-direction: row | row-reverse | column | column-reverse

Specifies the order in which elastic child elements are arranged in the parent container. This can also be achieved by setting direction:rtl; or direction:ltr; where RTL and LTR are abbreviations of right to left and left to right.

justify content

Syntax: justify-content: flex-start | flex-end | center | space-between | space-around

The justify-content attribute is applied to the elastic container to align the elastic items along the main axis of the elastic container.

Concept understanding map:

Among them, space-around, the author summarizes a simple formula:

x=(W2-N*W1)/(2N)

x: The width left on both sides.

W2: The width of the module.

W1: The width of a sub-module (each uniform).

N:

align-items

Syntax: align-items: flex-start | flex-end | center | baseline | stretch

Set the alignment mode of the elastic box elements in the direction of the side axis (longitudinal axis).

The following picture can help readers understand baseline:

flex-wrap

Grammar: flex-flow: nowrap | warp | warp-reverse

align-content

Syntax: align-content: flex-start | flex-end | center | space-between | space-around | stretch

Set the alignment of the rows.

align-self

Grammar: align-self: auto | flex-start | flex-end | center | baseline | stretch

Set the alignment of the elastic element itself in the lateral axis direction. This property should be distinguished from align-content, where the range of align-content is each line, whereas align-self is only an elastic element in a line.

flex-flow

Grammar: Abbreviations for flex-direction and flex-wrap.

flex

Grammar: flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Specify element allocation space. It's important to note that if flex-base is 100%, the elastic module will take up a single line.

oder

Grammar: order: number|initial|inherit;

Specify the order of elastic modules, where the smaller the value, the more priority, can be negative.

 

Four, example

1. The layout of dice

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

Next, let's see how Flex works, from one point to nine points. You can go to codepen Check Demo.

Without explanation, the HTML templates in this section are as follows.

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

In the code above, the div element (representing a face of the dice) is the Flex container, and the span element (representing a point) is the Flex project. If you have more than one project, add more than one span element, and so on.

1.1 Single Project

First, there is only one point in the upper left corner. Flex layout is left-aligned by default, so one line of code is enough.


.box { display: flex; } 

Setting the alignment of items can achieve alignment in the center and right.


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


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

Setting the alignment mode of cross axes, the spindle can be moved 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 Double Project


.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 Projects


.box { display: flex; } .item:nth-child(2) { align-self: center; } .item:nth-child(3) { align-self: flex-end; } 

1.4 Four Projects


.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; flex-wrap: wrap; align-content: space-between; } .column { flex-basis: 100%; display: flex; justify-content: space-between; } 

1.56 Projects


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

Item 1.69


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

2. Grail Layout

Holy Grail layout (Holy Grail Layout) refers to one of the most common site layouts. From top to bottom, the page is divided into three parts: header, body and footer. The trunk is divided into three columns horizontally, from left to right: navigation, main column and auxiliary column.

The HTML code is as follows:

<div class="flex-container">
  <header class="header">head</header>
  <article class="main">
    <p>subject</p>
  </article>
  <aside class="aside aside1">Sidebar 1</aside>
  <aside class="aside aside2">Sidebar 2</aside>
  <footer class="footer">bottom</footer>
</div>

 

The CSS code goes below:

.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}

.flex-container > * {
    padding: 10px;
    flex: 1 100%;
}

.main {
    text-align: left;
    background: cornflowerblue;
}

.header {background: coral;}
.footer {background: lightgreen;}
.aside1 {background: moccasin;}
.aside2 {background: violet;}

@media all and (min-width: 600px) {
    .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
    .main    { flex: 3 0px; }
    .aside1 { order: 1; } 
    .main    { order: 2; }
    .aside2 { order: 3; }
    .footer  { order: 4; }
}

5. Reference Articles

https://davidwalsh.name/flexbox-dice

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

http://www.runoob.com/css3/css3-flexbox.html

This article is the original work of the blogger. If you need to reprint it, please indicate the source.