flex布局--详解

flex布局

display:flex

justify-content:

center(横轴方向居中)
flex-end(靠右对齐)
space-between;(左右两端 对齐,且左右两端相等)
space-around;左右两端为容器间距的二倍
space-evenly:项目容器间距与两端相等

align-item:

center:竖轴方向居中
flex-end:竖轴底部
屏幕居中(经常用到)
justify-content:center
align-item:center

flex-direction:

row按行排列
row-reverse反向按行排列
column按竖排列
column-reverse反向安竖排列

flex-wrap:

nowrap:后项目会强行等容器宽度且不换行(浮动布局会掉下去)
wrap:表示换行不会等容器宽度,而是根据自身宽度进行排列,如果超出父容器宽度则自然换行

order,flex,align-self 项目属性

order:用于决定项目排列顺序-小靠前
align-self:flex-end 底部
align-self:center 居中

flex-grow

默认为0,取决于项目在右剩余空间的情况下是否放大,默认不放大,即便设置了宽度,也会放大
1.前两个为0 后一个为1 再后一个沾满空间
2.前一个为0 后两个为1 后两个平均沾满空间

flex-shrink

取值:默认1,用于决定项目空间不足时是否缩小,默认项目都是1,即空间不足时大家一起等比缩小;注意,即遍设置了固定宽度,也会缩小,但如果某个项目flex-shrink设置为0,则即变空间不够,自身也不缩小

flex-basis

取值:默认auto,用于设置项目宽度,默认auto时,项目会保持默认宽度,或者以width为自身宽度,但如果设置了flex-basis,权重会width属性高,因此会覆盖width属性

flex

取值:默认0 1 auto, flex属性是 flex-grow,flex-shink与flex-basis三个属性的简写,用于定义项目放大,缩小与宽度,该属性有两个快捷键值,分别是auto(1 1 auto) 等放大缩小,与none(0 0 auto)不放大,但等分缩小

bi’li’bi’li–视频详解链接
https://www.bilibili.com/video/BV1Lp4y1S7XM?from=search&seid=16404234384454699127&spm_id_from=333.337.0.0