vue3 中推荐使用的页面布局方式

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>