# flex 弹性布局

弹性布局有两个轴x和y，x为主轴，y为交叉轴，通过flex可以实现改变元素所在位置

 属性

• display: flex; 在父元素样式中加入此样式

• 设置元素在主轴上的对齐方式

justify-content: center;

值有：center（主轴中点对齐）、flex-start（主轴起点对齐）、flex-end(主轴终点对齐)、space-around（把剩余的空间均分给项目的左右）、space-between（两端对齐：把剩余的空间均分给项目与项目之间）。

• 交叉轴对齐方式 align-items: center;

align-items：设置项目在交叉轴上的对齐方式，值有：center（交叉轴中点对齐）、flex-start(交叉轴起点对齐)、flex-end（交叉轴终点对齐）、stretch（项目高度充满容器 ，默认的）、baseline（文字基线对齐）

• 设置主轴的方向 flex-direction: column-reverse;

/row代表主轴从左向右/
/row-reverse代表主轴从右到左/
/column代表主轴从上到下/
/column-reverse代表主轴从下到上/

• 如果元素过多默认不会换行，需要手动换行 flex-wrap:wrap;

值有：wrap：换行后，高度均分容器高度。默认。
wrap-reverse：换行后，上下顺序颠倒。

• 当有多条主轴的情况下，使用align-content设置项目在交叉轴上的对齐方式（只有在有多条主轴的时候才会起作用）。

align-content:center;

值有：flex-start、flex-end、center、space-between、space-around、stretch。

**注意---**当把父元素设置为弹性容器后子元素自动成为inline-flex。默认宽度由内容撑开，高度和容器一致，并可以设置宽高。

• flex-grow将容器的空间按子元素的个数进行平分

例：

.box{
    border: 1px solid blue;
    height: 300px;
    display: flex;
}
.box section{
    border: 1px dashed red;

    flex-grow: 1;将容器box评分为三分，1表示每个占一份。
}

结构

    

        
section1
        
section2
        
section3
    

• flex-basis：通过这只flex-basis可以设置元素在主轴上占据的空间，通常设置百分比，进行列的划分。

例：

        .box section{
            border: 1px dashed red;
            flex-basis: 30%;
        }

align-self：单独设置元素在交叉轴上的对齐方式

例：

.box section:nth-child(1){
    align-self: flex-start;
}

• order：设置项目的排列序号，可以为负，谁小谁在前(没有设置的默认为0)；