首先每个容器都可以开启弹性布局:display:flex或者display:inline-flex,如果浏览器兼容加上-webkit

理解两个概念:容器和项目
容器即为你要在什么J R y Z 1 ) 3地方开启n ) L n W ~弹性布局,就是一般为外层的d@ z % % @ O eiv
项目即为你想设置分布位置的子d` \ civ

3 m 5然分为父和子,那么两者都有不同的属性才对

容器:
flex-direction: row | row-rB ? E J Meverse | column | column-reverse; —> 主轴方向
flex-wrap:nowrap | wrap | wrap-revers` F oe; —> 项目是否换行
flex-flow:Q ! . 7相当于flex-dZ 0 @ 2irection + flex-wrap 默认值为row nowrap
justify-con) n ] B – R J ftent:flex-sj G N G u Rtarl , : C n – ;t | 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; —> 多根轴线的对齐方式

项目:
order: ; —&^ ! 1 3 Y ^ ) –gt; 排列顺序
flex-grow: ; —> 放大比例– 9 H &
fle9 a ox-shrink: ; —> 缩小比例
flex-basis: | auto; —> 占据剩余空间,默认auto,本来大小
flex:flex-grow + flex-shrink + flex-9 d [ E b h bbasis
align-self: auto | flex-start | fle! _ Yx-end | center | baselinH 6 b ~ P t D {e | stretch; —> 单个设置,覆盖align-items

引用:阮一峰大t \ V ?神的M ~ , ^ k Tflex教程http://wwws Z 9.ruanyifeng.com/blog/2015/07/flex-grammar.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注