LV1之------弹性布局

LV1之------弹性布局

弹性布局。取代我们之前“display+float+position”的布局形式，采用全新的弹性布局。
一， 弹性布局简介
弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持

• 了解两个基本概念，接下来会频繁提到：

① 容器： 需要添加弹性布局的父元素；

② 项目： 弹性布局容器中的每一个子元素，称为项目；

• 了解两个基本方向，这个牵扯到弹性布局的使用：

① 主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；

② 交叉轴： 与主轴垂直的另一方向，称为交叉轴。
参考阮一峰老师文章：Flex 布局教程：语法篇

二、使用注意点：
① 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
② flex-flow：row nowrap
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap，决定了布局流
③ flex容器的一个默认属性值:align-items: stretch;
所以常 用align-items: flex-start;
④ flex的三个参数
flex: 1 0 auto;
参数1：flex-grow
参数2：flex-shrink
参数3：flex-basis