css弹性布局

前言：

弹性布局是一种当下新的布局手段，主要用来替代浮动来完成页面的布局。
通过设置display：flex可以使元素具有弹性，让子元素可以跟随页面的大小改变而改变。

弹性容器：

要用弹性盒，必须将一个元素设置弹性容器。
通过display来设置弹性容器
$\text{\textcircled 1}$ display：flex 设置为块级弹性容器
$\text{\textcircled 2}$ display：inline-flex 设置为行内的弹性容器

弹性元素：

弹性容器的直接子元素是弹性元素（弹性项）。
实现了大小随父元素的大小改变而改变，且有类似浮动效果，行内块级元素效果。

$\textcolor{Red}{注：使用可以嵌套，弹性元素可以是弹性容器。}$

使用：
代码样例

<ul>

    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>

</ul>

   <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 800px;
            /*height: 500px;*/
            border: 10px red solid;
            font-size: 50px;
            text-align: center;
        }
li{
    width: 100px;
    height: 100px;
    background-color: greenyellow;
}

        li:nth-child(2){
            background-color: deepskyblue;
         
        }
        li:nth-child(3){
            background-color: gray;
        }
        li:nth-child(4){
            background-color: aqua;
            
    }

    </style>

以下都是基于此代码的改变。

弹性容器设置：

flex-direction：指定容器中弹性元素的排列方式

$\text{\textcircled 1}$ row 默认值，水平排列（排列从左到右主轴：自左向右）
$\text{\textcircled 2}$ row-reverse 反向水平排列（主轴：自右向左）
$\text{\textcircled 3}$ colum 弹性元素纵向排列（从上到下主轴：自上向下）
$\text{\textcircled 4}$ colum-reverse 反向纵向排列（主轴：自下向上）
```
 主轴：弹性元素排列方向称为主轴
 侧轴：与主轴垂直方向为侧轴。
```
flex-wrap 设置弹性元素是否在容器中自动换
$\text{\textcircled 1}$ nowarp: 默认值，不换行
$\text{\textcircled 2}$ wrap：换行
$\text{\textcircled 3}$ wrap-reverse: 沿着侧轴方向反向换行。

ul{
    width: 200px;
    /*height: 500px;*/
    border: 10px red solid;
    font-size: 50px;
    text-align: center;
    display: flex;
    flex-direction:row-reverse;
    flex-wrap: wrap;
        }

设置为flex-wrap:wrap 。flex-direction:row-revers

设置为flex-wrap:wrap-reverse 。flex-direction:row-reverse。

$\textcolor{Red}{注： flex-wrap处理优先级高于 flex-shrink，即元素当在主轴方向的宽度不够时同时设置 flex-shrink （子元素）和 flex-wrap ， flex-wrap优先奏效。}$

$\textcolor{deepskyblue}{ flex-wrap和direction的简写属性： flex-flow: wrap\ row-reverse；而且没有顺序要求。}$

justify-content: 如何分配主轴上的空白空间（主轴上的元素如何排列）

$\text{\textcircled 1}$ ：flex-start 默认值弹性元素沿着主轴起始边排列。

$\text{\textcircled 2}$ ：flex-end 元素沿着主轴的终边排列

$\text{\textcircled 3}$ ：center 元素居中排列

$\text{\textcircled 4}$ ： space-around 空白均匀分布到元素左右两侧
$\text{\textcircled 5}$ ：space-between 空白均匀分布到元间间隔中间
$\text{\textcircled 6}$ ： space-evenly 空白均匀分布到元素一侧。（兼容性不太好）

分别效果如下：

flex-start
flex-end
center
space-around
space-between
space-evenly

$\textcolor{Red}{注：justify-content 当主轴方向上没有空白时是不会奏效的。}$
如:

ul{
            width: 300px;
            /*height: 500px;*/
            border: 10px red solid;
            font-size: 50px;
            text-align: center;
            display: flex;
            justify-content: center;
        }

$\textcolor{Red}{注：当然同时设置justify-content和子元素 flex-grow ，时子元素增长填充了空白位置，此时justify-content也不会奏效。}$

align-items: 设置元素在侧轴上如何对齐。

代码变化以下。

<ul>

    <li>1</li>
    <li>2<div>2 ere</div></li>
     <li>3<div>3 erersv 344444  fdfgd </div></li>
    <li>4</li>

</ul>


    <style>


        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 800px;
            height: 200px;
            border: 10px red solid;
            font-size: 20px;
            text-align: center;
            display: flex;

        }
