网站建设 之 flex:1

flex: 1; 实现了三个不同内容的 div 平分空间，代表均匀分配元素

flex: 1等于

flex-grow：1 用于设置或检索弹性盒子的扩展比率。注意如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。默认值是 0

flex-shrink：1 控制 flex 盒子空间不足时子元素改如何收缩，平常开发中更多的是使用默认值 1 或者设置 0。在给子元素不加flex-shrink且父盒子中不加flex-wrap=“wrap”的情况下，超出父盒子的宽度，父盒子会自动压缩子盒子的宽度。当给子盒子加上flex-shrink: 0，子盒子不会被压缩宽度；

flex-basis：0%。 用于设置或检索弹性盒伸缩基准值。

flex-wrap

让弹性盒元素在必要的时候拆行：

display:flex;

flex-wrap: wrap;

在Flex布局中，子项设置width是没有直接效果的

flex-basis的默认值是auto，表示自动，也就是完全根据子列表项自身尺寸渲染。

自身尺寸渲染优先级如下：

min-width > || max-width > width > Content Size

同时，在Flex布局中，flex-basis优先级是比width高的（可以理解为覆盖）。

所以，flex-basis和width同时设置了具体的数值，则width属性值直接被打入冷宫，在样式表现上完全被忽略。