CSS Flex布局

经过这一段时间的学习，我发现flex布局是我目前的薄弱之处，也是相对重要的部分。

首先，先是了解概念：

基本概念：采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。这三条轴分别为水平主轴（main axis） 垂直交叉轴（cross axis）和项目默认沿主轴排列。

定义及其作用：

Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，它能够更加高效方便的控制元素的对齐、排列，可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的，控制元素在页面的布局方向，按照不同于DOM所指定排序方式对屏幕上的元素重新排序。

容器属性：

flex-direction  决定主轴的方向（即项目的排列方向）

 效果：

 flex-wrap 定义如果在一条轴线排不下，如何换行

 效果：

 flex-flow 复合属性：是flex-direction和flex-wrap属性的简写形式

justify-content  定义项目在主轴上的对齐方式

 效果：

 align-items  定义项目在交叉轴上如何对齐

效果：

align-content   定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 

 效果：

项目属性

order 定义项目的排列顺序，数值越小排列越靠前，默认为0 

效果：

 

 flex-grow  定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

 效果：

flex-shrink  定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

 

 效果

 flex-basis  定义在分配多余空间之前，项目占据的主轴空间

 效果

flex   是复合属性，代表flex-grow, flex-shrink 和 flex-basis的简写 

align-self   定义交叉轴上的对齐方式

 效果

 以上就是我对flex布局的所有知识整理，希望能对自己的记忆有所帮助。