css3flex布局缩小 |css导航菜单 高大上

.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 200px;
height: 200px;
margin: 10px;
flex: 1;
}
@media only screen and (max-width: 600px) {
.flex-item {
flex: 0 0 45%;
}
}

在上述代码中，大家使用了Flex布局来定义一个容器和若干个项目。容器使用了display: flex;来声明为Flex容器，项目使用了flex: 1;来平均分配剩余空间。

在移动端设备上，大家希望项目不再平均分配空间，而是缩小一些来适应较小的屏幕。这时候大家可以使用flex-basis来指定项目的基础大小，以及flex-shrink来指定项目的缩小比例。

在上述代码中，大家使用@media查询来针对屏幕宽度小于600像素的设备重新定义项目的flex属性。其中，flex: 0 0 45%;表示项目的基础大小为45%，且不允许缩放。这样，当设备屏幕缩小时，项目会自动缩小以适应屏幕大小。