简介
什么是Flex布局
Flex是Flexible Box 的缩写，也称为弹性盒子布局。 Flex布局组成：
flex容器（flex container）flex项（flex items）主轴（main axis）交叉轴（cross axis）Flex布局的作用
在flex布局未出现前，网页布局的方式为标准流，浮动，定位等。在解决比较复杂的问题相对麻烦。【学习视频分享：css视频教程、web前端】
(相关资料图)
而flex布局可以：
Flex容器（父元素）属性
在使用flex布局之前首先定义 Flex 容器。
display:flex;
登录后复制定义 Flex 容器后可以使用相应的属性， 改变子元素的布局方式，让子元素可以自动的挤压或拉伸。
相应属性：
1. justify-content 主轴元素对齐方式2. align-items 交叉轴元素对齐方式3. flex-direction 设置主轴方向4. flex-wrap 主轴一行满了换行5. align-content 交叉轴行对齐方式6. flex-flow 同时设置 flex-direction和 flex-wrap属性
登录后复制1. justify-content
容器的justify-content属性可以设置子元素在主轴方向的对齐方式。（记得先display:flex;定义容器）
justify-content: center;//居中对齐
登录后复制justify-content: space-between;//间距在子元素之间
登录后复制justify-content: space-evenly;//主轴方向所有地方的间距都相等
登录后复制justify-content: space-around;//间距加在子元素的两侧（中间大的是两个子元素的加在一起）
登录后复制代码：
主轴对齐方式 1 2 3
登录后复制2. align-items
容器的align-items属性可以设置子元素在交叉轴方向的对齐方式。
由此我们可以设置将容器属性justify-content和 align-items 设置为居中，让元素实现完美居中。
align-items: center;//居中
登录后复制align-items: stretch;//拉伸,默认值(现有状态,这里测试去掉子级的高度)
登录后复制align-items: flex-start;//将子元素在容器顶部对齐
登录后复制align-items: flex-end;//将子元素在容器底部对齐
登录后复制代码：
交叉轴对齐方式 1 2 3
登录后复制3. flex-direction
容器的flex-direction属性可以改变flex布局的主轴方向。flex主轴方向默认为水平向右方向。如果修改主轴方向，那么交叉轴方向也会与之改变。
flex-direction: column;//主轴方向为垂直方向（从上到下）
登录后复制flex-direction: column-reverse;//主轴方向为垂直方向（从下到上）
登录后复制flex-direction: row;//主轴方向为水平方向（从左到右）
登录后复制flex-direction: row-reverse;//主轴方向为水平方向（从右到左）
登录后复制修改主轴方向后实现垂直居中：
display:flex;flex-direction: column;justify-content: center;
登录后复制4. flex-wrap
当定义flex容器之后，如果子元素过多超出主轴方向宽度，容器内的子元素会自动伸缩。 如：
弹性盒子换行 1 2 3 4 5 6 7 8 9
登录后复制解决：容器的flex-wrap属性可以让超出容器主轴方向的子元素换行显示。
flex-wrap: nowrap;//默认值，不换行flex-wrap: wrap;//换行，从上到下
登录后复制flex-wrap: wrap-reverse;//换行，从下到上
登录后复制5. align-content
容器的align-content属性可以调节子元素行的对齐方式（需要先设置换行之后）。
align-content: center;//居中对齐align-content: space-around;//间距加在子元素的两侧（中间大的是两个子元素的加在一起）align-content: space-between;//间距在子元素之间
登录后复制前三者的属性跟主轴对齐方式一样就不再赘述。
align-content: stretch;拉伸,默认值(现有状态,这里测试去掉子级的高度)
登录后复制6.flex-flow
flex-flow属性是用于同时设置 flex-direction和 flex-wrap属性的简写属性。
flex-flow: row wrap;
登录后复制Flex项（子元素）属性
我们可以设置相应属性让flex 容器的直接子元素成为弹性（flex）项目。（在使用flex布局之前首先定义 Flex 容器。）
相应属性：
1. flex-grow2. flex-shrink3. flex-basis4. flex5. align-self6. order
登录后复制1. flex-grow
使用flex-grow属性来定义弹性盒子内部子元素的放大比例（当所有子元素宽度之和小于父元素的宽度时子元素如何分配父元素的剩余空间）。
Document
登录后复制2. flex-shrink
使用flex-shrink属性来定义弹性盒子内部子元素的缩小比例（当所有子元素宽度之和大于父元素的宽度时子元素如何缩小自己的宽度）。
Document
登录后复制3. flex-basis
使用flex-basis属性来设置子元素的宽度，默认值为auto（作用跟width一样,优先级比width高，就算width在后面也会显示flex-basis）。
4. flex
使用flex属性来同时设置flex-grow、flex-shrink、flex-basis这3个属性，flex属性就是一个复合属性。 实际应用一般用复合属性。 语法：
flex: grow shrink basis;//顺序不能改变,默认值为0 1 auto;
登录后复制5. align-self
使用align-self属性设置子元素项目的对齐方式。
注意：align-self属性会覆盖容器的 align-items属性所设置的对齐方式。
Document 1 2 3
登录后复制6. order
使用order属性来定义子元素的排列顺序。
Document 1 2 3
登录后复制更多编程相关知识，请访问：编程视频！！
以上就是一文详解CSS3中的Flex布局的详细内容，更多请关注php中文网其它相关文章！
