css flex宽度 |css width vw

其中，设置Flex布局的主要标识是使用display:flex或display:inline-flex属性。而在Flex布局中，元素宽度的分配是一个重要的问题，下面大家就来探讨一下。

.container{
display:flex;
}
.item{
flex:1;
}

上述代码展示了一个基本的Flex布局设置，其中.container表示设置Flex容器，.item表示Flex子元素，使用flex:1表示子元素的宽度平均分配，也就是等宽。

.item{
flex:1;
width:100px;
}

如果大家需要设置Flex子元素不等宽，可以使用width属性进行设置。如上述代码所示，表示宽度为100px，如果Flex容器的可用空间大于等于100px，则所有子元素都是等宽的；但如果可用空间小于100px，则所有子元素宽度为实际可用空间除以子元素数量。

.item{
flex:1;
min-width:100px;
}

除了width属性，还可以使用min-width属性来控制Flex子元素的最小宽度。如上述代码所示，表示子元素的最小宽度为100px，如果子元素内容过长，可将超过100px的部分省略或者进行换行显示。

通过上述方式，可以较为灵活地控制Flex子元素的宽度分配。需要注意的是，在进行Flex布局的时候，应该尽量避免给Flex子元素设置明确的宽度值，而是通过Flex布局的属性进行控制。