弹性布局课堂笔记

弹性布局

弹性布局说明

弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。

弹性布局基本概念

1. 容器： 需要添加弹性布局的父元素；
2. 项目：弹性布局容器中的每一个子元素，称为项目；

弹性布局的基本方向

1. 主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；
2. 交叉轴： 与主轴垂直的另一方向，称为交叉轴。

弹性布局的使用

1. 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；
2. 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；
3. display:flex; 容器添加弹性布局后，显示为块级元素；
   display:inline-flex; 容器添加弹性布局后，显示为行级元素；
4. 设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

代码案例

<div id="div">
    <div class="div