display: flex; Flex布局的详细介绍

前言

display：flex Flex布局在页面布局中应用的非常广泛，它能轻易的实现某些效果，但相对来说属性概念较多，想要掌握Flex布局并在项目中灵活运用也不是那么容易，在此我就来总结一下Flex布局的常用属性概念和用法，希望对你学习掌握有帮助。

一、什么是Flex布局？

Flex布局是2009年W3C提出了一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

注意:

• 在webkit内核的浏览器上使用要加前缀 display:-webkit-flex;
• 行内元素也可以使用Flex布局。

.box {
  display: inline-flex; //将对象作为内联块级弹性伸缩盒显示
}
//兼容性写法
.box {
  display: flex || inline-flex;
}

二、基本概念

设置display: flex;的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。容器默认存在两根主轴：水平方向主轴和垂直方向交叉轴，默认项目按主轴排列。注意，主轴和交叉轴都有方向、起始位置、结束位置，决定着项目的排列方向。

三、容器属性

3.1<