Flex 布局教程：语法

转载， 侵权删

Web布局(layout）是 CSS 关键应用程序。

传统的布局解决方案，基于 盒状模型 ，依赖 display 属性 + position 属性 + float 属性对于那些特殊的布局， 垂直居中 不容易实现。

2009年，W3C 提出了一个新方案。----Flex 版面设计，可以简单、完整、反应灵敏，实现多种页面布局。目前，所有浏览器都支持该功能，这意味着该功能现在可以安全使用。

Flex 布局将是未来布局的首选选项。本文介绍了它的语法， 下一篇文章 给定常用布局 Flex 写网民 JailBreak 适用于本手册中的所有示例 Demo ，也可以参考。

以下主要指以下两条： A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties 。

一、Flex 布局是什么？

Flex 是 Flexible Box 缩写，含义"弹性布局"，用于为箱式模型提供最大的灵活性。

可以指定任何容器 Flex 布局。

2. .box{
3. display: flex;
4. }

也可以使用行内元素。 Flex 布局。

2. .box{
3. display: inline-flex;
4. }

Webkit 必须添加内核的浏览器。 -webkit 前缀。

2. .box{
3. display: -webkit-flex; /* Safari */
4. display: flex;
5. }

注意，设置 Flex 布局之后的子元素。 float 、 clear 和 vertical-align 属性将变为无效。

2.基本概念

采用 Flex 布局元素，称为 Flex 容器（flex container），简称"容器"。其所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

默认情况下，容器有两个轴：水平轴(main axis)和垂直横轴(cross axis). 主轴的起始位置（与边界的交点）称为 main start ，结束位置称为 main end ; 十字轴的起始位置称为 cross start ，结束位置称为 cross end 。

默认情况下，项目沿主轴排列。单个项目占用的主轴空间称为 main size ，所占用的横轴空间称为 cross size 。

3.容器特性

以下6该属性在容器上设置。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

3.1 flex-direction属性

flex-direction 该属性确定主轴的方向（即，项目的对齐方向）。

2. .box {
3. flex-direction: row | row-reverse | column | column-reverse;
4. }

它可能有4个值。

• row （默认）：主轴是水平的，从左端开始。
• row-reverse ：主轴是水平的，从右端开始。
• column ：主轴位于垂直方向，起点位于上边缘。
• column-reverse ：主轴处于垂直方向，起点位于下边缘。

3.2 flex-wrap属性

默认情况下，项目都在一行中（也称为"轴线"）上。 flex-wrap 属性定义，如果一个轴无法排列，如何换行。

2. .box{
3. flex-wrap: nowrap | wrap | wrap-reverse;
4. }

它可能需要三个值。

（1） nowrap （默认）：无换行符。

（2） wrap ：换行符，第一行在上面。

（3） wrap-reverse ：换行符，第一行在下面。

3.3 flex-flow

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

2. .box {
3. flex-flow: || ;
4. }

3.4 justify-content属性

justify-content 该属性定义项目在主轴上的对齐方式。

2. .box {
3. justify-content: flex-start | flex-end | center | space-between | space-around;
4. }

它可能取5值，则特定对齐与轴的方向有关。以下假设主轴从左向右。

• flex-start （默认）：左对齐
• flex-end ：右对齐
• center ： 居中
• space-between ：两端对齐，项目之间的间隔相等。
• space-around ：每个项目的两侧间距相等。因此，项目之间的间隔是项目和边框之间的间隔的两倍。

3.5 align-items属性

align-items 该属性定义项目在十字轴上的对齐方式。

2. .box {
3. align-items: flex-start | flex-end | center | baseline | stretch;
4. }

它可能取5价值具体的对齐方式与横轴方向有关，从上到下假设横轴方向。

• flex-start ：十字轴的起点对齐。
• flex-end ：十字轴的端点对齐。
• center ：十字轴的中点对齐。
• baseline : 项目的第一行文本的基线对齐方式。
• stretch （默认）：如果项目未设置为高度或设置auto，将填充整个容器的高度。

3.6 align-content属性

align-content 该属性定义多个轴的对齐方式。如果项目只有一个轴，则此属性不起作用。

2. .box {
3. align-content: flex-start | flex-end | center | space-between | space-around | stretch;
4. }

财产可能会6个值。

• flex-start ：与十字轴的起点对齐。
• flex-end ：与十字轴的末端对齐。
• center ：与十字轴的中点对齐。
• space-between ：与十字轴的两端对齐，轴之间的间距均匀分布。
• space-around ：每个轴两侧的间隔相等。因此，轴之间的间隔是轴和边界之间的间隔的两倍。
• stretch （默认）：轴占据整个十字轴。

4.项目性质

以下6该属性是在项目上设置的。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

4.1 order属性

order 该属性定义项目的排列顺序。值越小，排列越高，默认值为0。

2. .item {
3. order: ;
4. }

4.2 flex-grow属性

flex-grow 该属性定义项目的放大倍数，默认情况下 0 ，即，如果有剩余空间，则不会放大。

2. .item {
3. flex-grow: ; /* default 0 */
4. }

如果所有项目 flex-grow 属性都为1，他们将平均分配剩余空间（如果有的话）。如果项目 flex-grow 属性为2，其他项目为1，前者将占用两倍于其他术语的剩余空间。

4.3 flex-shrink属性

flex-shrink 该属性定义项目的缩减率，默认为1，也就是说，如果没有足够的空间，项目将缩小。

2. .item {
3. flex-shrink: ; /* default 1 */
4. }

如果所有项目 flex-shrink 属性都为1当没有足够的空间时，它将以相等的比例减少。如果项目 flex-shrink 属性为0，其他项目为1，当空间不足时，前者不会收缩。

负值对此属性无效。

4.4 flex-basis属性

flex-basis 该属性定义项目在分配多余空间之前占用的主轴空间(main size). 根据该属性，浏览器计算主轴是否有额外空间。其默认值为 auto ，即项目的原始大小。

2. .item {
3. flex-basis: | auto; /* default auto */
4. }

它可以设置为： width 或 height 与属性相同的值（例如。350px)，项目将占用固定空间。

4.5 flex属性

flex 属性是 flex-grow , flex-shrink 和 flex-basis 默认值为 0 1 auto 后两个属性是可选的。

2. .item {
3. flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
4. }

该属性有两个快捷方式值： auto ( 1 1 auto ) 和 none ( 0 0 auto )。

建议首先使用此属性，而不是单独编写三个单独的属性，因为浏览器将计算相关值。

4.6 align-self属性

align-self 属性允许单个项具有与其他项不同的对齐方式，并且可以被覆盖。 align-items 属性默认值为 auto ，表示父元素的继承。 align-items 属性（如果没有父元素）是等效的 stretch 。

2. .item {
3. align-self: auto | flex-start | flex-end | center | baseline | stretch;
4. }

财产可能会6价值观auto，其他都是相关的align-items属性相同。