flex布局与传统布局的区别

最新推荐文章于 2023-04-07 14:16:18 发布
最新推荐文章于 2023-04-07 14:16:18 发布
阅读量670 收藏 4
点赞数
分类专栏： 传统布局和flex布局 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45617525/article/details/112252965
版权

flex布局与传统布局的区别

传统布局

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

flex弹性布局

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

建议

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

wait_future
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
flex布局
o_x_y_的博客
08-03 299
1，传统布局的兼容性好2，传统布局的布局繁琐且不能在移动端很好的布局，flex则很简单且在移动端应用很广泛。
flex布局和传统布局有什么区别？
热门推荐
李天下
06-23 2万+
传统布局，基于盒模型，依赖 display属性 、position属性 、float属性 它对于那些特殊布局非常不方便，比如垂直居中 2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么 Flex 是 Flexible Bo...
传统布局和flex布局
vfjcgg的博客
02-27 626
传统布局： 1.兼容性好 2.布局繁琐 3.局限性，不能在移动端很好的布局 flex弹性布局： flex是flexible Box的缩写，意为‘弹性布局’， 用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局 布局原理：采用flex布局的元素，称为flex容器（flex container）,简称“容器”， 它的所有子元素自动成为容器成员，称为Flex项目，简称“项目”。 1...
第一篇：css中position，float，display：flex 这三者的区别？
最新发布
weixin_73394279的博客
04-07 594
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 1642
浮动布局 （float） 1.关于默认文档流 1）元素在页面中的显示顺序与元素在代码中出现的顺序是一致的。 2）块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定。 3）行内元素与其他元素共享一行空间，宽高由其内容所决定。 浮动布局（如果一个元素添加float属性。那么这个元素就会成为一个浮动元素） float left 向左浮动 right 向右fud...
详解CSS3伸缩布局盒模型Flex布局
09-22
一旦启用Flex布局，容器内的传统布局规则，如`float`、`clear`和`vertical-align`属性，对Flex项目将不再生效。 Flex布局的主要思想是使容器能根据可用空间调整其子项目的宽度、高度和顺序。容器会分配剩余空间，...
flex布局分享.pptx
11-06
Flex布局是一种现代网页和应用程序设计中的布局模式，它允许开发者更灵活地控制元素在容器内的排列方式，解决了传统布局方式（如盒模型）在处理复杂布局时的诸多不便。Flex布局于2009年由W3C提出，现在已经得到了...
Flex布局
03-29
Flex布局 简介 Flex是Flexible Box的缩写，意为弹性布局。是W3C在2009年提出的一个新的布局方案。可以方便的实现各种页面布局。目前浏览器兼容如下：   (此图片来源于网络，如有侵权，请联系删除! )   Flex在...
弹性布局-flex布局.zip
05-18
在传统布局模式下，元素的尺寸和位置往往受到固定宽度和高度的限制，而Flex布局则允许元素根据容器大小动态调整自身尺寸和顺序，从而实现更高效的响应式设计。 **一、Flex容器** 1. **启用Flex布局：** 使用`...
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。... 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
弹性盒子flex布局
fine1998_的博客
05-23 7443
今天打开我的csdn，竟然涨了7个粉丝，哈哈。为了我新涨的粉丝们，决定今晚加更一篇文章~ 一、flex弹性布局与传统布局的区别： flex弹性布局 传统布局 兼容 IE11+ 较好 布局效果 简单方便 繁琐 使用场景 移动端 PC端 二、flex布局介绍 原理：通过给父盒子添加display:flex属性，来控制子盒子的位置和排列方式。 特点（待补充）： 1、flex布局相较于传统布局（浮动、定位）更简便，但兼...
flex布局和传统布局的区别
dxj124的博客
03-22 1102
传统布局，基于盒模型，依赖display属性 、position属性 、float属性 它对于那些特殊布局非常不方便，比如垂直居中 2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么 Flex 是 Flexible Box 的缩写，意为”...
Flex与传统布局对比
Xiaofugongzi的博客
05-17 735
弹性盒布局是css3中新增加的一种页面布局方式，是一种很灵活的页面布局方式。当页面需要适应不同大小的屏幕和各类设备时，可以确保各元素的布局能随之自动调节，而不至于出现页面变形。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 弹性盒由容器、子元素、和轴组成，并且默认情况下，子元素的排布方向与横轴的方向一致。弹性盒改进了块模块，弹性盒布局中的子元素通常都在一行内显示，并且默认情况下每个容器都只有一行。既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。
使用 Flex 布局与其他普通布局的简单对比
weixin_33795806的博客
12-08 430
最近使用 flex 布局来做各种居中真的带来了不少方便，现在来总结一下平时的普通布局是怎样使用 flex 布局来实现一样的效果。 一、左右 1:1 布局 布局： <div class="container"> <div class="child">LEFT</div> <div class="child">RIGHT&lt
html中前台布局特点,HTML5弹性布局有什么优点
weixin_39996496的博客
06-10 253
HTML5弹性布局是用来为盒状模型提供最大的灵活性，优点在于其容易上手，根据flex规则很容易达到某个布局效果。任何一个容器都可以指定为Flex弹性布局。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。弹性布局( Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入...
html5弹性布局有什么优点和缺点,css flex布局的优缺点是什么
weixin_39532352的博客
06-19 1935
css flex布局的优点:flex布局使用方便，根据flex规则很容易达到一定的布局效果。css flex布局的缺点:浏览器兼容性差，只能兼容ie9及以上。推荐:css视频教程1.什么是flex布局？官方声明:Flex是Flexible Box的缩写，意思是“灵活布局”，用于为Box模型提供最大的灵活性。任何容器都可以指定为灵活布局。民间说法:flex是一种布局，类似于block、inline-...
flex布局可能碰到的坑1
ppx2017的博客
08-13 1万+
flex布局非常好用，但在开发过程中可能会碰到的一些坑 1、内容超出容器 大致情况是：在一个设置了display:flex布局的大容器A中并排放置两个子容器，并且子容器设置flex:1，子容器中都有一个元素包含一段文本，这段文本设置了不换行并且显示省略号的样式，当文本过长的时候，子容器会被撑开，如下效果： 相关代码： <view class='hot-content-box'&...
flex布局详解
勿忘初心
07-25 1718
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局...
谈谈Flex布局
珍妮的小罐君
02-10 913
作为前端开发人员来讲，页面布局是最重要的一步，而布局的传统解决方案，大多基于盒模型，依赖 display属性 + position属性 + float属性等等。对于某些特殊布局就非常不方便，比如，垂直居中就不是那么容易的实现； W3C在2009年提出了一种新的布局方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，大多数主流浏览器已经完全支持它，看下图：
flex-布局.doc
01-22
然而，传统布局对于一些特殊的布局需求，比如垂直居中，实现起来比较不方便。2009年，W3C提出了一种新的方案——Flex布局，它可以简便、完整、响应式地实现各种页面布局。目前，所有主流浏览器都已经支持Flex布局，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值