flex弹性盒子

弹性盒模型

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

 

flex-direction:row   //(默认)主轴为水平方向,起点在左端。
flex-direction:row-reverse   //主轴为水平方向,起点在右端
flex-direction:column   //使用后会使主轴变为y轴
flex-firection:column-reverse   //主轴为垂直方向,起点在下沿。复制代码

flex-wrap:nowrap //(默认)不换行
flex-wrap:wrap   //换行,第一行在上方
flex-wrap:wrap-reverse    //换行,第一行在下方复制代码

flex-flow:该属性是flex-direction属性和flex-wrap属性的简写形式。
flex-flow:值1(主轴方向) 值2(是否换行)
flex-flow:row nowrap   //(默认)复制代码

justify-content:flex-start   //(默认)左对齐
justify-content:flex-end   //右对齐
justify-content:center   //居中(子元素紧凑居中)
justify-content:space-between;   //两端对齐,项目之间的间隔都相等
justify-content:space-around;   //每个项目两侧的间隔相等复制代码

align-items:flex-start    //与交叉轴的起点对其
align-items:flex-end    //与交叉轴的终点即末尾对其
align-items:center    //与交叉轴的中点对其
align-items:baseline    //项⽬的第⼀⾏⽂字的基线对齐
align-items:stretch    //如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度复制代码

align-content属性,紧跟于flex-wrap属性后,该属性用于修饰flex-wrap属性
align-content:flex-start    //与交叉轴的起点对齐
align-content:flex-end    //与交叉轴的终点对其
align-content:center    //与交叉轴的中点对齐
align-content:space-between    //与交叉轴两端对齐，轴线之间的间隔平均分布
align-content:space-around    //每根轴线两侧的间隔都相等复制代码

align-self:center
//允许单个元素与其他元素有不一样的对齐方式
//在弹性子元素上使用。覆盖容器的 align-items 属性。复制代码

order属性: (自定义子元素的显示顺序) 
//用整数值来定义排列顺序，数值小的排在前面。可以为负值。
//注: 默认值为0。父元素必须设置为弹性盒模型
align-self:flex-start    //默认
align-self:flex-end    //终点复制代码

flex-grow属性:(定义弹性盒子元素的扩展比率)
//表示的是当容器有多余的空间时，这些空间在不同条目之间的分配比例
//比如，一个容器中有 3 个条目，其"flex-grow"属性的值分别为 1，2 和 3
//那么当容器中有空白空间时，这 3 个条目所获得的额外空白空间分别占
//全部空间的 1/6、1/3 和 1/2复制代码

flex-shrink属性:(定义弹性盒子元素的收缩比率)
//该属性的值也是无单位的,表示的是当容器的空间不足各个条目的尺寸缩小的比例。
//例如,在容器中有 3 个条目,其"flex-shrink"属性的值分别为 1，2 和 3。
//每个条目的主轴尺寸均为 200px。当容器的主轴尺寸不足 600px 时,
//比如变成了 540px 之后则需要缩小的尺寸 60px 由 3 个条目按照比例来分配。
//3 个条目分别要缩小 10px、20px 和 30px,
//主轴尺寸分别变为 190px、180px 和 170px复制代码