flex grid 布局

本文详细介绍了CSS布局中的flex和grid两种方法,包括它们的属性和用法。通过实例展示了如何使用flex-direction调整主轴方向,以及grid-template-columns设置列宽。同时,讲解了元素分类、position定位,如relative、absolute和fixed。最后,给出了一个实际的HTML和CSS代码示例,用于创建响应式页面布局。

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

元素分类

2.position 定位

3.flex布局

父元素属性

子元素属性

4.grid布局

  • ​ 行内元素

  • ​ 块级元素

  • ​ 行内块元素

    布局分类

    1.float 浮动

    浮动元素的顶部,

    在标准文档流的底部

  • 对div2进行浮动:浮动元素的顶部,在标准文档流的底部
  • 对div3和div3进行浮动:浮动元素会显示在同一行,依次排列
  • 对div2、div3和div4进行浮动:如果宽度不够,被浮动的元素会自动换行
  • 对div2、div4进行浮动:浮动元素的顶部,在标准文档流的底部
  • relative 相对定位:相对原来位置,偏移一定距离

  • absolute 绝对定位:相对于position不为static的父元素,偏移一定距离

    父相子绝:父元素relative,子元素absolute

  • fixed 固定定位:相对浏览器定位

  • static 没有定位:

  • flex-direction 调整主轴方向

    row   				行排布
    row-reverse			同一行反向排布
    column				列排布
    column-reverse		同一列反向排布
  • justify-content 主轴子元素排列

    flex-start  		从头部排列
    flex-end			从尾部排列
    center				居中排列
    space-around		平分剩余
    space-between		两边贴边,平分剩余
  • align-items 侧轴方向,子元素的排列

    flex-start			从上到下
    flex-end			从下到上
    stretch				拉伸(子元素去掉高度)
    center				居中
  • flex-wrap属性 子元素是否换行

    wrap    换行
    no-wrap    不换行
  • flex-flow 属性: 复合属性,flex-direction和flex-wrap

    flex-flow:row-wrap
  • align-content属性 子元素整体,在父元素中的对齐方式

    flex-start		侧轴头部排列
    flex-end		侧轴尾部排列
    center			居中排列
    space-around	侧轴平分空间
    space-between	两侧贴边,平分剩余空间
  • flex属性 份数

    flex:1
  • align-self属性 自己的对齐方式

    stretch			拉伸
    center			居中
    start			左对齐
    end				右对齐
  • order属性 排序

  • grid-template-columns属性 :设置列宽

    .grid{
    	display:grid;
    	grid-template-columns:1fr 1fr 1fr;			#各占三分之一
    	column-gap:24px;							#列间距
        row-gap:24px;								#行间距
    }
  • align-items 竖直方向上对齐子元素

     
  • justify-items 水平方向上对齐子元素

    center		居中对齐
    end			靠右对齐
    space-between	两端对齐
  • justify-content 对轨道水平方向对齐

    center   			居中对齐
    end					靠右对齐
    space-between     	两端对齐
  • align-content 对轨道竖直进行对齐

    center		居中对齐
    end			靠下对齐
  • html文件

      <div class="container">
        <header></header>
        <sidebar></sidebar>
        <content></content>
        <footer></footer>
      </div>

    css

        .container {
          width: 300px;
          height: 400px;
          /* border: 1px solid #000; */
    
          display: grid;
    
          /* 设置列宽和行高 */
          grid-template-columns: 100px 100px 100px;
          grid-template-rows: 100px 100px 100px 100px;
    
          /*间隔*/
          grid-row-gap: 10px;
          grid-column-gap: 10px;
    
          /* 进行位置排布 */
          grid-template-areas:
            "header header header"
            "sidebar content content"
            "sidebar content content"
            "footer footer footer"
          ;
    
    
        }
    
        /*给子元素起名字*/
        header {
          grid-area: header;
          background: #ef757f;
        }
    
        sidebar {
          grid-area: sidebar;
          background: #ffc65f;
        }
    
        content {
          grid-area: content;
          background: #70cfff;
        }
    
        footer {
          grid-area: footer;
          background: #73db91;
        }
### CSS Float、Flexbox 和 Grid 布局的使用场景与区别 #### 一、Float布局的特点及其适用范围 Float属性主要用于使元素脱离文档流并沿着其父级容器边缘浮动,通常用于创建多列布局或让文本环绕图片显示。然而,在现代Web开发实践中,由于它会引发一些复杂的行为(比如清除浮动问题),因此不推荐作为主要布局手段[^1]。 #### 二、Flexbox布局的优势及应用场景 Flexbox是一种灵活的一维布局模型,适用于处理单方向上的项目排列——无论是水平还是垂直方向都可以轻松应对。通过设置`display:flex`以及调整子项之间的间距、对齐方式等参数,能够快速构建响应式的组件结构,如导航菜单、工具栏或是卡片式界面设计[^2]。 ```css /* Flexbox 实现简单的两栏布局 */ .box { display: flex; } .left { width: 100px; padding-right: 12px; box-sizing: border-box; text-align: right; font-weight: 600; } .right { flex: 1; } ``` #### 三、Grid布局的功能特性与最佳实践领域 相较于仅能在单一轴向上操作的Flexbox而言,CSS Grid提供了更为强大的二维空间管理能力。借助于行列定义功能,开发者可以精确指定各个区域的具体位置,并且支持跨行/列单元格的操作,非常适合用来搭建复杂的页面框架或者是仪表盘类应用界面[^3]。 ```css /* Grid 创建一个基础网格 */ .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .item { background-color: lightblue; padding: 1em; text-align: center; } ``` 综上所述,虽然这三种技术都能满足不同程度的需求,但在选择具体采用哪种方案时还需考虑实际项目的特性和预期效果: - 对于较为简单的内容排版需求,尤其是当只需要在一维内安排元素顺序的情况下,Flexbox通常是首选; - 如果涉及到更精细的空间规划,则应优先考虑利用Grid所提供的强大布局选项来完成任务; - 而对于那些遗留下来的旧版本浏览器兼容性要求较高的情况,可能不得不暂时依赖传统的Float方法来进行基本定位工作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值