flex 容器: 父元素设置了display: flex
flex 项目: flex容器内的子项目
flex 容器属性
flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
flex-direction : 属性控制flex项目沿着主(横轴)轴的排列方向
有四个值: flex-direction: row(从左往右排列) || column (从上往下)|| row-reverse || column-reverse
flex-wrap: wrap(换行排列) || nowrap(不换行排列) || wrap-reverse(换行 顺序反过来)
flex-flow: 是flex-direction flex-wrap 两个属性的速记属性
justify-content: 定义了在主轴的对齐方式
有5个值 : flex-start(左对齐) || flex-end(右对齐) || center(居中对齐) || space-betwee(两端对齐,除了第一个和最后一个flex项目的两端对齐) ||
space-around(每个flex项目具有相同的空间)
align-items 类似justify-content属性 它是控制纵轴的
有 flex-start(从顶部对齐) || flex-end(底部对齐) || center(居中对齐
) || stretch(让所有的flex项目高度和flex容器高度一样) || baseline(沿着他们自己的基线对齐)
align-content 适用于多行flex容器排列效果和align-items值一样,但除了baseline属性值
flex项目属性
order || flex-grow || flex-shirnk || flex-basis
order: flex 项目会根据order的值重新从低到高排序, 默认为0
flex-grow 和 flex-shirnk 控制flex项目在容器有多余空间如何放大和缩小,在没有额外的空间又如何缩小。他们可能接受0 或比0更大的任何正数
flex-grow 默认情况为0 表示不会增长 flex-shirnk默认值为1 是打开的
flex-basis 可以指定flex项目的初始大小 默认值是auto 可以取任何用于width 属性的任何值, flex-basis: 0px 不能写成 flex-basis: 0
flex 速记
flex 是flex-grow flex-shirnk flex-basis 三个属性的速记
flex: auto 与 flex: 1 1 auto 相同
flex: 1 与 flex: 1 1 0 相同
align-self 控制自己的对齐方式
有 auto || flex-start || flex-end || center || baseline || stretch
flex-end 将目标项目对齐到纵轴的末端
center 将目标项目对齐到纵轴的中间
stretch 将目标项拉伸
baseline 将目标项沿着基线对齐
auto 将目标项设置为父元素的align-items 的值 没有父元素的话 就设置为stretch
相对flex项目 和绝对flex项目
相对flex项目内的间距是根据它的内容大小来计算的
绝对flex 只根据flex属性来计算
当在flex项目上使用margin: auto 值为auto的方向会占据所有剩余的空间 但是使用margin: auto 是 justify-content