Flex使用教程
1. flex-direction
该属性决定元素的排列方向，有4个值：
1、row（默认，主轴为水平方向，起点在左端）
2、row-reverse（主轴为水平方向，起点在右端）
3、column（主轴为垂直方向，起点在上边）
4、column-reverse（主轴为垂直方向，起点在下边）
2. align-items
该属性是定义子元素的对齐方式，有5个值：
1、center（垂直居中对齐）
2、flex-start（顶部对齐）
3、flex-end（底部对齐）
4、stretch（默认值，如果项目未设置高度或设为auto，将占满整个容器的高度）
5、baseline（项目的第一行文字的基线对齐）
3. align-content
该属性定义了多行的对齐方式，只有一行不起作用，有6个值：
1、center（多行元素垂直居中对齐）
2、flex-start（顶部对齐）
3、flex-end（底部对齐）
4、stretch（默认值，将占满整个容器的高度）
5、space-between（以元素两边对齐）
6、space-around（所有子元素间隔距离相等）
4. justify-conetnt
该属性定义了在主轴上的定义方式，根据flex-direction不同而不同，它有5个值：
1、center（居中对齐）
2、flex-start（默认值，左对齐）
3、flex-end（右对齐）
4、space-between（两端对齐，元素之间的间隔都相等）
5、space-around（每个元素两侧的间隔相等。元素之间的间隔比元素与两边边框的间隔大一倍）
5. flex-wrap
该属性定义元素一行排不下如何换行，有3个值：
1、nowrap（默认，不换行）
2、wrap（换行，第一行在上方）
3、wrap-reverse（换行，第一行在上方）
6. flex-flow
该属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
格式： flex-flow: || ;
参考网址
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/223663.html原文链接：https://javaforall.net
