* 2009年,W3C 提出了一种新的盒子模型-- Flexible Box (伸缩盒模型,又称:弹性盒子)。
* 它可以轻松的控制: 元素分布方式、元素对齐方式、元素视觉顺序 ......
* 截止目前,除了在部分 TE 浏览器不支持,其他浏览器均已全部支持。
* 伸缩盒模型的出现,逐渐演变出了一套新的布局方案-- flex布局
小贴士:
1,传统布局是指: 基于传统盒状模型,主要靠: display 属性+ position 属性+ float 属性
2. flex布局目前在移动端应用比较广泛,因为传统布局不能很好的呈现在移动设备上。
1、伸缩容器、伸缩项目
伸缩容器:开启了 flex 的元素,就是:伸缩容器
1.给元素设置: display:flex 或 display:inline-flex,该元素就变为了伸缩容器。
2. display:inline-flex 很少使用,因为可以给多个伸缩容器的父容器,也设置为伸缩容器。
3.一个元素可以同时是:伸缩容器、伸缩项目。
伸缩项目:伸缩容器所有子元素自动成为伸缩项目。
1,仅伸缩容器的子元素成为了伸缩项目,孙子元素、重孙子元素等后代,不是伸缩项目。
2.无论原来是哪种元素(块、行内块、行内),一旦成为了伸缩项目,全都会“块状化”。
2、主轴与侧轴
主轴: 伸缩项目沿着主轴排列,主轴默认是水平的,默认方向是:从左到右(左边起点,右边终点)。
侧轴: 与主轴垂直的就是侧轴,侧轴默认是垂直的,默认方向是:从上到下(上边起点,下边终点)
1)主轴方向:
属性名: flex-direction
常用值如下:
1. row : 主轴方向水平从左到右-- 默认值
2. row-reverse:主轴方向水平从右到左
3.column:主轴方向垂直从上到下。
4column-reverse:主轴方向垂直从下到上
2)主轴换行方式
属性名: flex-wrap
常用值如下:
1. nowrap: 默认值,不换行。2、wrap: 自动换行,伸缩容器不够自动换行。
3、wrap-reverse: 反向换行。
3)flex-flow (几乎不用)
flex-flow是一个复合属性,复合了 flex-direction 和 flex-wrap 两个属性。值没有顺序要求
flex-flow: row wrap;
4)主轴对齐方式
属性名: justify-content
常用值如下:
1. flex-start:主轴起点对齐。--默认值
2. flex-end:主轴终点对齐。
3.center: 居中对齐
4.space-between:均匀分布,两端对齐 (最常用)。
5.space-around:均匀分布,两端距离是中间距离的一半
6.space-evenly : 均匀分布,两端距离与中间距离一致。
5)侧轴对齐方式
所需属性: align-items
常用值如下:
1. flex-start:侧轴的起点对齐。
2. flex-end:侧轴的终点对齐。
3. center:侧轴的中点对齐。
4.baseline:伸缩项目的第一行文字的基线对齐。
5. stretch: 如果伸缩项目未设置高度,将占满整个容器的高度。-- (默认值)
6)侧轴多行的情况:
所需属性: align-content
常用值如下:
1. flex-start :与侧轴的起点对齐。
2. flex-end:与侧轴的终点对齐。
3.center:与侧轴的中点对齐。
4. space-between:与侧轴两端对齐,中间平均分布。
5.space-around:伸缩项目间的距离相等,比距边缘大一倍
6.space-evenly:在侧轴上完全平分。
7 stretch : 占满整个侧轴。-- 默认值
3、盒子伸缩性
1)flex-grow (伸)
概念: flex-grow 定义伸缩项目的放大比例,默认为,即:纵使主轴存在剩余空间,也不拉伸(放大)。
规则:
1.若所有伸缩项目的 flexgrow 值都为1,则: 它们将等分剩余空间 (如果有空间的话)
2,若三个伸缩项目的 flex-grow 值分别为: 1、2、3,则: 分别瓜分到: 1/6、2/6、3/6 的空间
2)flex-shrink (缩)
概念: flex-shrink 定义了项目的压缩比例,默认为1,即: 如果空间不足,该项目将会缩小。
收缩项目的计算,略微复杂一点,我们拿一个场景举例:
例如:三个收缩项目,宽度分别为: 200px、300px、200px,它们的flex-shrink 值分别为: 1、2、若想刚好容纳下三个项目,需要总宽度为 700px,但目前容器只有 400px,还差300px,所以每个人都要收缩一下才可以放下,具体收缩的值,这样计算:
1.计算分母: (200x1) + (300x2) + (20x3) = 1400
2.计算比例:
项目一: (200x1) / 14 = 比例值1
项目二: (300x2) / 140 = 比例值2
项目三: (200x3) /14 = 比例值3
3,计算最终收缩大小:
项目一需要收缩:比例值1 x 300
项目二需要收缩: 比例值2 x 300
项目三需要收缩: 比例值3 x 300
复合写法:flex: 1;
即三个属性的缩写:flex-grow: 1; flex-shrink: 1 flex-basis: auto;