（三）移动端前端开发-Flex弹性盒布局

一、Flex作用

• 控制元素的对其、排列。
• 可以自动计算布局内元素的尺寸。
• 控制元素在页面的布局方向。
• 对屏幕上的元素重新排序。

二、语法

• 块级元素： display : flex ;
• 行内元素： display : inline-flex ;
• 注意
  • 在webkit内核的浏览器中使用必须加上-webkit-前缀。display: -webkit-flex
  • 设为Flex布局以后，flex item的float、clear和vertical-align属性将失效。

三、属性：

1. 容器属性

1.1 flex-direction——主轴方向

• 语法：flex-direction : row | row-reverse | column | column-reserve ;
• 属性值含义：
  • row、row-reverse：主轴为水平方向，起点在左端（默认）、右端。
  • column、column-reverse：主轴为垂直方向，起点在上沿、下沿

1.2 flex-wrap——轴线排不下，换行操作

• 语法：flex-wrap : nowrap | wrap | wrap-reverse ;
• 属性值含义
  • nowrap：不换行。（默认）
  • wrap：换行，第一行在上方。
  • wrap