这里提供一个可以边学习边玩的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（拉伸线条以适合容器）
三、综合练习
文章来源：https://www.toymoban.com/news/detail-414072.html
代码：文章来源地址https://www.toymoban.com/news/detail-414072.html
justify-content:center;
align-content:space-between;
flex-flow:column-reverse wrap-reverse;
到了这里，关于flex弹性布局详细介绍的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
