web前端14--flex

1、flex

弹性盒子布局 

语法：  display: flex;

1、 flex容器

包含一组flex项目的父元素 ，通过设置 display属性为flex

2、 flex项目 容器里面的子元素就是flex项目

3、 主轴 flex容器的主要方向 flex项目在主轴上进行排序
默认主轴为水平方向 起点在左边

4、 交叉轴 与主轴垂直方向 用于辅助排列flex项目 

2、flex容器属性

1、 flex-direction 定义主轴方向
row 默认 主轴为水平方向 起点在左边
row-reverse 主轴为水平方向 起点在右边
column 主轴为垂直方向 起点在上面
column-reverse 主轴为垂直方向 起点在下面

2、 flex-wrap 定义flex容器换行方式
nowrap 默认 不换行 如果位置不够 会压缩宽度
wrap 换行 
wrap-reverse 换行 第一行在下面

3、简便写法： 同时写
flex-flow: row wrap;

3、flex-shink 空间不够

flex-shrink: 0; 不会缩小
默认1

4、justify-content 

定义flex项目在主轴上的对齐方式

flex-start 起点对齐
flex-end 终点对齐 
center 居中对齐 
space-between 两端对齐 项目之间的间隔相等 
space-around 项目两侧的间隔相等，项目与边框的间隔是项目间隔的一半
space-evenly项目之间以及项目与边框之间的间隔都完全相等

5、align-items

定义flex项目在交叉轴上的对齐方式

stretch 默认 如果项目没设置高度 占据整个交叉轴
flex-start 交叉轴的起点对齐
flex-end交叉轴的终点对齐
center交叉轴的中点对齐

6、align-self

用于定义单个flex项目在交叉轴上的对齐方式的属性

它允许为单个项目覆盖其所属容器的`align-items`属性，从而实现不同项目在交叉轴上的不同对齐方式。

 `auto`(默认值)  默认值，元素继承父容器的`align-items`属性。 
 `flex-start`    在交叉轴的起点对齐。                        
 `flex-end`     在交叉轴的终点对齐。                        
 `center`        在交叉轴的中点对齐。                        

7、align-content

定义多根轴线的对齐方式（当项目在交叉轴上有多根轴线时才生效）

 `stretch`(默认值)  轴线占满整个交叉轴，轴线之间的间隔均匀分布。 
 `flex-start`       与交叉轴的起点对齐                           
 `flex-end`         与交叉轴的终点对齐                           
 `center`           与交叉轴的中点对齐                           
 `space-between`    与交叉轴两端对齐，轴线之间的间隔相等。       
 `space-around`     每根轴线两侧的间隔相等                       
 ` space-evenly`    轴线之间的间隔相等                           

8、flex-grow

空间多余 分配空间 

        div {
            flex-grow: 1;
        }
        #a1{
            flex-grow: 3;
        }

 9、定义flex

项目排列顺序

//数值越小越靠前 默认是0
 #a1{
            order: 3;
        }