flex弹性布局--笔记02

一、概述

1，设置了弹性布局的元素称为容器，元素里面的子元素称为项目

2、容器有水平的主轴和垂直的交叉轴，主轴和交叉轴都有起点（开始的位置）和终点（结束的位置）

3、容器有容器属性，项目有项目属性

4、容器属性：（flex-direction  flex-wrap flex-flow   justify-content  align-items   align-content）---6个

5、项目属性：（order  flex-grow  flex-shrink  flex-basis  flex  align-self）-----6个

二、容器属性

1、flex-direction属性：设置项目的排列方向

值1：row：主轴为水平方向，起点为左端，项目水平方向，从左开始排列（默认值）

值2：row-reverse:主轴为水平方向，起点在右端，项目水平方向，从右开始排列

值3：column:主轴为垂直方向，起点在上端，项目垂直方向，从上至下开始排列

值4：column-reverse：主轴为垂直方向，起点在下端，项目垂直方向，从下至上 开始排列

2、flex-wrap属性：设置当项目一行排不下的时候，是否换行

值1：nowrap:不换行（默认值）

值2：wrap：换行（第一行在上面）

值3：wrap-reverse:换行（第一行在下面）

3、flex-flow属性：是flex-direction属性和flex-wrap属性的简写，默认值为 row nowrap

4、justify-content:设置项目在主轴上的对齐方式

值1：flex-start:左对齐（默认值）

值2：flex-end:有对齐

值3：center：居中对齐

值4、space-between:两端对齐，项目之间的间隔都相等

值5：space-around：每个项目之间的间隔相等，所以项目之间的间隔是两端项目与边框间隔的两倍

5、align-items:设置项目在交叉轴上的对齐方式

值1：flex-start:项目在交叉轴的起点对齐

值2：flex-end:项目在交叉轴的终点对齐

值3：center：项目在交叉轴居中对齐

值4：baseline：项目的第一行文字的基线对齐

值5：strech:项目如果没有设置高度或者设置为auto，项目将占满整个容器的高度（默认值）

6、align-content属性：项目有多根轴线的情况下 的对齐方式，只有一根轴线则该属性不起作用

值1：flex-start:项目在交叉轴起点对齐

值2：flex-end:项目在交叉轴终点对齐

值3：center：项目在交叉轴居中对齐

值4：space-between：项目在交叉轴两端对齐，间隔均匀分布

值5：space-around：项目之间间隔相等，所以项目之间的间隔是项目与边框间隔的两倍

值6：stretch：轴线占满整个交叉轴

三、项目属性

1、order属性：定义项目的排列顺序，数值越小，排列越靠前，默认为0

2、flex-grow属性：定义项目的放大比例，默认为0，如果所有项目都是1，那么将均分容器的空间

3、flex-shrink属性定义项目的缩小比例，默认为1，负值无效，如果一个项目为0，其余为1，当容器空间不足，那么为0的不缩小

4、flex-basis属性：定义了项目占据主轴空间的大小，默认值为auto，即项目本来的大小。也可以设置其他值，如350px,那么项目的大小为350px

5、flex属性：是flex-grow flex-shrink flex-basis的简写，默认值为0 1 auto  ；有两个快捷属性值（auto和none）；auto表示1 1 auto；none表示0 1 
auto；

6、align-self属性：设置单个项目和其他项目不一样的对齐方式，可以覆盖父容器 的align-items属性，默认值为auto，继承父元素的align-items属性，如果没有父元素，则等同于stretch

值：auto flex-start  flex-end  center  baseline  stretch