【CSS】布局属性：Flex

前面讲了几个css原生的布局属性，都是css传统布局属性。

今天来讲一下目前最主流布局属性：Flex

一、什么是Flex

Flex 是 Flexible Box 的缩写，意为"弹性布局"。

Flex布局的出现是为了弥补float、position等布局属性的不足（比如控制多个子元素的排列方式）。

Flex布局可以很方便地实现目前市面上大部分的视觉设计。

二、Flex语法

display:flex

display: flex; 表示使用flex布局进行排版。 display: inline-flex; 表示行内元素的flex布局方式。

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

flex-wrap: wrap;

flex-wrap决定子控件是否换行，怎么换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-direction: row;

flex-direction决定子控件的排列方向。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

justify-content:center;

justify-content：在主轴方向基础上，子元素水平方向上的排列方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items:center;

align-items：在主轴方向基础上，子元素垂直方向上的排列方式。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-content:center;

align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 轴线可以理解为在justify-content和align-items基础上的子元素排列。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

可以理解为：在align-items基础上的justify-content

子元素属性

上面都是针对父布局容器对子元素的排列方式，子元素可以设置哪些属性呢？

align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 轴线可以理解为在justify-content和align-items基础上的子元素排列。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

注意事项

• 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）
• 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
• flex-basis可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

三、Flex兼容性

flex不是所有浏览器都兼容，也不是所有手机都兼容，当遇到兼容问题时，需要用传统的css布局语法进行适配。

安利一个兼容性查询网站：https://caniuse.com/

Flex在各大浏览器的支持情况：

感谢阮一峰老师提供的优质教学文章： Flex 布局教程：语法篇 Flex 布局教程：实例篇