多语言展示
当前在线:806今日阅读:195今日分享:14

CSS3中的伸缩布局一

css3中的伸缩布局。
工具/原料

电脑,DW软件

方法/步骤
1

伸缩布局:display:flex;(伸缩容器,水平显示)              inline-flex;(行内伸缩,外伸缩)

2

伸缩布局:flex-direction:column;转化为列。                        column-reverse;反向转化列

3

伸缩布局:flex-direction:row;转化为行(默认)。                        row-reverse;反向转化行

4

伸缩布局:flex-wrap:nowrap;单行显示(默认)。                  wrap;多行显示(窗口缩小时)

5

伸缩布局:flex-wrap:wrap-reverse;多行显示(反向)。

6

缩写:flex-flow:direction wrap;

注意事项

伸缩布局需要添加兼容前缀

推荐信息