flex弹性布局笔记

Flex容器的6个属性：

1.flex-direction:决定主轴的方向

row(默认) 水平，起点在左端
row-reverse 水平，起点在右端
column:垂直，起点在上沿
column-reverse:垂直，起点在下沿

2.flex-wrap:决定一条轴线放不下，如何换行

Nowrap(默认) 不换行
Wrap:换行，第一行在上面
Wrap-reverse:换行，第一行在下面

3.flex-flow:是上面两个属性的简写

默认值是 row nowrap

4.justify-content:定义项目在主轴上的对齐方式

Flex-start(默认值）左对齐
Flex-end 右对齐
Center 居中
Space-between:两端对齐，项目之间的间隔都相等
Space-around:每个项目之间的间隔相等，所以项目之间的间隔比项目与边框之间的间隔大一倍

5.align-items:定义项目在交叉轴上如何对齐

Flex-start 交叉轴的起点对齐
Flex-end 交叉轴的终点对齐
Center:交叉轴的中点对齐
Baseline：项目的第一行文字的基线对齐
Stretch （默认值）如果项目未设置高度或者设为auto，将占满整个容器的高度

6.align-content:定义多跟轴线对齐方式，一条轴线该属性不起作用

Flex-start: 与交叉轴的起点对齐
Flex-end 与交叉轴的终点对齐
Center:与交叉轴的中点对齐
Space-between:与交叉轴的两端对齐，轴线之间的间隔平均分布
Space-around：每根轴线之间的间隔都相等，所以轴线之间的间隔比轴线与边框之间的间隔大一倍

Flex项目的6个属性：

1.order:定义项目的排列顺序，数值越小，排列越靠前

默认0

2.flex-grow:定义项目的放大比例，如果存在剩余空间，不放大

默认0（如果所有项目的flex-grow属性为1，则等分剩余空间）

3.flex-shrink:定义项目的缩小比例

默认1 负值对该属性无效

4.flex-basis:定义在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性来计算主轴是否有多余空间

默认auto,即项目本来大小

5.flex:是上面三个的简写

默认值 0 1 auto 后两个值可选

6.align-self:允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性

默认值auto 表示继承父元素的align-items属性，如果没有父元素，则等同于 stretch

常用方法

/*开启felx布局,元素环绕,垂直居中*/
.flexbox1 {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
/*开启felx布局,元素两边对齐等分间隔,垂直居中*/
.flexbox2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*子元素等分占据所有空间*/
.flex1{
    flex:1;
}