CSS基础（弹性元素之弹性元素）----PHP第九期线上班

一、flex-grow：设置弹性元素的增长因子

    1.代码展示

实例

<h3>flex-grow:设置弹性元素的增长因子</h3>
    <h4>1.所有的弹性元素不增长，以原始宽度显示，增长因子为：0（默认）</h4>
    <div class="container flex demo1">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <hr>
    <h4>2.将全部剩余空间分配给指定的弹性元素。可以将指定的元素的增长因子设置为1，其他元素为0</h4>
    <div class="container flex demo2">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <hr>
    <h4>3.全部剩余空间按增长因子在不同弹性元素间分配（按比例）。1：1：3</h4>
    <div class="container flex demo3">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <h4>4.全部剩余空间按增长因子在不同弹性元素间分配（按比例）。0.4：0.4：1.2</h4>
    <div class="container flex demo4">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    </div>
    <h4>5.每一个弹性元素宽度不同时，同样适用以上分配方式</h4>
    <div class="container flex1 demo5">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>


.container{
    border: 1px solid red;
    margin: 15px;
    background-color: seashell;
    width: 700px;
    box-sizing: border-box;
}
.flex,.flex1{
    display: flex;
}
.flex .item{
    box-sizing: border-box;
    width: 150px;
    border: 1px solid green;
}


.demo1 > .item{
    /* 默认值 */
    flex-grow: 0;
}


.demo2 > .item:first-of-type{
    flex-grow: 0;
}
.demo2> .item:nth-of-type(2){
    flex-grow: 0;
}
.demo2 > .item:last-of-type{
    flex-grow: 1;
}

/* 
可分配空间：700 - 150 * 3=250px
增长因子之和：5

增长比例=增长因子/增长因子之和
第一个：1/5 = 0.2
第二个：1/5 = 0.2
第三个：3/5 = 0.6

计算每一个元素的增长量
第一个：250 * 0.2 = 50
第二个：250 * 0.2 = 50
第三个：250 * 0.6 = 150

计算元素最后的宽度
第一个：150 + 50 =200
第二个：150 + 50 =200
第三个：150 + 150=300 
小数一样适用
*/

.demo3 >.item:first-of-type{
    flex-grow: 1;
}
.demo3 >.item:nth-of-type(2){
    flex-grow: 1;
}
.demo3 > .item:last-of-type{
    flex-grow: 3;
}

.demo4 >.item:first-of-type{
    flex-grow: 0.4;
}
.demo4 >.item:nth-of-type(2){
    flex-grow: 0.4;
}
.demo4 > .item:last-of-type{
    flex-grow: 1.2;
}


.flex1 >.item{
    box-sizing: border-box;
    border: 1px solid green;
}
.flex1 .item:last-of-type{
    width: 120px;
    flex-grow: 1;
}
.flex1 .item:first-of-type{
    width: 180px;
    flex-grow: 1;
}
.flex1 .item:nth-of-type(2){
    width: 150px;
    flex-grow: 3;
}

    2.效果展示

    3.总结

        1、增长因子存在的条件：   

             1.容器设置自定义宽度   

             2.元素设置自定义宽度    

             3.元素在主轴上的总宽度小于容器的宽度，这样才会出现多余空间  

             4.弹性容器不允许换行

 

---

二、flex-shirnk：设置弹性元素的缩减因子

    1.代码展示

    

实例

<h3>flex-shrink:设置弹性元素的缩减因子</h3>
    <h4>1.所有的弹性元素（宽度相同）不缩减，以原始宽度显示，缩减因子为：0（默认）</h4>
    <div class="container flex demo1">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <hr>
    <h4>2.所有的弹性元素（宽度相同）自适应容器宽度且不换行，所有元素的缩减因子均为1</h4>
    <div class="container flex demo2">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <hr>
    <h4>3.当三个弹性元素（宽度相同）的缩减因子不相等时，按照比例缩减（小数同样适用）</h4>
    <div class="container flex demo3">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <hr>
    <h4>4.当三个弹性元素的宽度不同时，在定义缩减因子后，还需要重新微调缩减比例</h4>
    <div class="container flex demo4">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>


.container{
    border: 1px solid red;
    box-sizing: border-box;
    background-color: rosybrown;
    margin: 15px;
    width: 550px;
    /* padding: 5px; */
}
.flex{
    display: flex;
    box-sizing: border-box;
    
}
.item{
    width: 250px;
    border: 1px solid green;
}

.demo1 > .item{
    flex-shrink: 0;
}

