弹性布局学习

一、弹性盒子

• 容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。

元素排列方向

值	描述
flex-direction:row;	从左到右水平排列元素（默认值）
flex-direction:row-reverse;	从右向左排列元素
flex-direction:column;	从上到下垂直排列元素
flex-direction:column-reverse;	从下到上垂直排列元素

自适应换行

选项	说明
flex-wrap:nowrap;	元素不拆行或不拆列（默认值）
flex-wrap:wrap;	容器元素在必要的时候拆行或拆列。
flex-wrap:wrap-reverse;	容器元素在必要的时候拆行或拆列，但是以相反的顺序

注意 ：flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式

flex-flow: row-reverse wrap-reverse;

元素主轴排列方式

选项	说明
justify-content：flex-start;	元素紧靠主轴起点
justify-content：flex-end;	元素紧靠主轴终点
justify-content：center;	元素从弹性容器中心开始
justify-content：space-between;	第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
justify-content：space-around;	每个元素两侧的间隔相等。元素之间的间隔比元素与容器的边距的间隔大一倍
justify-content：space-evenly;	元素间距离平均分配

元素交叉轴排列方式

选项	说明
align-items:stretch;	元素被拉伸以适应容器（默认值）
align-items:center;	元素位于容器的中心
align-items:flex-start;	元素位于容器的交叉轴开头
align-items:flex-end;	元素位于容器的交叉轴结尾

注意；如果设置了 width | height | min-height | min-width | max-width | max-height ，将影响stretch 的结果，因为 stretch 优先级你于宽高设置。

元素交叉轴多行（flex-wrap:wrap）排列方式

选项	说明
align-content:stretch;	将空间平均分配给元素
align-content:flex-start;	元素紧靠交叉轴起点
align-content:flex-end;	元素紧靠交叉轴终点
align-content:center;	元素从弹性容器中心开始
align-content:space-between;	第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
align-content:space-around;	每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
align-content:space-evenly;	元素间距离平均分配

单个元素交叉轴排列方式

选项	说明
align-self:stretch;	将空间平均分配给元素
align-self:flex-start;	元素紧靠交叉轴起点
align-self:flex-end;	元素紧靠交叉轴终点
align-self:center;	元素从弹性容器中心开始

自动分配余下空间

用于将弹性盒子主轴的可用空间，分配给弹性元素。flex-grow:1; 可以用小数或整数

空间不足缩小比例

如果全部设置flex-shrink:0; 都不缩小，单个可以整数或者小数设置缩小比例

定义元素基准尺寸宽高

可以是长度单位，也可以是百分比。flex-basis的优先级高于width、height属性，小于max-height,min-height。

注意：flex是flex-grow、flex-shrink 、flex-basis缩写组合。flex:1 1 200px;

改变单个元素顺序

用于控制弹性元素的位置，默认为 order:0 数值越小越在前面，可以负数或整数。