flex布局

1.flex布局介绍

Flex布局是一种用于创建弹性布局的CSS模型。Flexbox(Flexible Box)布局使得在容器中的子元素可以以弹性的方式进行排列、对齐和分布空间，适应不同的屏幕尺寸和设备。(简易来说flex用来为盒状模型提供最大的灵活性，可以随着页面大小改变自适应页面布局。)

---

2.容器属性

2.1 display

display属性用于定义一个容器的类型，使用 display属性可以将一个元素变成弹性盒子，从而使用flex 布局。（任何一个容器都可以指定为flex布局）

代码如下：

display:flex;

2.2 flex常见的属性

2.2.1 flex-direction（设置主轴方向）

1).column:设置主轴从上到下的垂直方向

代码如下：

flex-direction: column;

2).row:设置主轴从左到右的水平方向（默认值）

 代码如下：

flex-direction:row;

3).column-reverse:设置主轴从下到上的水平方向

代码如下：

flex-direction:column-reverse;

4).row-reverse:设置主轴从右到左的水平方向

代码如下：

 flex-direction:row-reverse;

2.2.2 jstify-content（设置主轴方向上的对齐方式）

1).flex-start:项目从主轴起点开始对齐，不留间隙（默认值）

代码如下：

justify-content:flex-start; 

2). flex-end:项目从主轴重点对齐，不留间隙

代码如下：

justify-content:flex-end;

3).center:项目从主轴上居中对齐，不留间隙

代码如下：

justify-content:center;

4).space-around:设置每个项目之间距离相等

代码如下：

justify-content:space-around;

5). space-between:设置两端对齐

代码如下：

justify-content:space-between;

2.2.3 align-items（设置项目在交叉轴上的对齐方式）

1). center:交叉轴居中对齐

代码如下：

align-items: center;

2). flex-start:项目定点与交叉轴对齐

代码如下：

align-items:flex-start;

3).flex-end:项目底部与交叉轴终点对齐

代码如下：

align-items:align-items;

4).bsae-line:项目的第一行文字基线对齐

代码如下：

align-items:sae-line;

2.2.4 flex-wrap（设置项目是否换行）

1).nowarp:不换行

代码如下： 

 flex-wrap:nowarp;

2).wrap:换行

代码如下：

 flex-wrap: wrap;

3).warp-reverse:反方向换行

代码如下：

 flex-wrap:warp-reverse;

2.2.5 nth-child（结构伪类选择器）

代码如下：

.box:nth-child{}

3.实例展示

<div class="demoTwo">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
        </div>
 
.demoTwo{
    width: 606px;
    height: 606px;
    border: 2px solid blue;
    display: flex;、
    flex-wrap: wrap;
}
 
.box{
    width: 200px;
    height: 200px;
    border: 1px solid red;
 
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.box:nth-child(5){
    background-color: blue;
}

效果如下：