css样式display:flex display:grid

display: grid

display: grid参考网址

空间居中布局 place-items

<template>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</template>
<style lang="less" scoped>
.container {
    & > div {
        border: 1px solid red;
        height: 100px;
        width: 100%;
        box-sizing: border-box;
        display: grid;
        place-items: center;
        // place-items: center  核心代码，align-item属性控制垂直位置，justify-items属性控制水平位置。这两个属性值一致时，可以合并写一个值；
	// place-items: <align-items><justify-items>;
	// place-items: center;等同于 place-items: center center;
	// place-items: start | center | end;
    }
}
</style>

并列布局 flex: flex-grow flex-shrink flex-basis;

<template>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</template>
<style lang="less" scoped>
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    & > div {
     border: 1px solid red;
     flex: 1 1 150px;
     margin: 5px;
     // flex属性是flex-grow、flex-shrink、flex-basis这三个属性得简写形式
     // flex: <flex-grow> <flex-shrink> <flex-basis>
     // flex-basis: 项目的初始宽度
     // flex-grow: 指定如果有多余宽度，项目是否可以扩大
     // flex-shrink: 指定如果宽度不足，项目是否可以缩小
     // flex: 0 1 150px的意思是，项目的初始宽度是150px,且不可以扩大，但是当容器宽度不足150px,项目可以缩小。如果写成flex: 1 1 150px,就表示项目始终会沾满所有宽度
    }
}
</style>

两栏式布局 grid-template-columns

一个边栏，一个主栏
下面的实现是，边栏始终存在，主栏根据设备宽度，变宽或变窄。如果希望主栏自动换到下一行，可以参考上面“并列布局”

<template>
    <div class="container">
        <div>1</div>
        <div>2</div>
    </div>
</template>
<style lang="less" scoped>
.container {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
    // grid-template-columns指定页面分成两列。第一列的宽度是minmax(150px, 25%),即最小宽度为150px，最大宽度为总宽度的25%；第二列为1fr，即所有剩余宽度。

    & > div {
        border: 1px solid red;
        height: 100px;
    }
}
</style>

三明治布局 grid-template-rows

三明治布局指的是，页面在垂直方向上，分成三部分：页眉、内容区、页脚。
这个布局会根据设备宽度，自动适应，并且不管内容区有多少内容，页脚始终在容器部（粘贴页脚）。也就是说，这个布局总是会占满整个页面高度

<template>
    <div class="container">
        <div>header</div>
        /**第二层可以加height高度*/
        <div>main</div>
        <div>footer content</div>
    </div>
</template>
<style lang="less" scoped>
.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    // grid-template-rows,指定垂直高度怎么划分，这里从上到下分成三部分。第一部分（页眉）和第三部分（页脚）的高度都为auto，即本来的内容高度；第二部分（内容区）的高度为1fr，即剩余的所有高度，这可以保证页脚始终在容器的底部

    & > div {
        border: 1px solid red;
    }
}
</style>

案例：整页布局，有个区域高度不明确自动出现滚动条

注： 这种办法很好的解决了，整个页面布局不出现滚动条占一整页，main内容区高度不够时出现滚动条的案例！！！

<template>
    <div class="container">
        <div>header</div>
        <div class="main-content">
            <div style="height: 1000px">main</div>
        </div>
        <div>footer content</div>
    </div>
</template>
<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;

    .main-content {
        overflow: hidden;
        overflow-y: scroll;
    }

    & > div {
        border: 1px solid red;
    }
}
</style>

圣杯布局 grid-template

页面分为五个部分，除了页眉和页脚，内容区分成左边栏、主栏、右边栏。

<template>
    <div class="container">
        <div>header</div>
        <div>left</div>
        <div>main</div>
        <div>right</div>
        <div>footer</div>
    </div>
</template>
<style lang="less" scoped>
.container {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
    // grid-template它是两个属性grid-template-rows(垂直方向）和grid-template-columns(水平方向）的简写形式
    // gird-template: <grid-template-rows> / <grid-template-columns>
    //gird-template-rows和grid-template-columns都是auto 1fr auto，就表示页面在垂直方向和水平方向上，都分成三个部分。第一部分（页眉和左边栏）和第三部分（页脚和右边栏）都是本来的内容高度（或宽度），第二部分（内容区和主栏）占满剩余的高度（或宽度）

    & > div:nth-child(1) {
        grid-column: 1 / 4;
        background-color: red;
    }

    & > div:nth-child(2) {
        // grid-column: 1 / 2;
        background-color: yellow;
    }

    & > div:nth-child(3) {
        // grid-column: 2 / 3;
        background-color: pink;
    }

    & > div:nth-child(4) {
        // grid-column: 3 / 4;
        background-color: blueviolet;
    }

    & > div:nth-child(5) {
        grid-column: 1 / 4;
        background-color: greenyellow;
    }

}

</style>

display: flex

display: flex参考网址

使一个区域里的内容水平，垂直居中

/* display: flex;
flex-direction: column;
justify-content: center;
align-items: center; */