Preliminary study elastic layout

First, get familiar with the layout before today just learning elastic micro letter applets, small micro-channel learning program

If an element is set to display: flex, all of its child elements to become a member of the vessel, called the project, and, float the child element, clear and vertical-align attribute will fail. The following describes the layout of six kinds of elastic property is provided on the container.

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-content

• align-items

1. Flex-direction decision spindle (container exist by default two axes: horizontal axis and vertical axis intersect, the default item arrangement along the main axis) in the direction

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    body, html {
        height: 100%;
        background-color: pink;
    }
    .flex-row {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
    }
    .flex-item {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 20px;
    }
    .bc_green {
        background-color: #09ba07;
    }
    .bc_red {
        background-color: #f76160;
    }
    .bc_blue {
        background-color: #0faeff;
    }
</style>
<div class="section">
    <div class="flex-wrap flex-row">
        <div class="flex-item bc_green"></div>
        <div class="flex-item bc_red"></div>
        <div class="flex-item bc_blue"></div>
    </div>
</div>

The effect is as follows: in the flex-direction is set to the code row, i.e., in the horizontal direction of the spindle, is the default for the flex-direction, flex-direction may be provided four values, corresponding to the other three values results is as follows:

  flex-direction:row-reverse;

  flex-direction:column;

  flex-direction:column-reverse;

2. flex-wrap defines how it is decided wrap, hold out code, the code is directly above .flex-flow {} is added when the flex-wrap attribute row axis less than one, which has three values

 flex-wrap:nowrap; 不换行，也是默认值
 
 flex-wrap:wrap;换行，第一行在上面，排不下的继续往下面排
 
 flex-wrap:wrap-reverse; 换行，和wrap相反，第一行在下面，排不下的往上方排

Is not it simple

3. Flex-Flow is a short form flex-direction flex-wrap, the default is the flex-flow: row nowrap, combined value of 12 cases;

4. align = left-items defined in the program how to align the cross shaft, to put a piece of code or

<style>
    body, html {
        height: 100%;
        background-color: pink;
    }
    .flex-row {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
    .flex-item {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 20px;
    }
    .flex-item:nth-child(2n){
        height: 200px;
    }
    .bc_green {
        background-color: #09ba07;
    }
    .bc_red {
        background-color: #f76160;
    }
    .bc_blue {
        background-color: #0faeff;
    }
</style>
<div class="section">
    <div class="flex-wrap flex-row">
        <div class="flex-item bc_green"></div>
        <div class="flex-item bc_red"></div>
        <div class="flex-item bc_blue"></div>
        <div class="flex-item bc_green"></div>
        <div class="flex-item bc_red"></div>
        <div class="flex-item bc_blue"></div>
        <div class="flex-item bc_green"></div>
        <div class="flex-item bc_red"></div>
        <div class="flex-item bc_blue"></div>
    </div>
</div>

这段代码就是在第一段代码的基础上添加了6个项目，选中所有的与flex-item类同一辈并且是2的倍数的元素，将高设置为200px,并添加了align-items属性，align-items:flex-start;交叉轴的起点对齐效果图如下：

align-items: stretch;如果项目没有设置高度，将会占满整个容器的高度，也是该属性的默认值

align-items：flex-end;与交叉轴的终点对齐

align-items: center;与交叉轴的中点对齐

align-items: baseline;与项目中第一行文字的基线也就是底部对齐

5.align-content定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不会起任何作用，这个属性有6个取值，分别是：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一
倍。
stretch（默认值）：轴线占满整个交叉轴。

这里就不放图了，看了上面的几个这里应该很容易理解，别问我为什么，因为懒

6. The The justify Content- defined item aligned on the spindle 5 has the property values, namely:
Flex-Start: Left, is the default
flex-end: the right alignment
center: center
space-between: both sides aligned, equally spaced between the items.
space-around: equal intervals on both sides of each item.
Hold renderings, or because I was lazy

Here only the property using the container flex layout, there may be more follow-up, there may be no (smiling face), ha ha ha, if insufficient, please feel free to point out, thank you .