CSS Flexbox 布局教程
内容提要
CSS flexbox是一种一维布局方法，可以在一条横线或竖线上排列元素。flex容器的属性包括display、flex-direction、flex-wrap、justify-content、align-items、align-content、row-gap、column-gap和gap。flex项的属性包括order、flex-grow、flex-shrink、flex-basis、flex和align-self。
关键要点
-
flexbox是一种一维布局方法，可以在横线或竖线上排列元素。
-
flex容器的属性包括display、flex-direction、flex-wrap、justify-content、align-items、align-content、row-gap、column-gap和gap。
-
flex项的属性包括order、flex-grow、flex-shrink、flex-basis、flex和align-self。
-
flex-direction定义排列方向和主轴，主轴与交叉轴的概念需要分清。
-
flex-wrap控制是否换行，默认不换行。
-
flex-flow是flex-direction和flex-wrap的缩写，默认值为row nowrap。
-
justify-content设置主轴的对齐方式，常用值包括flex-start、flex-end、center、space-between、space-around和space-evenly。
-
align-items设置交叉轴的对齐方式，常用值包括stretch、flex-start、flex-end、center和baseline。
-
align-content设置多行flex项的交叉轴对齐方式，flex项只有一行时无效。
-
gap属性设置flex项之间的间隔，row-gap和column-gap分别表示横线和竖线的间隔。
-
flex项的order属性可以改变排列顺序，默认值为0。
-
flex-basis设置flex项的大小，默认为auto。
-
flex-grow设置flex项的增长系数，默认为0，负值无效。
-
flex-shrink设置flex项的收缩指数，默认为1，0表示不可收缩。
-
flex是flex-grow、flex-shrink和flex-basis的缩写，推荐使用flex代替这三个属性。
-
align-self设置单个flex项的交叉轴对齐方式，和align-items用法相似。
