弹性盒子布局实例

最新推荐文章于 2024-02-27 16:51:47 发布

橘猫吃不胖～

最新推荐文章于 2024-02-27 16:51:47 发布

阅读量1.4k

点赞数 1

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_46612221/article/details/120933940

版权

CSS 专栏收录该内容

24 篇文章 7 订阅

订阅专栏

弹性盒子布局实例

1.1 基本网络布局
1.2 圣杯布局

1.1 基本网络布局

布局效果：
在这里插入图片描述
.html文件中代码如下：

    <div class="dd">
        <div class="d1">1/2</div>
        <div class="d1">1/2</div>
    </div>
    <div class="dd">
        <div class="d1">1/3</div>
        <div class="d1">1/3</div>
        <div class="d1">1/3</div>
    </div>
    <div class="dd">
        <div class="d1">1/4</div>
        <div class="d1">1/4</div>
        <div class="d1">1/4</div>
        <div class="d1">1/4</div>
    </div>
    <div class="dd">
        <div class="d2">......</div>
        <div class="d2">......</div>
    </div>

CSS样式如下：

.dd {
    /* 设置为弹性盒子 */
    display: flex;
    /* 设置文字居中对齐 */
    text-align: center;
    /* 设置盒子到顶部的外边距距离为10像素 */
    margin-top: 10px;
}
.d1, .d2 {
    /* 设置项目放大比例，都同时放大 */
    flex-grow: 1;
    /* 设置项目缩小比例，当空间不足时都同时缩小 */
    flex-shrink: 1;
    /* 设置背景颜色为粉色 */
    background-color: pink;
    /* 设置每个项目的左外边距距离为8像素 */
    margin-left: 8px;
    ;
}
.d2 {
    /* 设置高度为200像素 */
    height: 200px;
}

1.2 圣杯布局

指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

布局效果：
在这里插入图片描述
.html文件中代码如下：

<body class="grail">
    <header>#header</header>
    <div class="grail-body">
        <main class="grail-content">#center</main>
        <nav class="grail-nav">#side</nav>
        <aside class="grail-aside">#right</aside>
    </div>
    <footer>#footer</footer>
</body>

CSS样式如下：

.grail {
    /* 设置弹性盒子 */
    display: flex;
    /* 排列方向从上至下 */
    flex-direction: column;
    /* 设置最低高度 vh视窗高度的百分比 视窗高度为96% */
    min-height: 96vh;
}
header, footer {
    /* 设置自动放大和缩小 */
    flex-grow: 1;
    flex-shrink: 1;
    /* 设置背景颜色为紫色 */
    background-color: plum;
    /* 设置文字自动居中 */
    text-align: center;
    /* 设置文字行高11vh */
    line-height: 11vh;
}
.grail-body {
    /* 设置弹性盒子布局 */
    display: flex;
    /* 设置自动放大 */
    flex-grow: 1;
    /* 设置自动缩小 */
    flex-shrink: 1;
    text-align: center;
    /* 设置文字行高 */
    line-height: 75vh;
}
.grail-content {
    flex-grow: 1;
    flex-shrink: 1;
    background-color: powderblue;
}
.grail-nav, .grail-aside {
    /* 设置两边宽度为12em */
    flex: 0 0 12em;
    height: 75vh;
}
.grail-nav {
    background-color: peachpuff;
    /* 设置顺序在最左边 */
    order: -1;
}
.grail-aside {
    background-color: pink;
}