1. 首页首页
  2. 编程日记编程日记

2025年grid flex布局（flex布局和grid布局的区别）

编程日记 • • 阅读 123

grid flex布局（flex布局和grid布局的区别）前言 不久以前 所有 HTML 页面的布局还都是通过 table float 以及其他的 CSS 属性来完成的 面对复杂页面的布局 却没有很好的办法 然而 Flexbox 的出现 便轻松的解决了复杂的 Web 布局 现在 又出现了一个构建 HTML 最佳布局体系的新竞争者 它就是强大的 CSS Grid 布局 Flexbox 是一维布局系统 适合做局部布局 比如导航栏组件 Grid 是二维布局系统 通常用于整个页面的规划 二者从应用场景来说并不冲突 虽然 Flexbox



前言：
不久以前，所有 HTML 页面的布局还都是通过 table、float 以及其他的 CSS 属性来完成的。面对复杂页面的布局，却没有很好的办法。然而 Flexbox 的出现，便轻松的解决了复杂的 Web 布局。 现在，又出现了一个构建 HTML 最佳布局体系的新竞争者。它就是强大的 CSS Grid 布局。

  1. Flexbox 是一维布局系统，适合做局部布局，比如导航栏组件。
  2. Grid 是二维布局系统，通常用于整个页面的规划。
  3. 二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局，但是没有 Grid 强大和灵活。二者结合使用更加轻松。

简述
flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。

Flexbox布局（Flexible Box)模块旨在提供一个容器里的项目布局（基于一维），即使他们的大小是未知或者是动态的。

浏览器兼容性比较差，只能兼容到ie9以上。

flexbox 的两根轴线:
当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。 主轴由 定义,另一根轴垂直于它。 我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。

  • 按作用目标划分
作用在父容器上作用在子项上flex-directionflex-growflex-wrapflex-shrinkflex-flowflex-basisjustify-contentflexalign-itemsalign-selfalign-contentorder
  • flex容器 flexbox 的区域就叫做 flex 容器。创建 flex 容器， 应把一个容器的 属性值改为 或者 。 完成这一步之后，容器中的直系子元素就会变为 flex 元素。子元素CSS属性都会有一个初始值，以下属性默认值会设置如下：



    

  1. display:flex

      

    • 设置flex容器：
      • 

    

    2. 





    

  1. flex-direction

      

    • 主轴方向由 flex-direction 定义，可以取4个值：
      • 

    

    2. 





如图：






    

  • 交叉轴
交叉轴垂直于主轴，如果你的flex-direction (主轴) 设成了 row 或者 row-reverse 的话，交叉轴的方向就是沿着列向下的。
如果主轴方向设成了 column 或者 column-reverse，交叉轴就是水平方向。
    • 



    

  1. flex-wrap

      

    • 是否换行，由 flex-wrap 设置，可以取3个值：
      • 

    

    2. 





    

  1. flex-flow

      

    • flex-flow 是 flex-direction 和 flex-wrap 组合的简写属性 。第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap。
      • 

    

    2. 





    

  1. align-items

      

    • align-items 属性可以使元素在交叉轴方向对齐。
      • 

    

    2. 





    

  1. align-content

      

    • align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
      • 

    • 该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap）。
      • 

    • align-content 和 align-items 实现效果相同，区别在于前者对flex容器内的多行flex元素生效，后者单行或者多行都会生效：
      • 

    

    2. 





    

  1. justify-content

      

    • justify-content属性用来使元素在主轴方向上对齐
      • 

    

    2. 






    

  1. flex-gow

      

    • 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
      • 

    

    2. 





    

  1. flex-shrink

      

    • 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
      • 

    

    2. 





    

  1. flex-basis

      

    • 给上面两个属性分配多余空间之前，计算项目是否有多余空间，默认值为auto,即项目本身的大小
      • 

    

    2. 





    

  1. flex

      

    • flex属性是 、、的简写，默认为 0，1，auto。
      • 

    

    2. 





    

  1. align-self

      

    • align-self 属性则施加在 flex 容器中的 item 上,允许单个项目有与其他项目不一样的对齐方式,如果想设置某一个item有不一样的对齐方式的时候，可以用它。
      • 

    

    2. 





    

  1. order

      

    • 规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。值越小排序越往前。
      • 

    

    2. 








简述

