Flex 布局

Flex布局为W3C提出的一种新的方案，可以简便 完整 响应式地实现各种页面布局
注意：为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

任何一个容器都可以指定Flex布局
容器默认存在两根轴
水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

属性浏览

容器属性： - flex-direction:项目的(主轴)排列方向 - flex-wrap ：一条轴线排不下时，如何换行 - flex-flow ：flex-direction属性和flex-wrap属性的简写形式 - justify-content ：项目在主轴上的对齐方式 - align-items ：项目在交叉轴上的对齐方式 - align-content ：多根轴线时的对齐方式
项目属性: - order ：定义项目的排列顺序。 - flex-grow ：如果存在剩余空间，定义项目的放大比例 - flex-shrink ：如果空间不足，定义了项目的缩小比例 - flex-basis ：定义了在分配多余空间之前，项目占据的主轴空间 - flex ：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。 - align-self ：允许单个项目有与其他项目不一样的对齐方式，会覆盖原align-items属性。下面对这些属性细讲一下

容器的属性

flex-direction属性决定主轴的方向（即项目的排列方向）。 - row（默认值）：主轴为水平方向，起点在左端。 - row-reverse：主轴为水平方向，起点在右端。 - column：主轴为垂直方向，起点在上沿。 - column-reverse：主轴为垂直方向，起点在下沿。改变flex-direction属性值，看效果：

* {
            margin: 0;
            padding: 0;
        }
        
        .flex {
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            flex-direction: ?;
            
        }
        
        .box {
            width: 20%;
            height: 30%;
            margin: 10px;
            background-color: rgb(235, 32, 32);
        }
    </style>
</head>

<body>
    <div class="flex">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>

当flex-direction:row时，项目在容器按水平方向从左到右依次排列。效果如下图：

当flex-direction:row-reverse时，项目在容器按水平方向从右到左依次排列。效果如下图：

当flex-direction:column时，项目在容器按垂直方向从上到下依次排列。效果如下图：

当flex-direction:column-reverse时，项目在容器按垂直方向从下到上依次排列。效果如下图：

flex-wrap属性定义，如果一条轴线排不下，如何换行
- nowrap（默认）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。改变flex-wrap的属性值，看效果：

        * {
            margin: 0;
            padding: 0;
        }
        
        .flex {
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }
        
        .box {
            width: 20%;
            height: 30%;
            margin: 1px;
            background-color: rgb(235, 32, 32);
        }
    </style>
</head>

<body>
    <div class="flex">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>

    </div>

当flex-wrap:nowrap时(默认值)，不换行，宽度不够会自适应减少

当flex-wrap:wrap时，换行，宽度不够就会自动换行

当flex-wrap:wrap-reverse时，换行，宽度不够就会自动换行,从下向上换行(注意：就算是没有换行，也会从容器的最低端开始排列)

3.flex-flow属性是排列方向和换行的简写

       flex-direction: row;
       flex-wrap: wrap-reverse;
       以上两行代码可以写成以下一行
       flex-flow: row wrap-reverse;

4.justify-content属性定义了项目在主轴上的对齐方式。

- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

改变justify-content属性值，看效果：

        * {
            margin: 0;
            padding: 0;
        }
        
        .flex {
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content:?;
            
        }
        
        .box {
            width: 20%;
            height: 30%;
            margin: 1px;
            background-color: rgb(235, 32, 32);
        }
    </style>
</head>

<body>
    <div class="flex">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

当justify-content:flex-start时，左对齐效果

当justify-content:flex-end时，右对齐效果

当justify-content:center时,居中效果

当justify-content:space-between时,项目之间的距离相等，两边贴着边框

当justify-content:space-around时,项目两边有相等大小的距离(所以两个项目之间的距离等于一个项目和边框距离的两倍)

5.align-items属性定义项目在交叉轴上如何对齐。

- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

改变align-items的属性值，看效果

        * {
            margin: 0;
            padding: 0;
        }
        
        .flex {
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: ?;
        }
        
        .box {
            width: 20%;
            height: 30%;
            margin: 1px;
            background-color: rgb(235, 32, 32);
        }
    </style>
</head>

<body>
    <div class="flex">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

当align-items：flex-start时，在交叉轴起点对齐，各项目的顶部挨着容器的顶部

当align-items：flex-end时，在交叉轴终点对齐，各项目的底部挨着容器的底部

当align-items：center时，在交叉轴的中点对齐，也就是项目的中点和容器交叉轴中点在同一水平线上

当align-items：baseline时，以项目的第一行文字的基线对齐(文字的底部对齐)

6.align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

-  flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。

项目的属性

1.order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

        * {
            margin: 0;
            padding: 0;
        }
        
        .flex {
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: baseline;
        }
        
        .box {
            width: 20%;
            height: 30%;
            margin: 1px;
            background-color: rgb(235, 32, 32);
        }
        
        .o1 {
            order: 4;
        }
        
        .o2 {
            order: -3;
        }
        
        .o3 {
            order: 0;
        }
        
        .o4 {
            order: 3;
        }
    </style>
</head>

<body>
    <div class="flex">
        <div class="box o1">1</div>
        <div class="box o2">2</div>
        <div class="box o3">3</div>
        <div class="box o4">4</div>
    </div>

2.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。就是当还有剩余空间时，按照数字的比例来分配剩余的空间

        * {
            margin: 0;
            padding: 0;
        }
        
        .flex {
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: baseline;
        }
        
        .box {
            width: 10%;
            height: 30%;
            margin: 1px;
            background-color: rgb(235, 32, 32);
        }
        
        .g1 {
            flex-grow: 1;
        }
        
        .g2 {
            flex-grow: 2;
        }
        
        .g3 {
            flex-grow: 3;
        }
        
        .g4 {
            flex-grow: 4;
        }
    </style>
</head>

<body>
    <div class="flex">
        <div class="box g1">1</div>
        <div class="box g2">2</div>
        <div class="box g3">3</div>
        <div class="box g4 ">4</div>
    </div>

3.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。就是当给项目分配的空间大于容器的空间时，超出的空间部分按照给定的比例缩小

        * {
            margin: 0;
            padding: 0;
        }
        
        .flex {
            width: 500px;
            height: 200px;
            background-color: green;
            display: flex;
            flex-direction: row;
            /* flex-wrap: wrap; */
            /* justify-content: space-around; */
            /* align-items: baseline; */
        }
        
        .box {
            height: 30%;
            /* margin: 1px; */
            background-color: rgb(235, 32, 32);
        }
        
        .g1 {
            width: 300px;
            flex-shrink: 1;
            background-color: aqua;
        }
        
        .g2 {
            width: 150px;
            flex-shrink: 2;
        }
        
        .g3 {
            background-color: black;
            width: 200px;
            flex-shrink: 3;
        }
    </style>
</head>

<body>
    <div class="flex">
        <div class="box g1">1</div>
        <div class="box g2">2</div>
        <div class="box g3">3</div>

    </div>

定义了三个盒子，父容器大小为500px，g1 300px,g2 150px,g3 200px; 此时子容器比父容器大150px，
g1:3001/1200=0.25 0.25150=37.5
g2:1502/1200=0.25 0.25150=37.5
g3:2003/1200=0.5 0.5150=75 4.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size） 5.flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

参考文章[：](Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com))
感谢各位的阅读，如有不正确的地方，欢迎指正；
本人gitee[:](lesson_fullstack: 全栈开发学习 (gitee.com))

Flex布局笔记

Flex 布局

属性浏览

容器的属性

项目的属性