CSS3-伸缩盒模型

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

传统布局：基于传统盒状模型，主要靠：display属性+position属性+float属性

flex布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上

---

伸缩容器

• display: flex；：将容器变为伸缩容器
• display: inline-flex; ：将容器变为伸缩容器的同时，将自己变为行内元素（很少使用）

可以给伸缩容器的父容器配置为伸缩容器，其伸缩容器本身就变成了伸缩项目

---

伸缩项目

伸缩容器中的子元素自动成为伸缩项目

注：这里只有子元素，其孙子元素和其他后代元素是无法成为伸缩项目的（只有一层级）

无论是哪种元素（块，行内块，行内），一档成为了伸缩项目，全部都会“块状化”

---

主轴方向

元素是根据主轴的方向排列的

• flex-direction: row; 主轴从左到右
• flex-direction: row-reverse; 主轴从右到左
• flex-direction: column; 主轴从上往下
• flex-direction: column-reverse; 主轴从下到上

---

主轴的换行方式

在主轴方向上排列的元素默认不允许换行，如果遇到元素超出的部分，就会自动缩小盒子排列

通过flex-wrap属性来调整主轴换行方式

• nowrap：不换行，默认值
• wrap：换行
• wrap-reverse：反转换行

注：CSS3提供了一个复合属性flex-flow，来同时配置主轴方向和主轴的换行方式

---

主轴的对齐方式

justify-content属性调整主轴的对齐方式

• flex-start：主轴的起始位置
• flex-end：主轴的结束位置
• center：主轴居中对齐
• space-content：项目均匀的分布在一行中，项目之间的距离是项目距离边缘的2倍
• space-between：项目均匀的分布在一行中，项目之间的距离是相等的，项目距离边缘没有距离
• space-evenly：项目均匀的分布在一行中

---

侧轴的对齐方式

align-items属性调整侧轴的对齐方式，仅适用于一行项目

• flex-start：侧轴的起始位置
• flex-end：侧轴的结束位置
• center：侧轴的居中对齐
• baseline：侧轴的基线对齐
• stretch：侧轴的拉伸对齐（当伸缩项目没有高度的时候，拉伸到伸缩容器的高度），默认值

align-content属性调整侧轴的对齐方式，适用于多行伸缩项目

• flex-start：侧轴的起始位置
• flex-end：侧轴的结束位置
• space-content：项目均匀的分布在一行中，项目之间的距离是项目距离边缘的2倍
• space-between：项目均匀的分布在一行中，项目之间的距离是相等的，项目距离边缘没有距离
• space-evenly：项目均匀的分布在一行中
• stretch：侧轴拉伸对齐，将多行项目拉伸到平均高度，默认值

---

利用flex布局实现水平居中对齐

/* 方案一 */
.outer{
    display: flex;
    justify-content: center;
    align-items: crenter;
}


/* 方案二 */
.outer{
    display: flex;
}
.inner{
    margin: autp;
}

---

基准长度

使用flex-basis设置伸缩项目在主轴上的基准长度

若主轴为横向的，宽失效

若主轴为纵向的，长失效

此属性的默认值是auto，一般而言，我们也不会手动的设定主轴上的基准长度

---

伸缩

flex-grow定义伸缩项目的放大比例，默认为0，即主轴存在剩余空间，也不放大

• 当所有项目的值都为1时，如果有剩余空间，所有项目平分这些剩余空间
• 当三个伸缩项目的值为1，2，3时，分别瓜分到六分之一，六分之二，六分之三的剩余空间

---

flex-shrink定义伸缩项目的缩小比例，默认为1，即当伸缩容器的宽度小于伸缩项目时，伸缩容器自动缩小

这个属性在开发时很少使用，直接使用默认值1

---