flex布局

概述

通常我们进行元素组件得布局的时候采用的方式就是栅格grid，但是很多时候只是想要某一个组件进行水平居中了，垂直居中了。

你是否遇到这样的问题，两个组件要进行并排显示，一个组件的宽度大小是固定的，另外一个是不固定的，也就是如果浏览器的大小发生变化，固定组件是不改变的，但是自由组件要随浏览器的变化而进行变化。这个时候采用css的grid布局可以，但是感觉大材小用。这个时候最合适的个人认为就是flex布局。（当然你也可以采用dispaly：inline-block、float、position来进行排版实现，但是这些样式需要进行计算，有的会自动换行问题比较麻烦）

为了解决html文档流的排版问题，2009年W3C引入了flex布局。Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

基本概念

这里这边引用一个阮一峰老师的介绍(Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com))

1、容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

2、项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

这里的容器就是我们的父元素组件，项目就是子元素组件。

容器配置（父元素组件）（display：flex）

1、flex-direction：设置容器主轴线的方向,
2、flex-wrap：设置是否换行，每换一行意味着会多一条主轴线
3、justify-content：设置主轴方向上的项目的对齐方式 
4、align-items：设置交叉轴方向上项目的对齐方式
5、align-content：多轴线对齐方式
6、flex-flow：是flex-direction和flex-wrap的混合

// 实现水平垂直居中
.class {    
    display: flex;    
    flex-direction: row;    
    justify-content: center;    
    align-items: center
}

项目配置（子元素组件）

1、order：定义项目在容器中的排列顺序    
2、flex-grow：定义项目的放大比例    
3、flex-shrink：定义了项目的缩小比例    
4、flex-basis：定义了在分配多余空间之前，项目占据的主轴空间  （感觉像width，优先级比较高）
5、align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
6、flex：flex-grow、flex-shrink、flex-basis三个属性的缩写。

如果详细了解可以看看阮一峰博客说明（Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)）；

如果想了解关于grid栅格的详细说明，可以看这篇博客（CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)）