这篇文章主要介绍“CSS中flex布局实例分析”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS中flex布局实例分析”文章能帮助大家解决问题。
1. 浏览器 flex 兼容申明
dispaly:flex;
display:-webkit-flex;
display:-ms-flex;
display:-moz-flex;
display:-o-flex;
运用flex.min.css，可以让移动端主流浏览器兼容flex，适用于（jquery/zepto/angular框架）
运用data-flex.min.css，可以让移动端主流浏览器兼容flex，适用于（reactjs框架）
2.flex含义
div申明 display:flex，这个div变成了一个flex容器。它的所有子元素都是Flex项目。
子元素不能够使用，float、vertical-align、clear这几个属性
3.flex属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
一共六大属性
flex-direction 元素选择X轴还是Y轴排列 值包含 row（默认）、row-reverse、column、column-reverse （行，反行，列，反列）
justify-content 从轴线那个位置开始 值包含 flex-start（默认居左）、flex-end、center、space-between、space-around （从轴线左边（起始）开始 、从轴线末尾开始、从中间开始、两端对齐、中间对齐）
flex-wrap 填满一轴后的排列方式 值包含 nowrap（默认 不换行）、wrap、wrap-reverse （不换行、换行、反转换行）
align-items 属性定义项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
justify-content 属性定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
align-content: 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
实际中垂直居中经常用到
flex-align
flex-align:center;
-ms-flex-align:center;
-webkit-flex-items:center;
-webkit-box-align:center;
-webkit-box-align: center;
-moz-box-align: center; 垂直 水平 居中 父元素反复申明流布局
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
关于“CSS中flex布局实例分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
