1、Flexbox布局
原理
Flexbox（弹性盒子布局模型）提供了一种更加高效的方式来对容器中的子元素进行布局、对齐和分配空间。它能够根据容器的大小和子元素的内容自动调整布局，非常适合一维布局（水平或垂直方向）。
优势
灵活性高：可以轻松实现元素的对齐、分布和顺序调整。
响应式友好：在不同屏幕尺寸下能保持良好的布局效果。
代码简洁：通过少量的CSS属性就能实现复杂的布局。
属性
Flexbox 是通过设置 display: flex/inline-flex 来启用的，然后通过这些属性来控制布局。
display: flex 启用Flexbox布局，将容器设置为弹性容器。
display: inline-flex 生成一个行内级弹性容器。
1、align-items 控制子元素在交叉轴上的对齐方式。
center：垂直居中对齐。
flex-start：在交叉轴开始处对齐。
flex-end：在交叉轴结束处对齐。
stretch：默认，拉伸子元素以填充容器。
baseline：项目的第一行文字的基线对齐。
2、justify-content 控制子元素在主轴上的对齐方式。
center：水平居中对齐。
flex-start：在主轴开始处对齐。
flex-end：在主轴结束处对齐。
space-between：均匀分布，两端贴边。
space-around：均匀分布，项目两侧间距相等。
3、flex-direction 改变主轴的方向。
row：默认，主轴水平从左到右。
row-reverse：主轴水平从右到左。
column：主轴垂直从上到下。
column-reverse：主轴垂直从下到上。
4、flex-wrap 定义如果一条轴线排不下，如何换行。
nowrap（默认值）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
5、align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
stretch（默认值）：轴线占满整个交叉轴。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
示例
<template>
<div style="display: flex; height: 100vh;">
<div style="padding: 20px; flex: 0 0 200px; background-color: #f0f0f0;">左侧导航栏</div>
<div style="padding: 20px; flex: 1; background-color: #e0e0e0;">主要内容区域</div>
</div>
</template>2、 Grid布局
原理
Grid（网格布局）是一种二维布局模型，它将容器划分为行和列，子元素可以放置在这些网格单元格中。通过定义网格的结构和子元素的位置，可以实现复杂的多列布局。
优势
二维布局能力：可以同时控制行和列的布局，适合复杂的页面结构。
精确控制：能够精确指定元素在网格中的位置和大小。
响应式设计：可以根据不同的屏幕尺寸调整网格布局。
属性
Grid 是通过设置 display: grid/inline - grid 来启用的，然后通过这些属性来控制布局。
display: grid 将容器设置为块级网格容器，容器内部的子元素会根据网格布局规则进行排列。
display: inline - grid 生成一个行内级网格容器，容器本身以行内元素的形式呈现，但其内部子元素依然遵循网格布局规则。
1、grid-template-columns 和 grid-template-rows
这两个属性分别用于定义网格的列和行。
<div style="display: grid; grid-template-columns: 100px 200px 1fr; grid-template-rows: auto 200px;" class="container">
<!-- 这里可以放置容器内的子元素 -->
<div>子元素1</div>
<div>子元素2</div>
<div>子元素3</div>
...
</div>2、grid-template-areas
用于定义网格区域，通过给不同的网格区域命名，可以更直观地控制子元素的位置。
<div style="display: grid; grid-template-areas: 'header header' 'sidebar main' 'footer footer'; grid-template-columns: 1fr 3fr; grid-template-rows: auto 1fr auto;" class="container">
<div style="grid-area: header;" class="item1">
<!-- 这里是头部内容 -->
Header
</div>
<div style="grid-area: sidebar;" class="item2">
<!-- 这里是侧边栏内容 -->
Sidebar
</div>
<div style="grid-area: main;" class="item3">
<!-- 这里是主要内容 -->
Main Content
</div>
<div style="grid-area: footer;" class="item4">
<!-- 这里是底部内容 -->
Footer
</div>
</div>3、grid-column-gap 和 grid-row-gap（属性值是 px）
grid-column-gap 用于设置列与列之间的间距。
grid-row-gap 用于设置行与行之间的间距。
4、justify-items 控制子元素在网格单元格内的水平对齐方式。
start：子元素在单元格的左侧对齐。
end：子元素在单元格的右侧对齐。
center：子元素在单元格内水平居中对齐。
stretch（默认值）：子元素拉伸以填充整个单元格的宽度。
5、align-items 控制子元素在网格单元格内的垂直对齐方式。
start：子元素在单元格的顶部对齐。
end：子元素在单元格的底部对齐。
center：子元素在单元格内垂直居中对齐。
stretch（默认值）：子元素拉伸以填充整个单元格的高度。
6、justify-content 当网格的总宽度小于容器宽度时，控制整个网格在容器内的水平对齐方式。
start：网格在容器的左侧对齐。
end：网格在容器的右侧对齐。
center：网格在容器内水平居中对齐。
space-between：网格项均匀分布，两端贴边。
space-around：网格项均匀分布，每个网格项两侧的间距相等。
space-evenly：网格项均匀分布，所有间距（包括与容器边缘的间距）都相等。
7、align-content 当网格的总高度小于容器高度时，控制整个网格在容器内的垂直对齐方式。
start：网格在容器的顶部对齐。
end：网格在容器的底部对齐。
center：网格在容器内垂直居中对齐。
space-between：网格项均匀分布，两端贴边。
space-around：网格项均匀分布，每个网格项两侧的间距相等。
space-evenly：网格项均匀分布，所有间距（包括与容器边缘的间距）都相等。
示例
<template>
<div style="display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: 'header header' 'nav main' 'footer footer'; height: 100vh;"
class="grid-container">
<header style="grid-area: header; background-color: #f0f0f0; padding: 20px;" class="grid-item" >
头部
</header>
<nav style="grid-area: nav; background-color: #e0e0e0; padding: 20px;" class="grid-item" >
导航栏
</nav>
<main style="grid-area: main; background-color: #d0d0d0; padding: 20px;" class="grid-item" >
主要内容
</main>
<footer style="grid-area: footer; background-color: #f0f0f0; padding: 20px;" class="grid-item" >
底部
</footer>
</div>
</template>3、组合布局
原理
在实际项目中，通常会结合使用Flexbox和Grid布局，充分发挥它们的优势。例如，在一个
页面中，整体布局使用Grid，而某个局部区域使用Flexbox。
优势
灵活性最大化：可以根据不同的需求选择最合适的布局方式。
适应复杂场景：能够处理各种复杂的页面结构。
示例
<template>
<div class="grid-container" style="display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; height: 100vh;" >
<header class="grid-item" style="background-color: #f0f0f0; padding: 20px;" >
头部
</header>
<div class="flex-container grid-item" style="display: flex; padding: 20px;" >
<div class="flex-item" style="flex: 0 0 200px; background-color: #e0e0e0; padding: 20px;" >
侧边栏
</div>
<div class="flex-item main-content" style="flex: 1; background-color: #d0d0d0; padding: 20px;" >
主要内容
</div>
</div>
<footer class="grid-item" style="background-color: #f0f0f0; padding: 20px;" >
底部
</footer>
</div>
</template>4、基于组件的布局
原理
将页面拆分成多个组件，每个组件负责特定的功能或区域。通过组合这些组件来实现整个页
面的布局。这种方式符合Vue的组件化开发思想，提高了代码的可维护性和复用性。
优势
可维护性高：每个组件独立开发和维护，降低了代码的耦合度。
复用性强：可以在不同的页面或项目中重复使用组件。
示例
<template>
<div id="app">
<HeaderComponent />
<MainComponent />
<FooterComponent />
</div>
</template>
<script setup>
import HeaderComponent from './components/HeaderComponent.vue'
import MainComponent from './components/MainComponent.vue'
import FooterComponent from './components/FooterComponent.vue'
</script>
