css flex布局详解
第一部分: 前言
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
用法: display: flex 所在元素就成为 flex盒子属性元素.拥有了 弹性盒子 的功能.
在页面布局（layout）中. flex布局针对的是传统的 基于盒状模型，依赖 display 属性 + position属性 + float属性的不足.提出了一种新的 简便、完整、响应式地实现各种页面布局
让布局正式成为一种可操控的属性API.
下面我们来介绍flex的特点:
| 特点 | 释意 |
|---|---|
| 应用广 | 任何一个容器都可以指定为 Flex 布局(包括行内元素) |
| 覆盖性 | 子元素的float、clear和vertical-align属性将失效 |
| 矢量轴 | 它是由两根有方向的轴, 主轴 和 侧轴 来管理分配 空间的 |
| 移动兼容高 | 在当下所有浏览器移动端都良好支持.未来趋势好. |
flex 属性全景图:
css-flex.png
flex的核心就是两根轴: 主轴(main axis) 和 侧轴(cross axis)
所有的 子项目 都被 串在 这两根轴上, 被这两轴所支配.
支配它们的在 父元素里的 空间分配布局.排列.所占比例大小...等等
根据flex的组织结构.可以判定出:
它分为两个控制模块: 父容器端 和 子项目端
- 父容器端:
| 属性值 | 描述 | 参数值 |
|---|---|---|
| flex-direction | 定义 主轴上的子项目的排列方向 (默认从左向右 row) | row / row-reverse / column / column-reverse |
| flex-wrap | 定义 主轴上 子项目是否 换行 (默认不换行nowrap) | nowrap / wrap / wrap-reverse |
| flex-flow | flex-direction 与 flex-wrap 的简写,默认值: row nowrap | flex-direction 与 flex-wrap 参数值的组合 |
| justify-content | 定义主轴上子项目的排列方式 默认值: flex-start | flex-start / flex-end / center / space-between / space-around |
| align-items | 定义侧轴上 子项目的排列方式,默认值: stretch | flex-start / flex-end / center / baseline / stretch |
| align-content | 多根轴线的对齐方,如果项目只有一根轴线，该属性不起作用,默认值: stretch | flex-start / flex-end / center / space-between / space-around / stretch |
- 子项目端
| 属性值 | 描述 | 参数值 |
|---|---|---|
| order | 定义项目的排列顺序。数值越小，排列越靠前，默认为0 | integer |
| flex-grow | 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 | number |
| flex-shrink | 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 | number |
| flex-basis | 定义了在分配多余空间之前，项目占据的主轴空间,默认值为auto，即项目的本来大小 | number + px |
| flex | 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto | auto (1 1 auto) / none (0 0 auto) |
| align-self | 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性,默认值为auto | auto / flex-start / flex-end / center / baseline / stretch |
第二部分: 实例讲解
父容器端
-
flex-direction
顾名思义: direction 是方向,动向的意思.
因为 flex轴是有 矢量性质的.就决定了它必行有一个属性来控制方向. 这属性值就是 felx-direction
| 值 | 功能描述 |
|---|---|
| row(默认值) | 主轴为水平方向，起点在左端 |
| row-reverse | 主轴为水平方向，起点在右端 |
| column | 主轴为垂直方向，起点在上沿 |
| column-reverse | 主轴为垂直方向，起点在下沿 |
row
实例:
display: flex;
flex-direction: row;
效果:
css-flex-row.png
row-reverse
display: flex;
flex-direction: row-reverse;
效果:
css-flex-row-reverse.png
column
display: flex;
flex-direction: column;
效果:
css-flex-column.png
column-reverse
display: flex;
flex-direction: column-reverse;
效果:
css-flex-column-column.png
-
flex-wrap
wrap: 包，裹; 用…包裹; 用…缠绕 的意思.
放在css里 就是 锁定.闩住 的 作用. nowrap就是解除 闩扣.释放自由的味道....
| 值 | 功能描述 |
|---|---|
| nowrap | （默认）：对子项目不进行闩锁(控制),不换行 |
| wrap | 闩住(控制)子项目,可以换行，第一行在上方 |
| wrap-reverse | 换行，第一行在下方 |
实例:
nowrap
注意:: 当flex元素里设置 nowrap后, 里面的子项目在水平方向上会均匀分布, 子项目设置的宽度失效.
display: flex;
flex-wrap: nowrap;
效果:
css-nowrap.png
wrap
display: flex;
flex-wrap: wrap;
效果:
css-wrap.png
wrap-reverse
display: flex;
flex-wrap: wrap-reverse;
效果:
css-wrap-reverse.png
flex-flow
flex-direction 与 flex-wrap 的简写,默认值: row nowrap
flex-direction有4个参数值. flex-wrap有三个参数值
所以flex-flow有: 4x3 =12个组合值
例如:
display: flex;
flex-flow: row-reverse wrap;
效果:
css-flex-flow.png
-
justify-content
它控制着主轴上子项目的排列方式,
值如下列表:
| justify-content值 | 描述 |
|---|---|
| flex-start (默认值） | 主轴起点对齐 |
| flex-end | 主轴终点点对齐 |
| center | 居中排列对齐 |
| space-between | 两端对齐，项目之间的间隔都相等 |
| space-around | 每个项目两侧的间隔相等 所以，项目之间的间隔比项目与边框的间隔大一倍
|
效果:
css-justify-content.jpg
align-items
定义 侧轴上 子项目的排列方式.
值如下列表:
| align-items值 | 描述 |
|---|---|
| stretch(默认值) | 如果项目未设置高度或设为auto，将占满整个容器的高度拉长; 拽满子项目到整个侧轴长度
|
| flex-start | 侧轴起点对齐 |
| flex-end | 侧轴终点点对齐 |
| center | 居中排列对齐 |
| baseline | 项目的第一行文字的基线对齐 |
案例效果:
css-align-items.jpg
-
justify-content
justify-content 针对的是 多根主轴线 在垂直主轴方向(与主轴矢量方向成90°) 的 对齐排列方式
如果项目只有一根轴线，该属性不起作用
| align-content值 | 描述 |
|---|---|
| stretch(默认值) | 轴线占满整个侧轴 |
| flex-start | 侧轴的起点对齐 |
| flex-end | 侧轴的终点对齐 |
| center | 居中排列对齐 |
| space-between | 与侧轴两端对齐，轴线之间的间隔平均分布 |
| space-around | 每根轴线两侧的间隔都相等 轴线之间的间隔比轴线与边框的间隔大一倍
|
案例效果:
css-align-content.jpg
子项目端
-
order
顾名思义: order 能给 子项目 划分排列权重(排列顺序)...，默认为0
参数为整数,可负值
/* 值越小越靠近主轴起点 */
.box .item:nth-child(2) {
order: -1;
}
.box .item:nth-child(5) {
order: -2;
}
效果:
css-order.png
总结: 默认值为0. 也就是说..可以把 0 当做一个 参考界线..可以灵活的安排子元素的排列顺序
-
flex-grow
它控制着 项目的 放大比例，默认为0，即如果存在剩余空间，也不放大
既然是 比列 , 那就意味着 它是一个相对的关系. 相对的参考是 谁呢? .....请看下面例子
案例: 父元素宽度给定. 子项目宽度未定
/* 父容器的宽度 平局分成 子项目数目+flex-grow参数之和 这么多块.再按flex-grow权重分派下去. */
.box .item:nth-child(2) {
background: green;
flex-grow: 2;
}
.box .item:nth-child(5) {
background: green;
flex-grow: 5;
}
效果:
css-flex-grow.png
总结: 得出上面 相对 谁的问题: 相对于 父容器划分的块数...
-
flex-shrink
属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 参数负值对该属性无效
案例: 父元素宽度给定. 父容器不换行.子项目宽度给定
.box .item:nth-child(2) {
background: green;
flex-shrink: 4;
}
效果:
css-flex-shrink.png
-
flex-basis
用于设置或检索弹性盒伸缩基准值 参数为: number+px
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
由于这个属性太过鸡肋, 一般很少用到. 所以不做实例..(实际上可以忽略这个属性)
-
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
注意: 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值.
-
align-self
align-self属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
| align-self值 | 描述 |
|---|---|
| auto | 继承父元素的align-items属性 |
| flex-start | 起始位置的边界紧靠住该行的侧轴起始边界 |
| flex-end | 起始位置的边界紧靠住该行的侧轴结束边界 |
| center | 弹性盒子元素在该行的侧轴（纵轴）上居中放置 |
| baseline | 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐 |
| stretch | 元素被拉伸以适应容器如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
|
案例效果:
css-align-self.jpg
