<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> 

前言

Flex布局（Flexible Box Layout，也称为弹性盒布局）是CSS3中的一种布局模式，旨在让容器能够自动调整其子元素的大小、顺序和对齐方式，以更好地适应不同设备和屏幕尺寸。它的核心理念是“弹性”，即容器中的元素可以根据可用空间进行伸缩。

一、基本概念

1. Flex容器（Flex Container）：包含Flex布局的父元素。在CSS中，通过设置或来创建一个Flex容器。
2. Flex项目（Flex Items）：直接位于Flex容器中的子元素。所有的直接子元素都会成为Flex项目。

二、主要属性

1. 容器属性

• ：定义主轴方向（即Flex项目的排列方向）。
  • ：主轴为水平方向，起点在左端。
    
    讯享网
    
    
  • ：主轴为水平方向，起点在右端。
    
    
  • ：主轴为垂直方向，起点在上沿。
    
    
  • ：主轴为垂直方向，起点在下沿。
    
    

  -：设置子元素之间的间距

  • ：在的情况下，gap属性设置的是水平间距。
  • ：在的情况下，gap属性设置的是垂直间距。
• ：定义如果一条轴线排不下，如何换行。
  • ：不换行（默认）。
  • ：换行，第一行在上方。
  • ：换行，第一行在下方。
• ： 和 的简写形式，默认值为 。
• ：定义沿主轴的对齐方式、或者换行后项目的对齐方式。
  • ：与主轴起点对齐（默认）。
  • ：与主轴终点对齐。
  • ：居中对齐。
  • ：两端对齐，项目之间的间隔平均分布。
  • ：每个项目两侧间隔相等。
  • ：每个项目之间的间隔相等。
• ：定义项目在交叉轴上的对齐方式。
  • ：与交叉轴起点对齐。
  • ：与交叉轴终点对齐。
  • ：交叉轴居中对齐。
  • ：基线对齐。
  • ：如果项目未设置高度或设置为 ，将占满整个容器的高度（默认）。
• ：定义多根轴线的对齐方式。如果只有一根轴线，该属性不起作用。
  • ：与交叉轴起点对齐。
  • ：与交叉轴终点对齐。
  • ：交叉轴居中对齐。
  • ：两端对齐，轴线之间的间隔平均分布。
  • ：每根轴线两侧间隔相等。
  • ：轴线占满整个交叉轴。

2. 项目属性

• ：定义项目的排列顺序，数值越小，排列越靠前，默认值为 。
• ：定义项目的放大比例，默认为 （即如果有剩余空间，也不放大）。
• ：定义项目的缩小比例，默认为 （即如果空间不足，该项目会缩小）。
• ：定义在分配多余空间之前，项目占据的主轴空间，默认为 。
• ：, 和 的简写，默认值为 ，也可以使用百分比来平分容器布局。
• ：允许单个项目有与其他项目不同的对齐方式，覆盖 。默认值为 ，继承父元素的 属性。

三、简单示例

讯享网

在上面的示例中， 是一个Flex容器， 是容器中的项目。项目将平均分配空间，并在主轴上两端对齐。

四、应用场景

Flex布局特别适合以下场景：

1. 垂直居中和水平居中：使用 和 可以轻松实现。
2. 自适应网格布局：通过组合 和 可以创建自适应网格。
3. 复杂布局的响应式设计：Flex布局能根据屏幕尺寸自动调整子元素的大小和排列方式。

Flex布局提供了一种强大的布局机制，可以简化许多传统的布局任务，尤其是在响应式设计和复杂布局中。

Grid布局（CSS Grid Layout）是CSS的一种强大布局系统，专门用于创建复杂的二维网格布局。与Flex布局不同，Grid布局不仅能控制水平（行）布局，还能控制垂直（列）布局，使得它非常适合设计网格样式的页面布局。

一、基本概念

1. Grid容器（Grid Container）：定义了网格布局的父元素。通过设置或创建一个Grid容器。
2. Grid项目（Grid Items）：Grid容器中的直接子元素，它们按照网格排列。
3. Grid线（Grid Lines）：网格中划分行和列的虚拟线，分别称为水平线和垂直线。
4. 网格轨道（Grid Tracks）：行轨道（row tracks）和列轨道（column tracks）是由相邻网格线之间形成的区域。
5. 网格单元格（Grid Cell）：单个的网格区域，通常由四条网格线围成。
6. 网格区域（Grid Area）：由一个或多个网格单元格组成的矩形区域。

二、容器属性

• 和 ：分别定义列和行的尺寸。可以使用, , （表示分数单位）等单位。例如，定义了三列，第一列固定100px，第二列占剩余空间的1/3，第三列占剩余空间的2/3。
• ：用于定义网格区域，可以用网格项目的名称来布局。例如：

  讯享网

• ：定义网格项目之间的间距。也可以分别使用和来单独定义行间距和列间距。
• ：定义网格项目在列方向上的对齐方式。
  • ：对齐到列起点。
  • ：对齐到列终点。
  • ：在列中居中对齐。
  • ：拉伸以填充整个列（默认）。
• ：定义网格项目在行方向上的对齐方式，值同。
• ：定义整个网格在容器中的水平对齐方式。
• ：定义整个网格在容器中的垂直对齐方式。

三、项目属性

• 和 ：定义项目在网格中占据的列范围。例如， 表示项目从第1条垂直线开始，延伸到第3条垂直线结束，占据2列。
• 和 ：定义项目在网格中占据的行范围，使用方式与列类似。
• ：指定项目所在的网格区域，既可以使用定义的区域名称，也可以使用的组合定义。
• ：定义单个项目在列方向上的对齐方式，覆盖属性。
• ：定义单个项目在行方向上的对齐方式，覆盖属性。

四、简要示例

讯享网

在这个例子中，我们创建了一个简单的页面布局，包括头部（header）、侧边栏（sidebar）、主内容区（main）和底部（footer）。使用Grid布局，我们可以轻松地定义每个部分的排列方式和位置。

五、应用场景

Grid布局适用于需要二维布局的场景，如：

1. 复杂网页布局：使用Grid布局可以轻松地创建复杂的网页布局，包括多栏布局、卡片布局等。
2. 响应式设计：通过结合媒体查询，可以使用Grid布局创建灵活的响应式设计，适应不同屏幕尺寸。
3. 界面设计：在需要精确控制元素位置的界面设计中，Grid布局是非常有用的工具。

CSS Grid布局提供了一种强大的方式来管理复杂的网页布局，使得设计变得更加灵活和高效。