Flex-弹性布局

Posted 2020-09-29

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。如：

.box{

　　display:flex;

}

行内元素也可以使用Flex布局。

.box{

　　display:inline-flex;

}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

 

关于弹性布局，在这段时间的学习中，我总结了以下几个常用的属性

1.容器的属性

1.1是否换行

flex-wrap:nowrap/wrap/wrap-reverse;

1.2justify-content属性

justify-content：center（居中）/space-between（对齐）;

2.项目的属性

flex-grow

flex-grow：1；

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。