弹性布局

1.弹性布局简介
弹性布局，又称为“flex布局”，是W3C于2009年推出的一种布局方式，可以简单、快速、响应式的实现各种布局页面，取而代之的是“position+display+float”，现在已经得到了所有主流浏览器的支持。

了解两个基本概念：

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

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

了解两个基本方向：

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

② 交叉轴： 与主轴垂直的另一方向，称为交叉轴。

 2 弹性布局的使用

① 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；

② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；

③ display:flex; 容器添加弹性布局后，显示为块级元素；

display:inline-flex; 容器添加弹性布局后，显示为行级元素；

④ 设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

 

 

 justify-content属性定义了项目在主轴上的对齐方式。  此属性与主轴方向息息相关。

主轴方向为：row-起点在左边，row-reverse-起点在右边， column-起点在上边，column-reverse-起点在下边

           flex-start（默认值）： 项目位于主轴起点。

           flex-end：项目位于主轴终点。

           center： 居中

           space-between：两端对齐，项目之间的间隔都相等。(开头和最后的项目，与父容器边缘没有间隔)

           space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目，与父容器边缘有一定的间隔)

示例：导航条

css部分

 效果图