flex 布局

学习笔记，不专业，欢迎建议，勿喷！

flex布局是目前web开发中使用最多的布局方案：

• flex 布局（Flexible 布局，弹性布局）
• 目前特别在移动端用的最多，目前PC端也使用越来越多了

两个重要的概念：

• 开启了 flex 布局的元素叫 flex container
• flex container 里面的直接子元素叫做 flex items

设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

• flex： flex container 以 block-level 形式存在
• inline-flex： flex container 以 inline-level 形式存在

如图所示：
flex布局中没有宽、高的概念，而是主轴（main size）、交叉轴（cross size ）
主轴（main size）有开头（main start）和结尾（main end）
交叉轴（cross size ）有开头（cross start）和结尾（cross end）
整个flex布局是flex container
flex布局里面的元素是flex item

flex相关的属性：

应用在 flex container上的 CSS 属性	应用在flex items上的 CSS 属性
flex-flow	flex
flex-direction	flex-grow
flex-wrap	flex-basis