关于Flex Css 这一篇就够了

了解flexbox属性项最简单的方法是将flexbox属性分成两个组：

flex容器属性

flex item 属性

下面我们将分组来解释他们是如何影响布局。

flex容器属性

• flex-direction

这个属性主要设置flex容器的主轴方向，指定flex项目在flex容器中的排列方式。flex容器的主轴方向主要有水平和纵向两种。

flex-direction:row;

从左向右排在一行

flex-direction ：column ;

按列排列

flex-direction ：row-reverse ;

反向排列

• flex-wrap

flex项目在flex容器中默认是只显示一行。如果希望控制flex项目在flex容器中按一行或多行排列，可以使用flex-wrap
属性。

flex-wrap : nowrap ;

根据屏幕自动缩放大小

flex-wrap : wrap ;

根据每个子item动态布局

• flex-flow

这个属性是flex-direction和flex-wrap属性的简写。
默认值：row nowrap

• justify-content

属性用来指定flex项目在flex容器沿着主轴在当前行的对齐方式。

justify-content: flex-start;

flex项目向flex容器的左边靠齐。

justify-content: flex-end;

flex项目向flex容器的右边靠齐。

justify-content: center;

Flex项目在flex容器中居中对齐。

justify-content:space-between

Flex项目之间间距相对，第一个和最后一个flex项目向flex容器的边缘对齐.

justify-content:space-around

Flex项目前后相等的空间显示在flex容器中。第一个Flex项目左边的间距和最后一个Flex项目右边的间距是其他相相邻flex项目之间间的一半。

• align-items

Flex项目在容器侧轴对齐方式，类似于justify-content
，只不过不是水平方向，而是纵向。这个属性可以设置所有flex项目对齐方式，并且包括匿名元素。

align-items:stretch;

Flex项目沿着flex容器侧轴方向填满整个flex容器高度（或宽度）

align-items:flex-start;

Flex项目排列在flex容器侧轴开始处。

align-items:flex-end;

Flex项目排列在flex容器侧轴结束处

align-items:center;

Flex项目排列在flex容器侧轴中间处

align-items:baseline;

Flex项目按文本基线在flex容器侧轴中排列。

• align-content

align-content
属性将flex容器内的行在flex容器中侧轴排列方式，类似于justify-content,在主轴方向的单个Flex项目对齐方式,Flex项目在flex容器中多行显示行，其多行在flex容器的侧轴方向对齐方式。

align-content:stretch;

Flex项目行在flex容器侧轴按分布式空间排列，

align-content:flex-start;

Flex项目在flex容器侧轴开始处排列。

align-content:flex-end;

Flex项目在flex容器侧轴末尾处排列。

align-content:center;

Flex项目行沿flex容器侧轴中间排列。

align-content:space-between;

Flex项目行与行之间间距相等，并且flex项目行第一行排在flex容器侧轴开始之处，flex项目行最后一行排在flex容器侧轴末尾之处。

align-content:space-around;

Flex项目行的上下间距相等，并且沿flex容器侧轴排列。
Flex项目行上下间距相等，并且flex容器第一行距flex容器侧轴开始处间距是flex项目行与行之间间距一半。同时项目行最后一行距flex容器侧轴末尾处间距是flex项目行与行之间间距一半

Flex项目属性

• order

属性是用来控制flex容器中flex项目的排列顺序。默认情况flex项 目在flex容器的顺序是flex项目出现的顺序。

• flex-grow

这个属性用来指定 flex项目的放大比例，其决定了flex项目相对flex容器自由空间进行放大。

• flex-shrink

flex-shrink属性用来指定flex项目缩小比例。决定了flex项目将相对于其他flex项目在flex容器空间不足之下自动收缩。

• flex-basis

这个属性和width和height属性相同，用来指定flex项目的大小。

• flex

这个属性是flex-grow、flex-shrink和flex-basis属性的简写

• align-self

使用align-self属性可以指定flex项目自身的对齐方式或者使用align-items来指定单个flex项目