css flex布局的优缺点是什么?


Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局(基于一维),即使他们的大小是未知或者是动态的。(这里我们称为Flex)。

Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。Flex容器会使子项目(伸缩项目)扩展来填满可用空间,或缩小他们以防止溢出容器。

最重要的是,Flexbox布局方向不可预知,他不像常规的布局(块就是从上到下,内联就从左到右)。而那些常规的适合页面布局,但对于支持大型或者杂的应用程序(特别是当他涉及到取向改变、缩放、拉伸和收缩等)就缺乏灵活性.

css flex布局的优缺点

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

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

Image placeholder
前端答疑
未设置
  15人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css grid布局的优缺点是什么?

Grid(网格)布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格;能够将网页分成具有简单属性的行和列来完成我们需要的网格布局。grid布局的优点:1:固定和灵活的轨道尺寸2:可以使用行号,

react native的优缺点是什么?

ReactNative使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。reactnative的

vuetifyjs的优点是什么?

官方网站:https://vuetifyjs.com/zh-Hans/Vuetify优点:几乎不需要任何CSS代码,而element-ui许多布局样式需要我们来编写Vuetify从底层构建起来的语义化

为什么要前后端分离?有什么优缺点

作者:Cherry300来源:jianshu.com/p/c86cee16b418一、前戏前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个node

jQuery选择器的的优点是什么

jQuery选择器的的优点1、简洁的写法,说道简洁的写法,给大家列举一下例子,看看jQ和原生哪个更方便。。2、提供了完善的处理机制(完善的兼容处理)3、jQuery选择器判断dom节点存在的方法:4、

html和jsp的区别及优缺点

html和jsp的区别:●最简单的区别就是,HTML能直接打开,jsp只能发布到Tomact等服务器上才能打开●定义上HTML页面是静态页面可以直接运行,JSP页面是动态页它运行时需要转换成servl

前端不得不了解的 Flex 布局

背景 又双叒叕被老大拉来顶替前端小姐姐撸代码,接触到了Flex布局,以前只听过没用过,碰巧这次要揭露她的面纱,就记录一下。接触前端的同学都应该知道网页布局是CSS的一个重点,布局的传统方案都是基于盒

前端不得不了解的 Flex 布局

背景 又双叒叕被老大拉来顶替前端小姐姐撸代码,接触到了Flex布局,以前只听过没用过,碰巧这次要揭露她的面纱,就记录一下。接触前端的同学都应该知道网页布局是CSS的一个重点,布局的传统方案都是基于盒

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

为什么使用div css布局?

提起DIV+CSS组合,还要从XHTML说起。XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求。为什么

scss和sass的区别是什么?

另外,SCSS还能识别大部分CSShacks(一些CSS小技巧)和特定于浏览器的语法,例如:古老的IEfilter语法。由于SCSS是CSS的扩展,因此,所有在CSS中正常工作的代码也能在SCSS中正

Scss与Sass是什么?

之间的区别是什么?下面本篇文章就来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。Sass是什么?Sass是一门高于CSS的元语言,它能用来清晰地、结构化地描述文件样式

sass与scss的区别是什么?

Sass是采用Ruby语言编写的一款CSS预处理语言,它诞生于2007年,是最大的成熟的CSS预处理语言。最初它是为了配合HAML(一种缩进式HTML预编译器)而设计的,因此有着和HTML一样的缩进式

为什么大部分人做不了架构师?这2点是关键

阿里妹导读:选择有时候比努力重要,真正厉害的人不仅仅是埋头苦干,而是会利用好的思维方式、好的方法,看穿事物的本质,顺势而为,找到事情的最优解,并懂得举一反三。架构师是程序员的目标之一,但大多数程序员无

CSS Flex –动画教程

如果一张图片胜过千言万语——那么动画呢?Flex无法通过文字或静态图像有效地完全解释。为了巩固你对flex的了解,我制作了这些动画演示。注意overflow:hidden行为类型是默认值,因为flex

css3布局方式有几种

css3布局方式有几种css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。下面我们来看看各种布局的效果吧。一、多栏布局——栅格系统栅格系统就是利用浮动实现的多栏布局,在

css栅格布局图文详解

圣杯布局圣杯布局是一种三列布局,两边定宽,中间自适应:css:*{ box-sizing:border-box; } html,body{ width:100%; height:100%; margi

CSS常见布局问题

1、多元素水平居中实现一下效果:平常人看见题目,最初感觉实现图片中的效果不难,设置小黑框的宽高边距,字体水平垂直居中即可。其实,题目应该实际上是考察多元素水平居中,即无论元素(小黑框)基数为多少,它们

选择器和介绍CSS布局笔记

css选择器: 1.元素选择器,例如:p{}; 2.类选择器,例如:.box{}; 3.ID选择器,例如:#box{};

css属性是什么?

层叠样式表是一个完全的纯文本文件,通常以“css”为扩展名作为单独的文件来使用,它的内容包含了一组告诉浏览器,如何安排与显示特定的html标签中内容的规则。CSS定义规则由三个部分构成:选择符,属性和

css常见选择器有哪些?优先级是什么?

选择器也称为选择符,所有的html语言中的标记都是通过css选择器控制的。常见的css选择器有标签选择器、类选择器、id选择器、通配符选择器。1、标签选择器标签选择器,也称为元素选择器。标签选择器的基

ie加载不了css的原因是什么?

可能原因如下:1.HTML页面编码与CSS编码不同(如HTML为gbk,CSS为utf-8)。2.CSS文件中未指定@charset头声明,导致IE默认使用页面编码来解码CSS文件(DEMO中IE浏览

dreamweaver和css的区别是什么?

DreamweaverAdobeDreamweaver,简称“DW”,中文名称"梦想编织者",是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。DW是第一套针对专业

jsp和css的区别是什么?

jsp是什么?JSP全名为JavaServerPages,中文名叫java服务器页面,是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码;标签通常以结束。JSP技术有点类似ASP