网格布局（Grid）是最强大的 CSS 布局方案。
Grid 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。







    

  1. 固定和灵活的轨道尺寸；
    2. 

  2. 可以使用行号，名称或通过定位网格区域将项目放置在网格上的精确位置；
    3. 

  3. 可以将多个项目放入网格单元格或区域中，它们可以彼此部分重叠。
    4. 




兼容性比较差。







采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。







    

  1. display: grid

      

    • 设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
      • 

    

    2. 





    

  1. grid-template-columns

      

    • 定义每一列的列宽
      • 

    

    2. 





    

  1. grid-template-rows

      

    • 定义每一行的行高
      • 

    

    2. 





    

  1. repeat() & auto-fill 关键字 & fr 关键字 & minmax() & auto 关键字 & 网格线的名称
    2. 





grid-template-columns、grid-template-rows设置的行或者列比较多的时候，可以使用repeat()这个函数简化重复的值






    

  1. grid-row-gap

      

    • 设置行与行的间隔（行间距）
      • 

    

    2. 





    

  1. grid-column-gap

      

    • 设置列与列的间隔（列间距）
      • 

    

    2. 





    

  1. grid-gap

      

    • grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。
      • 

    

    2. 





    

  1. grid-template-areas

      

    • 网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
      • 

    

    2. 





    

  1. grid-auto-flow

      

    • 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。
      • 

    

    2. 





    

  1. justify-items

      

    • justify-items属性设置单元格内容的水平位置（左中右）
      • 

    

    2. 





    

  1. align-items

      

    • align-items属性设置单元格内容的垂直位置（上中下）
      • 

    

    2. 





    

  1. place-items

      

    • place-items属性是align-items属性和justify-items属性的合并简写形式。
      • 

    

    2. 





    

  1. justify-content

      

    • justify-content属性是整个内容区域在容器里面的水平位置（左中右）
      • 

    

    2. 





    

  1. align-content

      

    • align-content属性是整个内容区域的垂直位置（上中下）
      • 

    

    2. 





    

  1. place-content

      

    • place-content属性是align-content属性和justify-content属性的合并简写形式。
      • 

    

    2. 





    

  1. grid-auto-columns & grid-auto-rows

      

    • 用来设置，浏览器自动创建的多余网格的列宽和行高。
      • 

    

    2. 





    

  1. rid-template

      

    • grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
      • 

    

    2. 





    

  1. grid

      

    • grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。
      • 

    

    2. 






    

  1. grid-column-start

      

    • 项目左边框所在的垂直网格线
      • 

    

    2. 





    

  1. grid-column-end

      

    • 项目右边框所在的垂直网格线
      • 

    

    2. 





    

  1. grid-row-start

      

    • 项目上边框所在的水平网格线
      • 

    

    2. 





    

  1. grid-row-end

      

    • 项目下边框所在的水平网格线
      • 

    

    2. 





例子1
上述四个项目属性值既可以为数字也可以为网格线名




    

  1. grid-column

      

    • grid-column属性是grid-column-start和grid-column-end的合并简写形式
      • 

    

    2. 





    

  1. grid-area

      

    • grid-area属性指定项目放在哪一个区域。
      • 

    

    2. 





    

  1. justify-self & align-self & place-self

      

    • 属性设置单元格内容的水平位置（左中右），跟属性的用法完全一致，但只作用于单个项目。
      • 

    • 属性设置单元格内容的垂直位置（上中下）， 跟属性的用法完全一致，也是只作用于单个项目。
      • 

    • 属性是属性和属性的合并简写形式。
      • 

    

    2. 






    

  • Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
    • 

  • Grid 可以做Flexbox做不了的事，Flexbox 比 Grid 兼容性更好，他们可以共同工作。Grid item可以成为flexbox容器，flex item可以成为grid 容器。
    • 

  • 综上所述，可以根据业务场景需要选择相应布局。
    • 


                    


                    


                    

                        

                            

                                编程小号
                            

                            

                                

                                    
                                        
                                    
                                

                            

                        

                    

                


                

                    
                    
                    

                        
                        

                             上一篇
                            2026-03-10 16:06
                        

                    

                    
                    


                    
                    
                    

                        
                        

                            下一篇 
                            2025-09-12 16:51
                        

                    

                    
                    
                


                

                    
相关推荐

                    
                

                

                    

                        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，
                        请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/52274.html