html div 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属性定义项目在