【DAY_06 Flex布局+圣杯布局】

看过阮一峰大神的博客总结后提取出了自己的笔记，然后跟着理解并写了下圣杯布局：

FLEX布局：

弹性布局

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器属性：

FLEX-DIRECTION:决定主轴方向

ROW ROW-REVERSE COLUMN COLUMN-REVERSE

水平纵向

FLEX-WRAP：如何换行

NOWRAP WRAP WARP-REVERSE

不换行向下换行向上换行

FLEX-FLOW：是前两个的简写，默认值：ROW NOWRAP

JUSTIFY-CONTENT:项目在主轴上的对齐方式

FLEX-START FLEX-END CENTER SPACE-BETWEEN

右对齐

SPACE-AROUND 项目之间的间隔比项目与边框的间隔大一倍

ALIGN-ITEMS：定义项目在副轴上如何对齐

FLEX-START FLEX-END CENTER BASELINE STRETCH

项目的第一行文字的基线对齐

项目属性

ORDER：排序，越小越前

FLEX-GROW：项目的放大比例，默认为0

FLEX-SHRINK：缩小比例【负值无效。比其他值小的值在空间缩小的时候不缩小】

FLEX-BASIS：占据的主轴空间。默认值为auto，意思是跟随项目大小

FLEX：是FLEX-GROW、FLEX-SHRINK、FLEX-BASIS 简写，默认值 0 1 auto

ALIGN-SELF：可以覆盖ALIGN-ITEM属性

FLEX:1

让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容

#要求父对象有写display:flex，否则不生效

圣杯布局长什么样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>holygrail</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            color: white;
        }
        .GrailPage{
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }
        .Grail-body{
            flex: 1;
            display: flex;
            /*因为这里也display:flex了所以它的子部件的主轴是横向的*/
        }
        header,footer{
            flex: 0 0 100px;
            background: dimgray;
        }
        .content{
            background: seagreen;
            flex: 1;
        }
        .ads{
            background: deepskyblue;
            flex: 0 0 12em;
        }
        .nav{
            background: lightsalmon;
            flex: 0 0 12em;
            order: -1;  /*放在最左边*/
        }


    </style>
</head>
<body>
    <div class="GrailPage">
        <header>HEADER</header>
        <div class="Grail-body">
            <div class="content"><p>CONTENT</p></div>
            <div class="ads"><p>ADS</p></div>
            <div class="nav"><p>NAV</p></div>
        </div>
        <footer>FOOTER</footer>
    </div></body>
</html>