移动响应式布局(二)

三、Flex弹性布局

0x1 Flex概念

1、弹性盒模型
它能够更加高效方便控制元素对齐、排列,更重要的是能够自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的。

2、变成弹性盒模型的步骤
Display: flex;
注:Display: inline-flex; 则父容器不会满屏显示,会变成inline的样式。

0x2 Flex 容器属性

垂直水平居中对齐:
justify-content:center;
align-items:center;

0x3w Flex 子元素属性

四、Flex基础