css flex布局简单总结（学习笔记）

前言

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，多列自适应布局、水平垂直居中等就不容易实现。2009年，W3C提出了一种新的方案—Flex布局，可以简便、完整、响应式地实现各种页面布局，它颠覆了传统的布局方式，将成为未来布局的首选方案。

概念

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。Flex布局的三个核心概念分别是轴向（flex-direction、flex-wrap）、对齐（justify-content、align-item）、弹性（flex-grow、flex-shrink）。

.box{
	display:flex;
	}

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

三大核心

一、轴向

传统布局方式和人类书写是类似的，“从上到下，从左到右，写不下就换行”，但经过这些年的发展，我们发现这样的方式虽然很好理解但不够灵活，为了让布局既可以从下到下，又可以从右到左，引入了轴的概念。让布局的方向沿着主轴依次排列如果要换行则沿着交叉轴的方向换行

flex-direction

用于修改主轴方向，有常用四种属性值，分别是
row(默认) 从左往右
row-reverse 从右往左
column 从上往下
column-reverse 从下往上

flex-wrap

用于修改交叉轴方向，有常用三种属性值，分别是
nowrap(默认) 禁止换行
wrap 当主轴为左右方向时，交叉轴为从上到下；当主轴为上下方向时，交叉轴为从左到右
wrap-reverse 与wrap相反

实例

当flex-wrap设置为nowrap时，项目会强行等分容器宽度从而不换行。如图所示

设置与传统布局一样的从上到下从左到右的布局。如图所示

其他布局

这样主轴和交叉轴的排列组合有4*2=8种

二、对齐

justify-content与align-items默认分别处理项目横轴（左右），纵轴（上下）的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。

注：下列属性值是在默认条件下进行讨论的。

justify-content

控制主轴上的对齐方式，有常用四种属性值，分别是
flex-start(默认) 左对齐
flex-end 右对齐
center 水平居中
space-between 左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。

align-items

控制交叉轴上的对齐方式，有常用四种属性值，分别是
flex-start 上对齐
flex-end 下对齐
center 垂直居中
stretch(默认) 如果项目没设置高度，或高度为auto，则占满整个容器。设置高度时，效果与flex-start一样

实例

水平垂直居中

三、弹性

容器上的属性已经把布局完成得差不多了。接下来开始设置项目元素的宽度和伸缩度。

flex-basis

flex-basis和传统width是有所不同的，它用于计算元素的初始宽度，也就是还没考虑伸缩之前的宽度。
flex-basis为auto时 初始宽度为元素内容大小或者设置的宽度值
flex-basis为像素值时 初始宽度为flex-basis的值
flex-basis为百分比时 初始宽度为占父容器的比例
flex-basis为0或0%时 初始宽度为0
当它和width同时存在时优先级是大于width的，但最后计算的尺寸依然会受限于min-width或是max-width。

flex-grow

默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会占满剩余所有空间。

flex-shrink

默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

flex

flex即flex-grow、flex-shrink和flex-basis的简写，默认值分别是0 1 auto ，其中后两个是可选属性。

实例

设置三个子元素1：2：1占满整个容器

设置两边定长，中间自适应的三列布局

参考：
https://www.cnblogs.com/echolun/p/11299460.html
https://blog.csdn.net/jnshu_it/article/details/102778308