弹性盒子圣杯布局

Posted tujw

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹性盒子圣杯布局相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header></header>
    <div class="body">
        <nav></nav>
        <section></section>
        <aside></aside>
    </div>
    <footer></footer>
</body>
</html>
*
    margin: 0;
    padding: 0;
    list-style: none;


header,
footer 
    height: 50px;
    background-color: aquamarine;


header 
    flex: 0 0 60px;


footer 
    flex: 0 0 40px;

html 
    height: 100%;

body 
    height: 100%;
    display: flex;
    flex-direction: column;


.body 
    flex: 1;
    display: flex;


nav,
aside 
    flex: 0 0 150px;


section 
    flex: 1;
    background-color: blueviolet;

 

以上是关于弹性盒子圣杯布局的主要内容，如果未能解决你的问题，请参考以下文章

CSS3总结五：弹性盒子(flex)弹性盒子布局

CSS3--Flex弹性盒子布局: 声明弹性盒子 & 容器的属性

CSS3--Flex弹性盒子布局:弹性布局和传统布局响应对比

弹性盒子布局实例

CSS3--Flex弹性盒子布局:使用弹性盒子模型布局微信客户端

CSS3--Flex弹性盒子布局: 实例篇-网格布局