li{
    width: 100px;
    /*height: 100px;*/
    background-color: greenyellow;
}

        li:nth-child(2){
            background-color: deepskyblue;

        }
        li:nth-child(3){
            background-color: gray;
        }
        li:nth-child(4){
            background-color: aqua;
        }

    </style>

$\text{\textcircled 1}$ ：stretch 默认值，将（同一行的）元素的高度设置为相同的值 $\textcolor{Red}{注：设置stretch时，当父元素有换行时由当前行内高度最高元素决定，\\没有换行时直接是父元素的高度决定。}$
$\text{\textcircled 2}$ ：flex-start 元素不会拉伸，沿着侧轴起始边对齐
$\text{\textcircled 3}$ ：flex-end 元素不会拉伸，沿着侧轴终边对齐
$\text{\textcircled 4}$ ： center 元素不会拉伸，垂直方向上居中对齐
$\text{\textcircled 5}$ ：baseline 元素不会拉伸，按基线对齐
设置flex-start效果
设置flex-end 效果：
设置center

baseline

$\textcolor{Red}{注： justify-content：center；align-items：center ；实现元素居中效果。}$

align-content 设置侧轴上的空白空间的分布（同justify-content）

改变下代码：

ul{
            width: 200px;
            height: 200px;
            border: 10px red solid;
            font-size: 20px;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;

            align-content: flex-start;

        }

$\text{\textcircled 1}$ ：flex-start 默认值弹性元素沿着侧轴起始边排列
$\text{\textcircled 2}$ ：flex-end 元素沿着侧轴的终边排
$\text{\textcircled 3}$ ：center 元素居中排列
$\text{\textcircled 4}$ ： space-around 空白均匀分布到元素上下两侧
$\text{\textcircled 5}$ ：space-between 空白均匀分布到元间间隔中间
$\text{\textcircled 6}$ ： space-evenly 空白均匀分布到元素一侧。（兼容性不太好）

分别效果如下：

flex-start
flex-end
center
space-around
space-between
space-evenly

弹性元素设置：

flex-grow：指定弹性元素的伸展系数，当父元素主轴上有多于空间时，子元素如何伸展。
可以理解为：对剩余的空间每一个元素按照这个系数（比例）（按权重）划分得到空间。
注意：可以分别为弹性元素设置。

$\text{\textcircled 1}$ 0：默认值，不增长。

此时每一个弹性元素都不设置增长系数，默认都是0.

（父元素总长度：800px，每一个子元素长度：100px）

$\text{\textcircled 2}$ 设置大于0的实数才进行伸展。

当2元素flex-grow：1时。即一个元素划分所有剩余的空间。
此时2元素长度：500px。

当将4元素flex-grow：3时，此时2元素200px，4元素400px。

不能为负数。

flex-shrink：指定弹性元素的收缩系数，当父元素在主轴上不能容纳所有的子元素时，如何对子元素进行收缩。
可以理解为：将宽度上多的那部分进行按系数权重划分每个元素的缩减长度。
$\text{\textcircled 1}$ 0 ：不收缩。
$\text{\textcircled 2}$ 1 ：默认值。
大于0的实数：

不能为负数
$\textcolor{Red}{注：收缩和伸展条件不会同时满足，也就不会同时奏效。}$

align-self 用来覆盖当前弹性元素上的align-items（即单独设置某个元素是否在纵向上拉伸铺满父元素或者当前行最高元素）

可选值同 align-items。

改变代码：

<style>


        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 200px;
            height: 300px;
            border: 10px red solid;
            font-size: 20px;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;

            align-content: flex-start;

        }
li{
    width: 100px;
    /*height: 100px;*/
    background-color: greenyellow;
}

        li:nth-child(2){
            background-color: deepskyblue;
            /*align-self:stretch;*/

        }
        li:nth-child(3){
            background-color: gray;
        }
        li:nth-child(4){
            background-color: aqua;
            /*align-self: stretch;*/
        }

       .e5{
            width: 100px;

            background-color: blueviolet;

        }
    </style>

当设置 4元素align-self: stretch;

flex-basis 设置元素在主轴上的基础长度。
$\text{\textcircled 1}$ ：主轴是横向的则该值就是元素的宽度
$\text{\textcircled 2}$ ：主轴是纵向的则该值就是元素的高度

默认值是auto 表示参考元素自身的高度或宽度。
传递具体数值，则以该值为基准。

$\textcolor{blueviolet}{注： flex 可以设置弹性元素的所有的三个样式：增长，缩减，基准。\\ 需要按照严格顺序\\ flex可选值为 \ initial = " flex :\ 0\ 1 \ auto " ; auto ="flex :\ 1\ 1\ auto " ; none = "\ 0\ 0 \ auto"}$