admin
# Flex 弹性布局核心知识梳理 关于
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009 年，W3C 提出了一种新的方案：Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex 布局将成为未来布局的首选方案。
# 1、基础知识 Flex 布局 描述 什么是 Flex 布局 ？ ① Flex 是 flexible box 的缩写，意为“弹性的盒子”，所以 flex 布局一般也叫做“flex 弹性布局”② 任何一个 HTML 元素都可以指定为 flex 布局：display:flex | inline-flex;③ display: flex 块级元素④ inline-flex 内联块元素 什么是 flex 容器（flex container） 凡是采用 flex 布局的元素，就称为 flex 容器；即：设置了 display: flex; 或 display: inline-flex; 的元素称之为 Flex 容器 什么是 flex 项目 item（flex item） flex 容器的所有子元素（就是第一级的儿子元素，不包含孙子及其后代的子元素），自动成为容器成员，称为 flex 项目 什么是主轴，什么是交叉轴 ① 默认情况下，水平方向上的是主轴，垂直于主轴方向上的是交叉轴（默认时就是相当于 水平轴 和 垂直轴）② flex 项目默认沿主轴方向开始排列③ 修改主轴方向 水平（行）flex-direction：row； 垂直（列）flex-direction：column； # 2、Flex 容器的属性 名称 描述 flex-direction 决定主轴的方向 (即 Flex 项目的排列方向) ：① row (默认值) : 默认水平方向从左到右为主轴② row-reverse : 水平方向从右到左为主轴③ column : 垂直方向从上到下为主轴④ column-reverse : 垂直方向从下到上为主轴 flex-wrap 定义了如果一条轴线排不下，如何换行：① nowrap (默认值) : 默认不换行② wrap: 换行③ wrap-reverse : 不仅换行还改变了默认方向，元素从下到上排列 flex- flow flex- direction 和 flex-wrap 的简写形式：① flex-direction: row (默认值)② flex-wrap: nowrap (默认值) justify-content 定义了 Flex 项目在主轴上的对齐方式：① flex-start (默认值)：默认从行首起始位置开始排列② flex-end : 从行尾位置开始排列③ center : 居中排列④ space-between : 均匀排列每个元素。首个元素放置于起点,末尾元素放置于终点⑤ space-around : 均匀排列每个元素。每个元素周围分配相同的空间 align-items 定义了 Flex 项目在交叉轴上如何对齐：① stretch (默认值) : 默认弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度② flex-start : 元素向交叉轴起点对齐③ flex-end : 元素向交叉轴终点对齐④ center :元素在交叉轴居中 ⑤ baseline :所有元素向基线对齐 align-content 定义了 存在多根主轴线时, Flex 项目在交叉轴上如何对齐： ① stretch (默认值) :默认拉伸所有行来填满剩余空间 ② flex-start : 从起始点开始放置元素 ③ flex-end: 从终止点开始放置元素 ④ center: 将元素放置在中点 ⑤ space- between：均匀分布项目。第-项与起始点齐平,最后-项与终止点齐平⑥ space- around: 均匀分布项目。项目在两端有一半大小的空间 # 3、Flex 项目 item 的属性 名称 描述 order 定义 flex item 的排列顺序，数值越小，排列越靠前，默认值为 0；order: