Flex 布局笔记

Flex 布局介绍

CSS 2.1 定义了四种布局模式 — 根据框与同级和祖先框的关系确定框的大小和位置的算法：

1. 块布局，设计用于布置文档
2. 内联布局，设计用于设置文本布局
3. 表格布局，设计用于以表格格式布置 2D 数据
4. 定位布局，设计用于非常明确的定位，而不考虑文档中的其他元素

flex为新的布局模式，灵活布局，旨在布置更复杂的应用程序和网页。
Flex 布局的全称为 CSS Flexible Box Layout Module，是 W3C 提出的一种新型页面布局方案，第一个版本于 2009 年推出，到现在为止，W3C 一共发布了 13 个版本，最新版本于 20181119 推出，用于以Web应用程序和复杂网页通常需要的方式分配空间和对齐内容。

弹性容器的内容：

1. 可以以任何流动方向布置（向左，向右，向下，甚至向上布局）
2. 可以在样式层反转或重新排列其显示顺序（即，视觉顺序可以独立于源和语音顺序）
3. 可以沿单个（主）轴线性布局，或沿次（交叉）轴缠绕成多条线
4. 可以"灵活"其尺寸以响应可用空间
5. 可以相对于它们的容器对齐，也可以在次级（交叉）上彼此对齐)
6. 可以沿主轴动态折叠或取消折叠，同时保持容器的十字大小

Flex布局演示

点击体验

Flex 布局由容器flex container和项目flex item两部分组成，容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis，项目默认以主轴排列。 Flex 属性包括容器属性和项目属性两部分，容器上可设置：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content6 个属性，项目上同样可设置 6 个属性，分别为：order、flex-grow、flex-shrink、flex-basis、flex、align-self。

一、flex-direction 属性

描述：决定主轴的方向。

flex-direction: row | row-reverse | column | column-reverse;

属性介绍：
row：默认值，主轴为水平方向,表示从左向右排列
row-reverse：主轴为水平方向，从右向左排列
column：主轴为垂直方向，从上向下排列
column-reverse：主轴为垂直方向，从下向上排列

二、flex-wrap 属性

描述：决定项目在一条轴线排不下时如何换行。

flex-wrap: nowrap | wrap | wrap-reverse;

属性介绍：
nowrap：默认值，不换行
wrap：换行，第一行在上方
row-reverse：换行，第一行在下方

三、flex-flow 属性

描述：flex-direction属性和flex-wrap属性的简写形式，默认值为 row nowrap。

flex-flow: <flex-direction> || <flex-wrap>;

属性介绍：
row nowrap：默认值，主轴为水平方向，不换行
flex-direction：同flex-direction
flex-wrap：同flex-wrap

四、justify-content 属性

描述：定义项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-round |  space-evenly;

属性介绍：
flex-start：默认值，左对齐
flex-end：右对齐
center：居中
space-evenly：每个项目之间及两端的间隔都相等
space-around：每个项目两侧间隔相等
space-between：两端对齐，项目之间间隔相等

五、align-items 属性

描述：定义项目在交叉轴（默认方向从上到下）上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch;

属性介绍：
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
cente：交叉轴的中心对齐
baseline：项目第一行文字的基线对齐
stretch：默认值，项目未设置固定高度时，将占满整个容器

六、align-content 属性

描述：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around |  stretch;

属性介绍：
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中心对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布等
space-around：每根轴线两侧的间隔都相
stretch：默认值，轴线占满整个交叉轴

更多详细介绍请点击此处