Flex布局⼦元素对齐⽅式
display
display: flex | inline-flex ;
display确定是否启⽤flexbox布局，flexbox布局下的⼦元素⽆论是内联元素的还是块状元素都会flex流的布局⽅式进⾏空间分配flexDirection
flexDirection: row | row-reverse | column | column-reverse;
⽤来声明主轴的⽅向和在主轴上排列的⽅向
flex布局对齐方式
values description
row（默认）⼦元素在ltr排版⽅式下从左向右排列；在rtl排版⽅式下从右向左排列
row-reverse与row排列⽅向相反，在ltr排版⽅式下从右向左排列；在rtl排版⽅式下从左向右排列
column类似于row但是是顶部到底部 column-reverse：类似于row-reverse但是是底部到顶部
flexWrap
flexWrap: nowrap | wrap | wrap-reverse;
flex-wrap属性定义如果主轴上不下如何换⾏。
values description
nowrap（默认)⼦元素以单⾏显⽰，在ltr下⾃左向右；在rtl下⾃右向左
wrap⼦元素可以以多⾏显⽰，在ltr下⾃左向右；在rtl下⾃右向左
wrap-reverse⼦元素可以以多⾏显⽰，与wrap相反
justifyContent
justifyContent: flex-start | flex-end | center | space-between | space-around;
主轴⽅向上的对齐⽅式
values description
flex-start（默认）⼦元素从⼀⾏的起始处开始放置
flex-end⼦元素会从⼀⾏的结尾处开始放置
center⼦元素会集中在⼀⾏的中央
space-between⼦元素会被均匀的分布在⾏内，两端与⽗容器⽆间隙
space-around⼦元素会均匀的按照等距离分布在⼀⾏
values description
效果如下图
alignItems
alignItems: flex-start | flex-end | center | baseline | stretch;
与主轴垂直的⽅向成为侧轴，alignItems⽤来定义侧轴⽅向上的对齐⽅式
values description
flex-start⼦元素在侧轴起点边的外边距紧靠住该⾏在侧轴起始的边
flex-end⼦元素在侧轴起点边的外边距紧靠改⾏在侧轴结尾的边
center⼦元素会被放置在侧轴的中央
baseline⼦元素会根据他们的基线对齐
stretch（默认）在侧轴⽅向上拉伸⼦元素以致填充满flexbox容器。
效果如下图
alignContent
alignContent: flex-start | flex-end | center | space-between | space-around | stretch;
根据在侧轴上的额外空间来排列容器的⾏，alignContent与alignItems的作⽤类似，但是只对多⾏的flex布局才有效果，对单⾏布局没有效果
values description
flex-start⾏会紧靠容器的起始位
flex-end⾏紧靠容器的结束位
values description
center⾏紧靠容器的中间位
space-between每⾏会均匀分布；⾸⾏在容器起始处⽽最后⾏在容器结束处
space-around每⾏根据相同的距离均匀的分布
stretch（默认）每⾏将会伸展以占⽤剩余的空间
使⽤效果如下图
flexFlow
flexFlow: ‘flex-direction’ ‘flex-wrap’
相当于同时设置两个属性：
flex-direction: row
flex-wrap: wrap;
flex
flex: flex-grow flex-shrink flex-basis;
flex属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性， 默认值分别是"0 1 auto"，其中第⼆个和第三个参数（flex-shrink、flex-basis）是可选参数
values description
flex-grow⼀个数字，规定项⽬将相对于其他灵活的项⽬进⾏扩展的量。 默认值 0
flex-shrink⼀个数字，规定项⽬将相对于其他灵活的项⽬进⾏收缩的量。默认值 1
flex-basis项⽬的长度。合法值：“auto”、“inherit” 或⼀个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。默认值 auto
宽度 ＝ 弹性宽度 * ( flexGrow / sum( flexGorw ) )
alignSelf
alignSelf:'auto | flex-start | flex-end | center | baseline | stretch';
alignSelf属性允许单个元素有与其他元素不⼀样的对齐⽅式，可覆盖alignItems属性。默认值为auto，表⽰继承⽗元素的alignItems属性，如果没有⽗元素，则等同于stretch。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。