伸缩布局让你头疼

Posted growydp

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了伸缩布局让你头疼相关的知识,希望对你有一定的参考价值。

Flex布局 即display: flex;

1.flex-direction:

未加display: flex;

技术图片

添加display: flex;

技术图片

flex-decoration: row-reverse; (-webkit)

技术图片

flex-direction: column;

技术图片

flex-direction: column-reverse;

技术图片

2.justify-content

justify-content: flex-start;

juseify-content:flex-end;

技术图片

 

justify-content: center;

技术图片

 

justify-content:space-between;

技术图片

 

justify-cotnent:space-around;

技术图片

 

以上是关于伸缩布局让你头疼的主要内容,如果未能解决你的问题,请参考以下文章

C3弹性盒子及弹性布局

18-伸缩布局

伸缩布局

flex 伸缩布局

flexbox 伸缩布局盒

CSS3伸缩布局