弹性布局
容器样式属性
/*开启弹性布局首先在容器样式中写 display: flex;,以下样式才生效*/ |
容器样式属性的用法
flex-direction用法
flex-direction是设置主轴方向的,值为:row 行 | column: 列
/* 主轴方向默认x轴,y轴为交叉轴 */ |
flex-wrap用法
flex-wrap:nowrap; |
justify-content的用法
justify-content:flex-start ; |
align-items的用法
以下五个值,具体的对齐方式与交叉轴的方向有关, |
align-content的用法
align-content:flex-end ; |
注: justify-content与align-content的区别:justify-content是与主轴方向对齐方式;align-content是交叉轴方向对齐方式
注: justify-content与align-content的区别:justify-content是与主轴方向对齐方式;align-content是交叉轴方向对齐方式
项目样式属性
order: ; |
order的用法
order属性定义项目的排列顺序,数值越小排序越靠前,默认值为0
式图重要代码
.box>div:nth-child(4){ |
flex-grow的用法
flex-grow属性定义项目的放大比例,默认为0,即有剩余空间,也不放大。
如果所有的项目都为1,则它们平分剩余空间。如果有一项值为2,其他均为1,则前者分割的剩余空间比其他多一倍。
div { |
flex-shrink的用法
flex-shrink属性定义项目的缩小比例,默认为1,即如果剩余空间不足,该项目被缩小。
如果所有的项目值为1,当空间不足时,都将等比例缩小;如果其中一个项目值为0,其余都为1,当空间不足时,前者不缩小;
负值对该项目属性无效
.box { |
flex-basis的用法
flex-basis属性定义了分配空间之前,该项目占据主轴空间。浏览器根据这个属性判断主轴是否有多余空间。默认值为0,即项目的本来大小。不常用!!!
flex的用法
flex
属性用于指定弹性子元素如何分配空间。
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] |
.box>div:nth-child(1) { |
align-self的用法
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性,如没父元素。则等同于stretch.
该属性有六个值,除了auto,其他值都与align-items的值一样。
align-self: auto; |
.box>div:nth-child(2) { |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小白技术栈!
评论