美文网首页
CSS3 第三部分2018-05-05

CSS3 第三部分2018-05-05

作者: 多佳小昕 | 来源:发表于2018-05-23 18:39 被阅读0次

一、伸缩布局

1. align-items

调整侧轴方向对齐方式,包括flex-start、flex-end、center、baseline(不管行高是多少,文字基线自动调整至相同 )、stretch(height:auto)

2. flex-wrap

控制是否换行,包括wrap、nowrap(和宽度无关,自动伸缩)

3. justify-content

主轴方向对齐,可以调整元素在主轴方向上的对齐方式,包括flex-start、flex-end、center、space-around、space-between几种方式

4. flex-direction

调整主侧轴的方向。row-reverse、column、row、column-reverse

5. align-content

堆栈排列,主要是应用flex-wrap: wrap产生的换行进行控制
包括flex-start、flex-end、center、space-between、space-around、stretch

6. flex-flow

flex-direction和flex-wrap的简写形式
flex-flow:column wrap

7. flex

控制子元素伸缩比例,分配的是父盒子剩余的空间

8. align-self

同align-items可覆盖父元素设置的algin-items,
包括flex-start、flex-end、center、baseline、stretch

9. order

控制子元素的顺序(按大小)

相关文章

网友评论

      本文标题:CSS3 第三部分2018-05-05

      本文链接:https://www.haomeiwen.com/subject/quperftx.html