Flex布局-（比浮动和定位更方便的布局方式）

一、什么是Flex布局

Flex是Flexible Box的缩写，顾名思义就是“弹性布局”，用来为盒装模型提供最大的灵活性。

个人尝试使用后比浮动用来做页面定位好许多。配合定位非常nice。

• 任何一个容器都可以用作 flex 布局 （display:flex;）
• 行内元素也可以使用 flex 布局 （display:inline-flex;）
• 需要注意的是，设为flex布局以后，子元素的float、clear和vertical-align属性将失效

div{
   
  display:flex;
  display:inline-flex;
}

二、容器的概念

• 当一个div设置display：flex之后， 这个div下的所有的子元素自动会成为成员。

• 容器默认存在两根轴

  其中开始的位置叫做 start 结束的位置叫end

  • 水平的主轴

  • 垂直的交叉轴

三、容器的属性

flex-direction. 决定主轴的方向

flex-wrap 决定是否换行

flex-flow flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap。

justify-content 在主轴上的对齐方式

align-items 在交叉轴上如何对齐

salign-content 多根轴线的对齐方式

1. 主轴的方向 flex-direction

• row： 水平方向对齐（默认值）
• row-reverse: 反向的水平方向对齐 （起点在右边）
• column: 主轴为垂直方向，起点在上沿
• column-reverse: 主轴为垂直方向，起点在下沿

div