flex布局后容器内的子元素可以认为默认是内联块元素
父级属性
属性名:flex-direction/flex-wrap/justify-content/align-items/align-content(比align-items优先级高)
flex-direction:row / row-reverse / column / column-reverse //主轴方向是哪个方向
flex-wrap: wrap / nowrap / wrap-reverse //排列元素要不要换行(默认为nowrap)
justify-content(内容对齐): flex-start(内容往轴起始位置靠) / flex-end(内容往轴结束位置靠) / center(内容往轴中间靠) / space-between (轴开头和结尾不留空,中间留空) / space-around (每个子元素之间两侧间隔一致,也就是说轴开头和结尾也会有留空) //在主轴方向的排列方式
align-items(侧轴对齐方式): flex-start(默认值) | flex-end | center | baseline(根据子元素字体的基线,让子元素字体在同一水平线上排列) | stretch (子元素没设置高度即能够生效)
align-content(多根主轴在交叉轴上的对齐方式):flex-start | flex-end | center | space-between | space-around | stretch(默认值,根据内容撑开,如果子元素没有定高度的话) align-content优先级比align-items高
flex成员属性
成员属性: order/flex-grow/flex-shrink/flex-basis/flex(前三个属性的缩写)/align-self
order(给的权重越低这个元素越靠前排列)
flex-grow(元素是否放大,默认不放大,也就是flex-grow: 0)
flex-shrink(元素缩小,默认值为1)
flex-basis(默认是auto, 如果是0,可以认为子元素的width属性没生效,也就是可以认为是内联元素而不是内联块级元素)
flex: flex-grow flex-shrink flex-basis
flex: auto(可以放大,可以缩小),实际上就是flex: 1, 1, auto
flex: 0 (0 , 0 , 0)
flex: 1 (1, 1, auto)
flex默认是flex: 0 1 auto
flex: none(0 0 auto)
要使子元素均分(子元素没设置宽度: 只有flex为1才会有效, 子元素设置了宽度: flex为1和auto有效) align-self: 当个在侧轴的对齐方式
align-item: stretch 和 align-content: stretch的不同
设置align-content: stretch的效果,align-content的默认值就是stretch
align-items: stretch和align-content: stretch一起设置的效果
align-content: 非stretch值会使align-items的stretch失效