flex弹性布局详细介绍

这里提供一个可以边学习边玩的flex学习网站：弹性盒青蛙

一、Flex布局是什么？

Flex布局是指弹性布局，其中Flex是Flexible Box的缩写，用来为盒状模型提供最大的灵活性。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文将介绍几种常见属性使用方法，以后也将不断更新补充（也欢迎大家一起在评论区补充或私聊我）。

二、属性

1. justify-content 属性

用于（水平）对齐弹性容器的项目，其值可以是：flex-start(居左),flex-end(居右),center(居中),space-between（靠边的等间距展开）,space-around（等间距展开）;
如：justify-content:space-around

如：justify-content:space-between

2. align-items属性

用于（垂直）对齐弹性容器的项目，其值可以是：flex-start(居上),flex-end(居下),center(居中),baseline（容器基线处）,stretch（拉伸以适应）;
如：align-items:flex-end;

3. flex-direction属性

用于决定项在容器中的放置方向，其值有：row(文本方向)、row-reverse（文本方向相反）、column（从上到下）、column-reverse（从下到上）。

使用flex-direction:row-reverse之后就变成了

注意，当方向设置为反转的行或列时，开始和结束也会反转，垂直和水平方向也要随着改变。具体如下：

要使得上图青蛙对应进入相同颜色盒子应该：flex-direction:row-reverse;justify-content:flex-end;变化后如下：

4. order属性

根据青蛙的睡莲花重新排序,其设置为正整数值或负整数值 （-2， -1， 0， 1， 2）

flexbox盒中的红色盒子设置属性order:-3，则变为：

5. align-self属性

跟父级盒子中align-items做区分，align-self是设置子项目不同于父级盒子的垂直布局
原青蛙布局如下图，随后将flexbox盒中的黄色盒子样式为：order:1;align-self:flex-end; 就可以让青蛙与盒子对应的颜色一致。

6. flex-wrap 属性

nowrap（每项目都在一条线）、wrap（项目分行）、wrap-reverse（项目反向分行）。

7. flex-flow属性

flex-direction、flex-wrap这两个属性经常一起使用，因此创建了速记属性flex-flow来组合它们。此速记属性接受用空格分隔的两个属性的值。如：flex-flow:column wrap

8. align-content属性

用来设置多行之间的间距。此属性采用以下值：flex-start（垂直方向靠顶）、flex-end（垂直方向靠底）、center（垂直方向居中）、space-between（各项目垂直间距相等，靠边）、space-around（各项目垂直间距相等）、stretch（拉伸线条以适合容器）

三、综合练习

代码：

justify-content:center;
align-content:space-between;
flex-flow:column-reverse wrap-reverse;