flex布局有哪些优缺点

小编给大家分享一下flex布局有哪些优缺点,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

flex布局的优缺点是:1,flex布局优点在于其容易上手,根据flex规则很容易达到某个布局效果;2,缺点是浏览器兼容性比较差,只能兼容到ie9及以上。

<强> flex布局的优缺点是:

CSS3弹性盒(灵活的盒子或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列,对齐和分配空白空间。

CSS3引入的flex布局优缺点:

<李>

优点在于其容易上手,根据flex规则很容易达到某个布局效果。

<李>

缺点是:浏览器兼容性比较差,只能兼容到ie9及以上。

<强> CSS3引入的flex布局介绍:

弹性盒子由弹性容器(flex容器)和弹性子元素(flex项目)组成。弹性容器通过设置显示属性的值为flex或inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

注意:弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

<强>示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞, 　　& lt; title> & lt;/title>, 　　& lt; style>, 　　.flex-container  { 　　,,,显示:,-webkit-flex; 　　,,,显示:,flex; 　　,,,宽度:,400 px; 　　,,,身高:,250 px; 　　background - color,,,:, lightgrey; 　　} 　　.flex-item  { 　　background - color,,,:, cornflowerblue; 　　,,,宽度:,100 px; 　　,,,身高:,100 px; 　　,,,保证金:,10 px; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div 类=癴lex-container"祝辞 　　& lt;才能div 类=癴lex-item"祝辞flex  item  1 & lt;/div> 　　& lt;才能div 类=癴lex-item"祝辞flex  item  2 & lt;/div> 　　& lt;才能div 类=癴lex-item"祝辞flex  item  3 & lt;/div>,, 　　& lt;/div> 　　& lt;/body> 　　& lt;/html>

效果如下:

看完了这篇文章,相信你对“flex布局有哪些优缺点”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!

flex布局有哪些优缺点