flex布局和传统的布局有什么不同

flex布局和传统的布局有什么不同

flex布局和传统的布局有什么不同?

传统布局:基于盒模型,依赖 display属性 、position属性 、float属性;

flex布局:flex 是 flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

(推荐教程:css快速入门)

设为display:flex的元素称为”容器”,它的子元素称为”项目”。需要注意的是,容器设为 flex 布局以后,子元素的float、clear和vertical-align属性将失效;

为什么要确定主轴和侧轴?

主轴和侧轴是通过flex-direction确定的(默认是row)之所以要确定主轴,是因为要确定项目的对齐方向:

如果flex-direction是row或者row-reverse,那么主轴就是justify-content;

如果flex-direction是column或者column-reverse,那么主轴就是align-items.

以上就是flex布局和传统的布局有什么不同的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1615429.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 04:53:44
下一篇 2025年12月24日 04:53:54

相关推荐

  • CSS3 flex布局总结

    css3 flex布局总结 2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。 Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。…

    2025年12月24日
    000
  • 有趣的CSS魔法和布局(代码)

    本篇文章给大家带来的内容是关于有趣的CSS魔法和布局(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 前言:布局和样式,是每个前端的必修课。在日常的工作中,也会碰到一些特定场景的布局需求,配合上样式,就能实现一些神奇的效果。我搜罗了一些日常开发中遇到的布局,以及浏览各大网站时…

    2025年12月24日
    000
  • 如何通过flex进行网页布局

    flex称为弹性布局,当父元素设置为flex值后子元素会自动成为其成员,再通过设置属性值来实现各种布局效果。例通过给父元素设置justify-content属性实现水平垂直居中效果 通过Flex可以简便、完整、响应式地实现各种页面布局。随着浏览器的发展,目前,它已经得到了所有浏览器的支持,这意味着,…

    2025年12月24日
    000
  • CSS布局中flex、grid以及float属性之间的差别是什么

    在CSS布局中,flex、grid以及float属性的差别是flex属性适用于小的UI元素,grid属性适合用于为网站整体进行布局而float属性适合在较大的文本文章中设置图像 平时我们在写页面时为了实现各种网络布局,常常会用到flex或者grid以及float属性。每一种布局技术都有其优缺点,接下…

    2025年12月24日 好文分享
    000
  • css实现等高布局的三种方式(代码示例)

    本篇文章给大家带来的内容是关于css实现等高布局的三种方式(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 本文讲的等高布局是在不手动设置元素高度的情况下,使用纯css实现各个元素高度都相当的效果。如图: 1、使用table-cell实现(兼容IE8) 立即学习“前端免费…

    2025年12月24日
    000
  • css中inline-block是什么?inline-block布局的使用

    css中inline-block是什么?本篇文章就给大家介绍在css中inline-block是什么意思,让大家了解在css布局中使用inline-block的好处。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来了解一下inline-block是什么? inline-b…

    2025年12月24日 好文分享
    000
  • 使用float(浮动)如何布局?浮动布局的示例

    使用float(浮动)可以如何布局?本篇文章就给大家介绍利用float(浮动)来如何布局内容。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 在之前的文章【float是什么?float属性详解】中介绍了float属性是什么,为什么要有浮动等等知识,大家感兴趣的,可以参考一下。下面我…

    2025年12月24日 好文分享
    000
  • 移动端的flex三栏布局的相关知识介绍(代码示例)

    本篇文章给大家带来的内容是关于移动端的flex三栏布局的相关知识介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 默认情况下先显示移动端,通过 @media 属性适配屏幕变化 使用flexbox相关的CSS属性 display: flex; (父元素) flex-wr…

    好文分享 2025年12月24日
    000
  • css中flex弹性布局的步骤讲解(附代码)

    本篇文章给大家带来的内容是关于css中flex弹性布局的步骤讲解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 html: *{ margin: 0; padding: 0; box-sizing: border-box; } .wrap{ width: 300px; h…

    2025年12月24日 好文分享
    000
  • css3学习之flex实现几种多列布局

    本篇文章就给大家介绍css3学习之flex实现几种多列布局的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 基本的等分三列布局 .container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; b…

    2025年12月24日 好文分享
    000
  • PC端移动端不同屏幕大小下响应式布局

    本文给大家介绍pc端移动端不同屏幕大小下响应式布局,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 先上效果图: PC端效果: 移动端效果: 代码如下: 响应式布局1234 pc.css  样式代码: *{margin:0;padding:0;}ul{width:calc(100%…

    2025年12月24日
    000
  • PC端无论页面有没有完全撑开把footer保持在最底部(不用定位)

    最近在写项目,有的页面没有占到一屏,然后footer也就是底部就靠上了,这样很影响美观,于是在网上找了找,下面是我的成果 解决该问题的最好方法是采用CSS3提供的一种先进布局模型 :flexbox,可以建立具有适应性的布局。 下面我们代码走起来 ……… html{ height: 100…

    好文分享 2025年12月24日
    000
  • css设置多列等高布局的方法示例

    这篇文章主要介绍了css设置多列等高布局的方法示例的相关资料,小有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 初始时,多个列内容大小不同,高度不同。现在需要设置不同的背景来显示,而且各个列的高度需要保持一致。那么这就需要利用到多列等高布局。 最终需要的效果:   1. 真实等高布…

    2025年12月24日 好文分享
    000
  • 如何使用纯CSS实现蚊香燃烧的效果(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现传统蚊香燃烧的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/front-end-d…

    2025年12月24日
    000
  • CSS怎么实现底部对齐?css实现底部对齐的三种方法

    本篇文章给大家带来的内容是关于css怎么实现底部对齐?css实现底部对齐的三种方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 CSS实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果: 效果说明: 1、红色区域数据需要倒排(即从底部开始数,数字为1、2、3、4、5)…

    2025年12月24日
    000
  • 如何使用CSS和GSAP实现树枝发芽的loader动画(附源码)

    本篇文章给大家带来的内容是关于如何使用css和gsap实现树枝发芽的loader动画(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解…

    2025年12月24日
    000
  • css实现横向滚动条的两种方式(代码实例)

    本章给大家介绍用css实现横向滚动条的两种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 html代码: 全部 Adobe 微软 会计 绘画 Adobe 微软 会计 绘画 一、 原始css + jquery 实现横向滚动条(原生js可以实现,为了方便才用的jQuery) css…

    好文分享 2025年12月24日
    000
  • 如何使用纯CSS实现方块跳跃的动画(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现方块跳跃的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom,容器…

    2025年12月24日
    000
  • 如何使用纯CSS实现一个足球场的俯视图(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现一个足球场的俯视图(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom…

    2025年12月24日
    000
  • 纯css如何实现瀑布流?css实现瀑布流的两种方式

    瀑布流的布局感觉还是蛮不错的,所以本篇文章就给大家来分享一下css实现瀑布流布局的两种方法,通过multi-column多列布局实现瀑布流和flex布局实现瀑布流。 1.multi-column多列布局实现瀑布流 先简单的讲下multi-column相关的部分属性 column-count设置列数 …

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信