弹性盒布局

兼容性: ie9(ie10)以上可以用   一般用在移动端

概述

==浏览器内置的，实现多行多列布局，但是 最适用于一行多列布局==

Flex布局主要思想是提供一个更加有效的方式制定、调整和分布一个==容器==里的==项目==布局。 使容器有能力改变项目的大小、排列方向、对齐等，以最佳方式填充可用空间（因此可以适应设备屏幕大小的变化）

相关概念

• Flex容器：设置值为 flex 或 inline-flex ，该容器会成为 Flex容器 Flex项目：该容器下的子元素，包括 文本节点，伪元素。 主轴 侧轴 主（侧）轴起点 主（侧）轴终点

• 注

  • 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

  • 设为Flex布局以后，容器的 column-*将失效，项目的==float、clear和vertical-align==属性将失效写在弹性父盒子身上的属性 

写在弹性父盒子身上的属性

声明弹性盒：display:flex;

修改主轴方向

默认的主轴方向是水平，交叉轴方向是垂直 

flex-direction:row水平(默认值)/column(垂直)/row-reverse（水平，但是首尾颠倒）/column-revserse(垂直，首尾颠倒);

设置主轴方向的排列方式

justify-content:fle