一文搞懂Grid布局和Flex布局及其区别

一文搞懂Grid布局和Flex布局及其区别

引用

CSDN

1.

https://blog.csdn.net/qq_34574204/article/details/143507602

Flexbox和Grid是CSS3中两种重要的布局方式，它们各有特点和适用场景。本文将详细介绍这两种布局方式的基本概念、属性和用法，并对比它们之间的异同，帮助读者更好地理解它们在实际开发中的应用。

Flexbox布局

简述

Flexbox是一种一维的布局方式，一次只能处理一个维度上的元素布局，即一行或一列。它特别适合用于局部布局，如导航栏等。

特点

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

缺点

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

概念

Flexbox的两根轴线：主轴和交叉轴。主轴由flex-direction定义，另一根轴垂直于它。所有Flexbox的属性都与这两根轴线有关。

属性

按作用目标划分，Flexbox的属性可以分为容器属性和子元素属性。

容器属性

1. 设置Flex容器

   display: flex | inline-flex;
   

2. flex-direction

   flex-direction: row | row-reverse | column | column-reverse;
   

3. flex-wrap

   flex-wrap: nowrap | wrap | wrap-reverse;
   

4. flex-flow

   flex-flow: row wrap;
   

5. align-items

   align-items: stretch | center | flex-start | flex-end;
   

6. align-content

   align-content: stretch | center | flex-start | flex-end;
   

7. justify-content

   justify-content: stretch | flex-start | flex-end | center | space-around | space-between;
   

子元素属性

1. flex-grow

   flex-grow: number | 0;
   

2. flex-shrink

   flex-shrink: 1 | 0;
   

3. flex-basis

   flex-basis: number | auto;
   

4. flex

   flex: 1;
   

5. align-self

   align-self: stretch | center | flex-start | flex-end;
   

6. order

   order: 5 | -1;
   

Grid布局

简述

网格布局（Grid）是最强大的CSS布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

特点

1. 固定和灵活的轨道尺寸；
2. 可以使用行号、名称或通过定位网格区域将项目放置在网格上的精确位置；
3. 可以将多个项目放入网格单元格或区域中，它们可以彼此部分重叠。

缺点

兼容性较差。

概念

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

容器属性

1. display: grid

   display: grid;
   

2. grid-template-columns

   grid-template-columns: 100px 100px 100px;
   

3. grid-template-rows

   grid-template-rows: 100px 100px 100px;
   

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

   grid-template-columns: repeat(3, 100px);
   

5. grid-row-gap

   grid-row-gap: 20px;
   

6. grid-column-gap

   grid-column-gap: 20px;
   

7. grid-gap

   grid-gap: 20px 20px;
   

8. grid-template-areas

   grid-template-areas: 'a b c'
                        'd e f'
                        'g h i';
   

9. grid-auto-flow

   grid-auto-flow: column;
   

10. justify-items

    justify-items: start | end | center | stretch;
    

11. align-items

    align-items: start | end | center | stretch;
    

12. place-items

    place-items: <align-items> <justify-items>;
    

13. justify-content

    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
    

14. align-content

    align-content: start | end | center | stretch | space-around | space-between | space-evenly;
    

15. place-content

    place-content: <align-content> <justify-content>;
    

16. grid-auto-columns & grid-auto-rows

    grid-auto-columns: 50px;
    grid-auto-rows: 50px;
    

17. grid-template

    grid-template: <grid-template-columns> <grid-template-rows> <grid-template-areas>;
    

18. grid

    grid: <grid-template-rows> <grid-template-columns> <grid-template-areas> <grid-auto-rows> <grid-auto-columns> <grid-auto-flow>;
    

项目属性

1. grid-column-start

   grid-column-start: 1;
   

2. grid-column-end

   grid-column-end: 2;
   

3. grid-row-start

   grid-row-start: 1;
   

4. grid-row-end

   grid-row-end: 2;
   

5. grid-column

   grid-column: 1 / 3;
   

6. grid-area

   grid-area: e;
   

7. justify-self & align-self & place-self

   justify-self: start | end | center | stretch;
   align-self: start | end | center | stretch;
   place-self: <align-self> <justify-self>;
   

总结

• Grid布局与Flexbox布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
• Grid可以做Flexbox做不了的事，Flexbox比Grid兼容性更好，它们可以共同工作。Grid item可以成为Flexbox容器，Flex item可以成为Grid容器。综上所述，可以根据业务场景需要选择相应布局。