css3语法中Flex布局的基本介绍

flex是Flexible Box 的缩写，也称为弹性盒子布局，是css3语法中最大的亮点，下面编程教程网小编给大家详细介绍一个运用方法！

flex相应属性

diplay:flex //flex相关属性的默认定义

//相应属性
justify-content  //主轴元素对齐方式
align-items      //交叉轴元素对齐方式
flex-direction   //设置主轴方向
flex-wrap        //主轴一行满了换行
align-content    //交叉轴行对齐方式
flex-flow        //同时设置 flex-direction和 flex-wrap属性

justify-content

justify-content: center;//居中对齐
justify-content: space-between;//间距在子元素之间
justify-content: space-evenly;//主轴方向所有地方的间距都相等
justify-content: space-around;//间距加在子元素的两侧

align-items

align-items: center;//居中
align-items: stretch;//拉伸,默认值
align-items: flex-start;//将子元素在容器顶部对齐
align-items: flex-end;//将子元素在容器底部对齐

flex-direction

flex-direction: column;//主轴方向为垂直方向（从上到下）
flex-direction: column-reverse;//主轴方向为垂直方向（从下到上）
flex-direction: row;//主轴方向为水平方向（从左到右）
flex-direction: row-reverse;//主轴方向为水平方向（从右到左）

flex-wrap

flex-wrap: nowrap;//默认值，不换行
flex-wrap: wrap;//换行，从上到下
flex-wrap: wrap-reverse;//换行，从下到上

align-content

align-content: stretch;拉伸,默认值
align-content: center;//居中对齐
align-content: space-around;//间距加在子元素的两侧
align-content: space-between;//间距在子元素之间

flex-flow

flex-flow: row wrap;