css flex布局的使用

felx弹性布局

display:flex;

属性值

flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。默认为水平方向 row， column 值设置垂直方向。如：flex-direction: row;

flex-wrap 属性规定是否应该对 flex 项目换行。默认不换行nowrap，wrap 规定行装不下就换行。如：flex-wrap: wrap;

flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。如：flex-flow: row wrap;

justify-content 属性用于对齐 flex 。

center值将 flex 项目在容器的中心对齐，

flex-start 值将 flex 项目在容器的开头对齐（默认），

flex-end 值将 flex 项目在容器的末端对齐，

space-around 值显示行之前、之间和之后带有空格的 flex 项目，

space-between 值显示行之间有空格的 flex 项目。

align-items 属性用于垂直对齐 flex 项目。

center 值将 flex 项目在容器中间对齐，

flex-start 值将 flex 项目在容器顶部对齐，

flex-end 值将弹性项目在容器底部对齐，

stretch 值拉伸 flex 项目以填充容器（默认），

baseline 值使 flex 项目基线对齐，

学习了这些我们来一起简单的使用一下吧！

实现居中

width: 300px;

display: flex;

justify-content: center;

align-items: center;

 

 

子元素（项目）

flex 容器的直接子元素会自动成为弹性（flex）项目。

order 属性规定 flex 项目的顺序。默认为0；值为数字 1 2 3 4 5 6... 是多少就排在第几个。

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。默认为0，值为数字。

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

flex-basis 属性规定 flex 项目的初始长度。

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

align-self 属性规定弹性容器内所选项目的对齐方式。

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。