用flex实现css经典布局------圣杯布局

本文链接： https://blog.csdn.net/suandfei/article/details/102758225

圣杯布局：

圣杯布局就是上下定高，中间自适应。中间左右的定宽但是高度自适应。

首先在讲圣杯布局之前，问你一个问题 flex:1 你是否真正的理解？

首先flex:1 时是 flex-basis:0 flex-grow:1 flex-shrink:1

好的我们一一来讲下 flex-basis:0 首先代替的是flex项目中的宽度，什么意思呢就是给一个项目中同时设置宽度和 flex-basis 那么这个项目的宽度肯定是按照flex-basis的。flex-grow:1 默认值是0 也就是说他不平分容器中的剩余空间而flex-shrink:1 则是缩放默认值容器的宽度压缩项目也会跟着压缩就是这个意思。
看下面例子：中间那个div 已经实现了自适应了。

<!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>
    <style>
       #father{

           height: 100px;
           background-color: #ff0;
           display:flex;
       }
       div.child1{
          width: 100px;
          background-color: #369;
       }
       div.child2{
           width: 100px;
           background-color: #963;
           flex:1
           /*  这里的宽度是不起作用的 由于flex:1   */
       }
      div.child3{
          width: 100px;
          background-color: #339;
      }
    </style>
</head>
<body>
    <div id="father">
          <div class="child1"></div>
          <div class="child2"></div>
          <div class="child3"></div>
    </div>
</body>
</html>

而圣杯布局就是再次基础上进行开发，只不过更换了主轴方向，所以中间div其实平分了剩余高度。然后在把中间div设置为display:flex 然后做一个自适应。圣杯就完成了代码如下。 flex 容器中的项目如果不设置高度时，默认撑满父元素高度，一定要注意主轴方向。

<!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>
    <style>
        body,html{
            height: 100%;
        }
      #parent{
          height:100%;
          background-color:#36e;
          display: flex;
          justify-content: space-between;
           flex-direction: column;
         }
         div.child1{
             height: 100px;
             background-color: #111555;
         }
       div.child2{
            flex:1;
            background-color: #0f0;
            display: flex;
       }
       div.child3{
           height: 100px;
           background-color: red;
       }
       div.child4{
           width: 100px;
           background-color: #f3f;
       }
       div.child5{
           flex:1;
           background-color:lightgreen;
       }
       div.child6{
           width: 100px;
           background-color: black;
       }
    </style>
</head>
<body>
    <div id="parent">
            <div class="child1">11</div>
            <div class="child2">
                <div class="child4"></div>
                <div class="child5"></div>
                <div class="child6"></div>
            </div>
            <div class="child3">11</div>
    </div>
</body>
</html>

实现的效果图如下：
在这里插入图片描述
你们可以自己去尝试，希望对你有所帮助。

用flex实现css经典布局------圣杯布局

圣杯布局：

猜你喜欢