伸缩盒模型—学习笔记

2009年，w3c提出了一种新的盒子模型——flexible Box（伸缩盒模型，又称：弹性盒子）

除了部分IE浏览器不支持，其他浏览器均已全部支持

一、容器与项目

给父元素添加display:felx属性，使得父盒子变为伸缩容器，而其子元素则变为伸缩项目（注意只有其子元素会变为伸缩项目），子元素变为伸缩项目后会变为块元素，可以为其设置宽高

子元素变为伸缩项目后并不会脱离文档流

二、主轴方向

调整主轴方向：

flex-direction:row 主轴为水平方向，从左到右排列

flex-direction:row-reverse 主轴为水平方向，从右到左排列

flex-direction:cloumn 主轴为垂直方向，从上到下排列

flex-direction:cloumn-reverse 主轴为垂直方向，从下到上排列

三、主轴换行方式

flex-warp:nowarp 不换行，默认值

flex-warp:warp 主轴方向上设置换行

flex-warp:warp-reverse 主轴方向上设置换行

四、flex-flow

flex-direction和flex-warp的复合属性

五、主轴对齐方式

justify-content:flex-start;主轴的起始位置

justify-content:flex-end;主轴的结束位置

justify-content:center;主轴的中间对齐

justify-content:space-around;项目均匀分布在一行中，项目与项目之间的距离是项目与边缘距离的两倍

justify-content:space-between;项目均匀分布在一行中，项目与项目之间的距离是相等的，项目与边缘之间没有距离

六、侧轴对齐方式—一行

align-items:flex-start 侧轴的起始位置对齐

align-items:flex-end侧轴的结束位置对齐

align-items：center 侧轴的中间位置对齐

align-items:baseline 侧轴的基线位置对齐

align-items:stretch 当项目没有高度时，拉伸到整个父容器

七、侧轴对齐方式—多行                                                                                                                                                           

align-content:flex-start; 侧轴的起始位置对齐

align-content:flex-end; 侧轴的结束位置对齐

align-content:center; 侧轴的中间位置对齐

align-content:space-around; 伸缩项目之间的距离是相等的，且是边缘距离的2倍

align-content:space-between; 伸缩项目之间的距离是相等的，且是边缘没有距离

align-content:space-envenly; 伸缩项目之间的距离是相等的且和边缘距离也相等

align-content:stretch 当项目不给高度，进行拉伸占满整个侧轴

八、元素的水平垂直居中

方案一：

 方案二：

九、flex-grow（伸）

概念：flex-grow 定义伸缩项目的放大比例，默认为0，即：纵使主轴存在剩余空间，也不拉伸（放大）

规则：

1、若所有伸缩项目的flex-grow值都为1，则：它们将等分剩余空间（如果有空间的话）

2、若三个伸缩项目的flex-grow的值分别为1,2,3，则：分别瓜分到：1/6,2/6,3/6的空间

十、项目的排序与单独对齐

order:-1;可以调整排序 （order的值默认为0）

align-self:center;调整元素在侧轴上单独对齐方式