/*
计算步骤:
1. 获取基本变量
  1.1 多余待缩放空间: (250px + 250px +250px) - 550px = 200px
  1.2 缩减因子: 第一个: 1, 第二个: 1, 第三个: 1
  1.3 增长因子之和: 1 + 1 + 1 = 1

2. 计算缩减比例
  2.1 计算公式: 缩减比例 = 缩减因子 / 缩减因子之和
  2.2 第一个元素缩减比例: 1 / 3 = 0.3333
  2.3 第二个元素缩减比例: 1 / 3 = 0.3333
  2.4 第三个元素缩减比例: 1 / 3 = 0.3333

3. 计算每个元素的缩减
  3.1 第一个元素缩减: 20px * 0.3333 = 66.666px
  3.2 第二个元素缩减: 20px * 0.3333 = 66.666px
  3.3 第三个元素缩减: 20px * 0.3333 = 66.666px

4. 计算每个元素最终宽度
  4.1 第一个元素: 250px - 66.66px = 183.33px
  4.1 第二个元素: 250px - 66.66px = 183.33px
  4.1 第三个元素: 250px - 66.66px = 183.33px
 */
.demo2 > .item{
    flex-shrink: 1;
}


/*
缩减因子之和: 1 + 2 + 3 = 6
每个元素的缩减比例依次为: 1/6, 2/6, 3/6, 即: 0.1667, 0.3333, 0.5
每个元素的缩减量依次为: 200*0.1667 = 33.34px, 66.666px, 100px
每个元素的最终宽度依次为: 250-33.34=216.66px, 183.33px, 150px
 */
.demo3 > .item:first-of-type{
    flex-shrink: 1;
}
.demo3 > .item:nth-of-type(2){
    flex-shrink: 2;
}
.demo3 >.item:last-of-type{
    flex-shrink: 3;
}


/*
元素总宽度: 220 + 280 + 250 = 750
容器宽度550, 于是有200px的等缩减空间, 需要在每个元素中进行摊派

1. 计算缩减因子的的缩小比例: 等待缩减空间 / 每个弹性元素的宽度与缩减因子乘积的总和

缩减因子的缩小比例: 200 / (220 * 2) + (250 * 2) + (280 *6) = 200 / 2620 = 0.07633588


2. 计算每个元素的缩减量: 元素宽度 * ( 缩减因子 * 缩减因子的缩减比例)

第一个元素: 220 * ( 2 * 0.07633588) = 33.5877 px
第二个元素: 250 * ( 2 * 0.07633588) = 38.1679 px
第三个元素: 280 * ( 6 * 0.07633588) = 128.2442 px

3. 计算每个元素最终宽度

第一个元素: 220 - 33.5877 = 186.4123 px
第二个元素: 250 - 38.1679 = 211.8321 px
第三个元素: 280 - 128.2442 = 151.7558 px
 */
.demo4 >.item:first-of-type{
    width: 220px;
    flex-shrink: 2;
}
.demo4 >.item:nth-of-type(2){
    width: 250px;
    flex-shrink: 2;
}
.demo4 > .item:last-of-type{
    width: 280px;
    flex-shrink: 6;
}

    2.效果展示

    3.总结

        缩减因子使用场景:   

         1. 弹性元素设置了自定义宽度   

         2. 弹性容器设置了自定义宽度   

         3. 弹性元素总宽度在主轴上超过了弹性容器的宽度   

         4. 弹性容器不允许换行

---

三、flex-basis:设置弹性元素的基准尺寸

    1.代码展示

实例

<h3>flex-basis:设置弹性元素的基准尺寸</h3>
    <h4>1.在未设置弹性元素宽度时，以内容宽度显示。属性值为content</h4>
    <div class="container flex demo1">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <hr>
    <h4>2.在设置弹性元素宽度时，以该宽度显示</h4>
    <div class="container flex demo2">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <hr>
    <h4>3.自动状态下，由浏览器根据预设值自行判定</h4>
    <div class="container flex demo3">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <hr>
    <h4>4.当元素存在自定义宽度与基准宽度时，以基准宽度为准</h4>
    <div class="container flex demo4">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>

实例

.container{
    border: 1px solid   red;
    background-color: rosybrown;
    box-sizing: border-box;
    width: 550px;
    margin: 15px;
    padding: 5px;
}
.flex{
    display: flex;
}
.item{
    border: 1px solid green;
}

/* 1.在未设置弹性元素宽度时，以内容宽度显示。属性值为content */
.demo1 > .item{
    flex-basis: content;
}

/* 2.在设置弹性元素宽度时，以该宽度显示 */
.demo2 > .item{
    width: 100px;
}

/* 3.自动状态下，由浏览器根据预设值自行判定 */
.demo3 > .item{
    flex-basis: auto;
}

