flex布局与传统布局的区别

最新推荐文章于 2023-04-07 14:16:18 发布
原创 最新推荐文章于 2023-04-07 14:16:18 发布 · 847 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3

本文对比了Flex弹性布局与传统布局的特点。传统布局兼容性好但繁琐，移动端表现不佳；Flex布局操作简便，布局简洁，适合移动端，但在PC端存在兼容性问题。文章建议根据应用场景选择合适的布局方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

flex布局与传统布局的区别

传统布局

(1)兼容性好
(2)布局繁琐
(3)局限性，不能再移动端有很好的布局

flex弹性布局

(1)操作方便，布局极为简单，移动端应用很广泛
(2)PC端浏览器支持情况较差
(3)IE 11或更低版本，不支持或仅部分支持

建议

(1).如果是PC端页面布局，并考虑兼容性问题，使用传统布局效果会更好。
(2).如果是移动端或者不考虑兼容性问题的PC端页面布局，使用flex弹性布局效果更好## flex布局和传统布局的区别

flex布局和传统布局有什么区别？
李天下
06-23 2万+
传统布局，基于盒模型，依赖 display属性 、position属性 、float属性 它对于那些特殊布局非常不方便，比如垂直居中 2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么 Flex 是 Flexible Bo...
flex布局
o_x_y_的博客
08-03 373
1，传统布局的兼容性好2，传统布局的布局繁琐且不能在移动端很好的布局，flex则很简单且在移动端应用很广泛。
传统布局和flex布局
vfjcgg的博客
02-27 717
传统布局： 1.兼容性好 2.布局繁琐 3.局限性，不能在移动端很好的布局 flex弹性布局： flex是flexible Box的缩写，意为‘弹性布局’， 用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局 布局原理：采用flex布局的元素，称为flex容器（flex container）,简称“容器”， 它的所有子元素自动成为容器成员，称为Flex项目，简称“项目”。 1...
Flex与传统布局对比
Xiaofugongzi的博客
05-17 805
弹性盒布局是css3中新增加的一种页面布局方式，是一种很灵活的页面布局方式。当页面需要适应不同大小的屏幕和各类设备时，可以确保各元素的布局能随之自动调节，而不至于出现页面变形。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 弹性盒由容器、子元素、和轴组成，并且默认情况下，子元素的排布方向与横轴的方向一致。弹性盒改进了块模块，弹性盒布局中的子元素通常都在一行内显示，并且默认情况下每个容器都只有一行。既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。
flex布局和传统布局的区别
dxj124的博客
03-22 1225
传统布局，基于盒模型，依赖display属性 、position属性 、float属性 它对于那些特殊布局非常不方便，比如垂直居中 2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么 Flex 是 Flexible Box 的缩写，意为”...
Flex布局
03-29
Flex布局，全称为Flexible Box，是W3C在2009年提出的一种新的网页布局方案，旨在解决传统CSS布局模式在处理复杂和动态内容时的局限性。它特别适用于移动设备上的H5页面和微信小程序等场景，能轻松实现各种复杂的页面...
详解CSS3伸缩布局盒模型Flex布局
09-22
一旦启用Flex布局，容器内的传统布局规则，如`float`、`clear`和`vertical-align`属性，对Flex项目将不再生效。 Flex布局的主要思想是使容器能根据可用空间调整其子项目的宽度、高度和顺序。容器会分配剩余空间，...
使用flex弹性布局代替传统浮动布局来为微信小程序写自适应页面 ...
03-29
于是，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能，本人在微信小程序页面中尝试了一下弹性...
flex布局分享.pptx
11-06
Flex布局是一种现代网页和应用程序设计中的布局模式，它允许开发者更灵活地控制元素在容器内的排列方式，解决了传统布局方式（如盒模型）在处理复杂布局时的诸多不便。Flex布局于2009年由W3C提出，现在已经得到了...
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。... 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
flex布局与传统布局的差别及其子父元素属性
d1063270962的博客
08-06 364
传统布局 兼容性好 布局繁琐 局限性，不能在移动端很好的布局 一般用于网页布局 flex弹性布局 操作方便，布局极为简单，移动端应用很广泛。 PC端支持情况较差 IE11 或更低版本，不支持或者仅部分支持。 flex布局常见属性 以下6个属性是对父元素设置的 flex-direction 设置主轴方向 justify-content 设置主轴上的子元素排列方式 flex-wrap 设置子元素是否换行 align-content 设置侧轴上的子元素佩列方式（多行） align-items 设置侧轴上
经典布局（flex和传统两种实现）—左右页眉页脚
jiaojsun的博客
06-20 431
1.浮动法 上中下：都是块元素。定宽，定高 中：定宽高： 左右：浮动且定宽高 这种方式其实并不好，写了好多代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <s...
使用 Flex 布局与其他普通布局的简单对比
weixin_33795806的博客
12-08 497
最近使用 flex 布局来做各种居中真的带来了不少方便，现在来总结一下平时的普通布局是怎样使用 flex 布局来实现一样的效果。 一、左右 1:1 布局 布局： &lt;div class="container"&gt; &lt;div class="child"&gt;LEFT&lt;/div&gt; &lt;div class="child"&gt;RIGHT&lt
经典布局（flex和传统两种实现）—圣杯布局
jiaojsun的博客
06-20 587
所谓圣杯布局（三栏加页眉页脚） 一张图解释就是 1.浮动法 上中下：定宽定高 中间：左中右left浮动且都必须设置宽度 左：margin-left:-100% 右：margin-left:-100px: 中content:margin: 0 180px 0 150px <!DOCTYPE html> <html lang="en"> <hea...
Flex布局布局
feiyang094的专栏
07-26 552
Flex布局的容器是一个伸缩容器，首先容器本身会更具容器中的元素动态设置自身大小；然后当Flex容器被应用一个大小时（width和height），将会自动调整容器中的元素适应新大小。Flex容器也可以设置伸缩比例和固定宽度，还可以设置容器中元素的排列方向（横向和纵向）和是否支持元素的自动换行。有了这个神器，做页面布局的可以方便很多了。注意，设为Flex布局以后，子元素的float、clear和ve
第一篇：css中position，float，display：flex 这三者的区别？
weixin_73394279的博客
04-07 895
justify-contant: space-around -------自动分配；justify-contant: space-between ------两侧对齐;justify-contant: flex-start ------左对齐;justify-contant: flex-end -----右对齐;justify-contant: center -----水平居中;​​​​​position-absolate 子元素的相对定位；float-right -----右浮动；
三种布局：float、position与flex
weixin_45239190的博客
08-12 1847
浮动布局 （float） 1.关于默认文档流 1）元素在页面中的显示顺序与元素在代码中出现的顺序是一致的。 2）块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定。 3）行内元素与其他元素共享一行空间，宽高由其内容所决定。 浮动布局（如果一个元素添加float属性。那么这个元素就会成为一个浮动元素） float left 向左浮动 right 向右fud...
flex布局详解
勿忘初心
07-25 1814
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局...
携程移动端Flex布局实用教程与特性分析
携程网站移动端的Flex布局是一个非常实用的教学资源，尤其适合那些希望学习前端开发中CSS Flexbox布局技术的新人。在深入探讨携程移动端使用Flex布局的具体细节之前，让我们首先了解一些Flexbox布局的基本概念和特点...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值