flex布局

参考链接： https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb写的非常好

一、为什么要引入flex弹性布局？

• css标准中为我们提供了三种布局：标准文档流、浮动布局和定位布局。
• 但是这些布局在使用时回去缺少语义并且不够灵活。
• 此时就出现了flex布局，可以通过1个属性就能优雅的实现子元素居中或均匀分布，甚至可以随着窗口缩放自动适应。

二、什么是flex布局？

• flex的核心概念是容器和轴。容器包括外层的父容器和内层的子容器。轴包括主轴和交叉轴。
• 父容器可以统一设置子容器的排列方式，子容器可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。父容器具有justify-content和align-items两个属性，justify-content属性决定子容器沿主轴的排列方式；align-items属性决定子容器沿交叉轴的排列方式。
• 子容器具有flex和align-self两个属性。flex的值决定了子容器的伸缩比例。align-self可以单独设置子容器沿交叉轴排列的方式。该属性的可选值与父容器的align-items属性完全一致。如果两者同时设置，就以子容器的align-self属性为准。那么轴本身的方向怎么设置呢？flex-direction属性决定主轴的方向，交叉轴的方向由主轴确定。

    

   补充：  

      当给元素设置display:flex时，它就是flex容器，它的所有子元素自动成为容器成员，即子容器，称为flex项目
　　容器所具有的属性：display、flex-direction、flex-wrap、flex-flow、justify-content、align-items、align- content
　　项目所具有的属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self

三、具体的属性值

justify-content属性用于定义沿着主轴方向子容器的排列方式，包括五个属性值：

• flex-start：起始端对齐；
• flex-end：末尾端对齐；
• center：居中对齐；
• space-around：子容器沿主轴均匀分布，位于收尾两端的子容器到父容器的距离是子容器间距的一半；
• space-between：子容器沿主轴均匀分布，位于收尾两端的子容器和父容器相切

align-items：定义沿着交叉轴方向如何分配子容器的间距，包括五个属性值：

• flex-start：起始端对齐；
• flex-end：末尾端对齐；
• center：居中对齐；
• baseline：基线对齐，所有的子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器会与交叉轴起始端相切以确定基线。
• stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致

flex ：子容器会按照 flex 定义的尺寸比例自动伸缩，如果取值为 none 则不伸缩。

• 可以是无单位数字（如：1, 2, 3），
• 也可以是有单位数字（如：15px，30px，60px），
• 还可以是 none 关键字。表示不伸缩

align-self：沿着交叉轴方向单独设置子容器的间距，包括五个属性值：

• flex-start：起始端对齐；
• flex-end：末尾端对齐；
• center：居中对齐；
• baseline：基线对齐，所有的子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器会与交叉轴起始端相切以确定基线。
• stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致

flex-direction，包括四个属性值：

• row表示主轴的方向是向右，
• column表示向下，
• row-reverse表示向左，
• column-reverse表示向上。

注：flex布局会涉及到12个css属性，其中父容器和子容器各6个。常用的属性只有4个