参考视频链接:
https://www.bilibili.com/video/av18495093/?spm_id_from=333.788.videocard.0
https://www.bilibili.com/video/av18917955/?spm_id_from=333.788.videocard.0
参考文章链接:
https://mp.weixin.qq.com/s/0xhIRTqnu_kE3YXKyQH9Tw
https://mp.weixin.qq.com/s/GRIX4SrVNH63CX_bMCbc7g
父级身上的其他属性:
justify-content: 子元素水平排列方式
center 居中
space-between 两端对齐
space-around 子元素拉手分布
flex-start 居左
flex-end 居右
align-items: 子元素垂直排列
center 居中
flex-end 底部
flex-start 顶部
align-content : 多行的时候, 垂直排列
center
flex-start
flex-end
flex-direction: 横向排列
row 横向排列
row-reverse
column 纵向排列
column-reverse
flex-wrap: 子元素是否在一行显示
nowrap 不换行(默认值)
wrap 换行
flex-flow:<flex-direction><flex-wrap>
举例子:/*flex-direction:column;flex-wrap:wrap;*/相当于flex-flow:column wrap;
子级身上属性:
flex:1 1指的是一个系数
子元素在划分父元素宽度,先剔除固定宽度
align-self 其实就是用来覆盖父级align-items垂直排列
flex-grow:1 规定子元素放大比例
order:规定子元素顺序,排序数值越小,越靠前,默认值为0