/* 4.当元素存在自定义宽度与基准宽度时，以基准宽度为准 */
.demo4 > .item{
    /* 自定义宽度 */
    width: 100px;
    /* 预设的元素宽度 */
    width: 150px;
}

    2.效果展示

---

四、简化弹性元素的基础设置

    1.代码展示

实例

<h3>flex:简化弹性元素的基础设置</h3>
    <h4>1.根据宽度计算，允许缩减适应容器</h4>
    <div class="container flex demo1">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <hr>
    <h4>2.根据宽度计算，元素完全弹性适应容器</h4>
    <div class="container flex demo2">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <hr>
    <h4>2.元素失去弹性，以原始大小呈现</h4>
    <div class="container flex demo3">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>


.container{
    border: 1px solid red;
    background-color: salmon;
    margin: 15px;
    padding: 5px;
    width: 550px;
}
.flex{
    display: flex;
}
.item{
    border: 1px solid green;
}

/* 1.根据宽度计算，允许缩减适应容器 */
.demo1> .item{
    width: 100px;
    height: 60px;
    /* flex: 0 1 auto; */
    flex: initial;
}

/* 2.根据宽度计算，元素完全弹性适应容器 */
.demo2> .item{
    width: 100px;
    height: 60px;
    flex: 1 1 auto;
    /* flex: auto; */
}

/* 2.元素失去弹性，以原始大小呈现 */
.demo3> .item{
    width: 100px;
    height: 60px;
    flex: 0 0 auto;
    /* flex: none; */
}

    2.效果展示

    3.总结

        flex:增长因子  缩减因子  基准尺寸    

        flex：flex-grow  flex-shrink  flex-basis    

        flex:0 1 auto

---

五、align-self, order的用法

    1、align-self属性的使用

        align-self是控制交叉轴单独元素的排列方式，该属性和align-content align-items的区别是，前两者定义整体交叉轴所有元素排列，align-self 控制单独元素。

    

实例

<main>
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
</main>


 body{
        padding: 100px;
    }
    main{
        display: flex;
        flex-flow: row wrap;
        width: 400px;
        height: 200px;
        box-sizing: border-box;
        border: solid 3px lightyellow;
        justify-content: space-evenly;
        align-items: center;
    }
    main *{
        width: 100px;
        height: auto;
        padding: 20px;
        box-sizing: border-box;
        background: lightgreen;
    }
    .item2{
        background: lightcoral;
        align-self:stretch

            图中item1,item3已经被align-items居中，item2被align-self属性单独控制沾满一行。

    2、order 属性的使用

        order属性是针对flex弹性容器盒子的子元素排序产生的，元素定义了display:flex之后，可以使用order给子元素的显示顺序排列，并不会改变代码顺序。

        order:[自定义序列]，只支持的整数，值可以是负数，排序为从小到大，数值越大，该元素排序越靠后。

        所有元素的order属性默认值都是0，如果多个元素order值相同，并有小于该元素的order排序，那么相同的元素首先会排序到小于该order元素之后，然后相同的order元素按照代码先后顺序排序，不会有变化。

        

实例

<div class="order-box">
    <div class="item1">item1<br>order:2</div>
    <div class="item2">item2<br>order:1</div>
    <div class="item3">item3<br>order:2</div>
    <div class="item4">item4<br>order:0</div>
    <div class="item5">item5<br>order:3</div>
</div>

.order-box{
    display: flex;
    border: solid 2px #eee;
    padding: 20px;
    width: 500px;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    height: 200px;}.order-box > *{
    width:100px;
    height: 100px;
    text-align: center;
    color: #666;
    box-sizing: border-box;
    padding-top: 25px;}.order-box .item1{
    background: lightcoral;
    order:2;}.order-box .item2{
    background: lightgoldenrodyellow;
    order:1;}.order-box .item3{
    background: lightblue;
    order:2;}.order-box .item4{
    background: lightgreen;
    order:0;}.order-box .item5{
    background: lightpink;
    order:3;}

---

六、将之前的一些案例用flex布局改定, 例如圣杯布局

    

实例

<style type="text/css">main{
    display: flex;
    flex-flow: row wrap;
    height: 300px;}header,footer{
    height: 100px;
    line-height: 100px;
    background: #eee;
    text-align: center;}main > *{
    padding-top: 100px;
    box-sizing: border-box;
    text-align: center;}article{
    background: lightcoral;
    flex:1 1 auto;
    order:1}aside{
    background: lightgreen;
    flex:0 0 auto;
    flex-basis: 200px;
    order:1}aside:first-of-type{
    order:0}</style><header>Header标签</header><main>
    <article>Article标签</article>
    <aside>Aside标签</aside>
    <aside>Aside标签</aside></main><footer>Footer标签</footer>

---