cssflex布局的优缺点是什么

css flex布局的优点：flex布局容易上手，根据flex规则很容易达到某个布局效果。css flex布局的缺点：浏览器兼容性比较差，只能兼容到ie9及以上。

负值对该属性无效。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {  flex-basis: |auto; /* default auto */}

• 1
• 2
• 3

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

4.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {  flex: none | [ <&＃39;flex-grow&＃39;> <&＃39;flex-shrink&＃39;>? || <&＃39;flex-basis&＃39;> ]
}

• 1
• 2
• 3

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
如果flex-basis的总和加起来大于父级宽度，子级被压缩，最后的选择是flex-shrink来进行压缩计算

加权值 = son1 + son2 + …. + sonN；

那么压缩后的计算公式就是

压缩的宽度 w = (子元素flex-basis值 * (flex-shrink)/加权值) * 溢出值

如果flex-basis的总和小于父级宽度，剩余的宽度将根据flex-grow值的总和进行百分比；

扩张的宽度 w = (子元素flex-grow值 /所有子元素flex-grow的总和) * 剩余值

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {  align-self: auto | flex-start | flex-end | center | baseline | stretch;}

更多编程相关知识，请访问：编程教学！！

以上就是css flex布局的优缺点是什么的详细内容，更多请关注其它相关文章！