flex布局属性（弹性布局（Flex布局）完全指南）
弹性布局（Flex布局）完全指南
Flex布局是一种CSS3的布局模式，它让你更轻松地设计复杂的页面布局。它的特性包括：自适应宽度，对齐方便，支持任意方向的布局等，被Web开发者称为是CSS中最强大的工具之一。本篇文章将详细介绍Flex布局的四个基本属性及其其他属性，以及它如何让你的页面更加高效而灵活。
1.Flex容器的基本属性
在使用Flex布局时，我们需要先定义一个Flex容器，以下是Flex容器的四个基本属性。
1.1flex-direction:设置主轴方向
通过flex-direction属性，我们可以设置一个flex容器内项目排列的方向。它可以有四个值可选：row（默认值）、column、row-reverse、column-reverse。若设为row，则flex容器内项目默认在一行中，从左到右排布。
若设为column，则flex容器内项目默认在一列中，从上到下排布。
若设为row-reverse，则flex容器内项目默认在一行中，从右到左排布
若设为column-reverse，则flex容器内项目默认在一列中，从下到上排布。
1.2justify-content:设置主轴对齐方式
通过justify-content属性，我们可以设置flex容器内项目在主轴上的对齐方式。它可以有五个值可选：flex-start（默认值）、flex-end、center、space-between、space-around。若设为flex-start，则flex容器内项目将在主轴起点处对齐。
若设为flex-end，则flex容器内项目将在主轴终点处对齐。
若设为center，则flex容器内项目将在主轴中间对齐。
若设为space-between，则flex容器内项目将在主轴上平均分配空间。
若设为space-around，则flex容器内项目将在主轴上平均分配空间，项目与项目之间还会保留空区间。
1.3align-items:设置交叉轴对齐方式
通过align-items属性，我们可以设置flex容器内项目在交叉轴上的对齐方式。它可以有五个值可选：stretch（默认值）、flex-start、flex-end、center、baseline。若设为stretch，则flex容器内项目会被拉伸，填满整个容器的高度或宽度，代替标准的对齐。
若设为flex-start，则flex容器内项目在交叉轴起点处对齐。
若设为flex-end，则flex容器内项目在交叉轴终点处对齐。
若设为center，则flex容器内项目在交叉轴中间对齐。
若设为baseline，则flex容器内项目在交叉轴上以其基线对齐。
1.4flex-wrap:设置是否换行
通过flex-wrap属性，我们可以控制flex容器内项目是否换行。它可以有三个值可选：nowrap（默认值）、wrap、wrap-reverse。若设为nowrap，则不换行。
若设为wrap，则多余项目会自动换行至下一行。
若设为wrap-reverse，则多余项目会自动换行至上一行。
2.项目的基本属性 在flex容器内的每个项目都有自己的属性，以下是项目的常用属性。2.1order:设置排列顺序
通过order属性，我们可以重新定义flex容器内项目的排列顺序。它的默认值为0，可以设置为任意的正负值。若数值加负号，则项目排列将倒序。
2.2flex-grow:设置项目的扩展比例
通过flex-grow属性，我们可以设置项目的扩展比例。它的默认值为0，表示不扩展。如果所有项目的flex-grow的值都是1，则它们会等分剩余的空间。若一个项目的flex-grow值为2，另一个项目的为1，则前者扩展的比例是后者的2倍。
2.3flex-shrink:设置项目的收缩比例
通过flex-shrink属性，我们可以设置项目的收缩比例。它的默认值为1，表示空间不足时，项目将等比例缩小。若所有项目的flex-shrink值都是1，则它们将等比例缩小，单个项目不会溢出容器。
2.4flex-basis:设置项目的初始长度
通过flex-basis属性，我们可以设置项目的初始长度。它的默认值为auto。若设为数字，则项目将会占据这个比例的空间。
若设为px，则项目的长度为固定值。
若设为auto，则项目初始长度为自己内容的长度。
2.5flex:综合属性
flex这个属性的作用是将flex-grow,flex-shrink,flex-basis三个值设置在一行里。若指定一个值，则是指flex-grow的值；若指定两个值，则前一个值是flex-grow的值，后一个是flex-shrink的值。若指定三个值，则前者是flex-grow的值，中间是flex-shrink，后者是flex-basis。如：flex:21200px;
3.其他属性3.1align-self:单个项目的交叉轴对齐方式
通过align-self属性，我们可以设置单个项目的交叉轴对齐方式。它的值与align-items属性相同，但是它只会影响单个项目，而不会影响整个容器。3.2flex-flow:综合属性
flex-flow是flex-direction与flex-wrap属性的简写形式。第一个值是flex-direction属性的值，第二个值是flex-wrap属性的值。如：flex-flow:columnwrap-reverse;
3.3justify-items:设置单个项目在主轴上的对齐方式
通过justify-items属性，我们可以设置单个项目在主轴上的对齐方式。它的五个值同justify-content属性，但是它只会影响单个项目，而不会影响整个容器。3.4align-content:设置多行项目的交叉轴对齐方式
通过align-content属性，我们可以设置多行项目在交叉轴上的对齐方式。它的五个值同align-items属性，但是它只有在容器内有多行项目时才有用。若设为stretch，则多行项目会被拉伸，填满整个容器的高度或宽度，代替标准的对齐。
结语 通过Flex布局，我们可以轻松设计一个复杂而富有创意性的页面。这一全面的指南阐述了Flex布局的四个基本属性及其其他属性，以及项目的基本属性和其他属性。相信你已经理解并掌握了关于Flex布局的所有重要知识，开始探索这个强大工具吧。
