博客列表 >弹性布局之弹性元素-2019年11月6日

弹性布局之弹性元素-2019年11月6日

古城老巷丶
古城老巷丶原创
2019年11月06日 12:56:46744浏览


作业:

1. 将课堂中的全部案例照写一遍, 并达到默写级别

    (1):  所有弹性元素不增长,以原始宽度显示,增长因子为: 0(默认)

            css:

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

        效果:

image.png

    (2): 将全部剩余空间分配给指定弹性元素,例如: 第三个

        css:

            .demo2>.item:last-of-type {        
                                        flex-grow: 1;    
                                        }


          效果:

        image.png


    (3): 全部剩余空间按增长因子在不同弹性元素间分配

        css:

        	/*第一个元素*/   
        	 .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;   
        	  }


        效果:

        image.png


    (4): 增长因子支持小数, 因为是按增长比例分配

        css:

        	/*第一个元素*/    
        	.demo4>.item:first-of-type {        
        	flex-grow: 0.5;    
        	}	
        	/*第二个元素*/    
        	.demo4>.item:nth-of-type(2) {        
        	flex-grow: 0.5;    
        	}	
        	/*第二个元素*/    
        	.demo4>.item:last-of-type {        
        	flex-grow: 1.5;    
        	}


        效果:

image.png

        

    (5): 每个弹性元素宽度不同时, 同样适用以上分配规律

        css:

/*每个元素的宽度不一样,?*/
.demo5 > .item:first-of-type {    
width: 120px;    
flex-grow: 2;
}
.demo5 > .item:nth-of-type(2) {    
width: 150px;    
flex-grow: 2;
}
.demo5 > .item:last-of-type {    
width: 180px;    
flex-grow: 6;
}

        效果:

        image.png


    (1): 所有弹性元素不缩减,以原始宽度显示,缩减因子为: 0

        css:

        /*	所有元素不缩减,以原始宽度显示	设置缩减因为为: 0	*/	
        .demo1 > .item {	    
        flex-shrink: 0;	
        }

        效果:

        image.png

        

        (2): 所有弹性元素自适应容器宽度且不换行,缩减因子: 1 (默认)

        css:

	/*所有元素自动缩放适应容器宽度且不换行显示设置缩减因子: 1 (默认值/初始值)*/
	.demo2 > .item {
	flex-shrink: 1
	}

        效果:

        image.png


        (3): 当三个弹性元素的缩减因为子不相等时

        css:

实例

    /*当三个元素的缩减因为子不相等时*/

    .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;
    }

        效果:

image.png


    (4): 缩减因子也可以是小数,只要大于就可以

        css:

    

实例

    /*缩减因子也可以是小数,只要大于就可以了, 负数无效*/

    .demo4>.item:first-of-type {
        flex-shrink: 0.2;
    }

    .demo4>.item:nth-of-type(2) {
        flex-shrink: 0.3;
    }

    .demo4>.item:last-of-type {
        flex-shrink: 0.5;
    }

        效果:

image.png


    (5): 当每个弹性元素宽度不一样时, 

        CSS:

实例

/*
特别提示:
  1. 缩减因子的前掉是每个元素必须是等宽的(在主轴上空间相等)
  2. 如果不相等, 必须按一定的比例, 来调整这个元素的缩减因子
*/
.demo5 > .item:first-of-type {
    width: 220px;
    flex-shrink: 2;
}

.demo5 > .item:nth-of-type(2) {
    width: 250px;
    flex-shrink: 2;
}
.demo5 > .item:last-of-type {
    width: 280px;
    flex-shrink: 6;
}

        效果:

image.png

        手抄:

image.pngimage.png


2. 将flex属性的用法, 手抄, 建议二遍以上

        image.png

3. 自学:align-self, order的用法

        align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。注意:align-self 属性可重写灵活容器的 align-items 属性。

        order 属性 设置或检索弹性盒模型对象的子元素出现的順序。注意:如果元素不是弹性盒对象的元素,则 order 属性不起作用

        

实例

@import url("public.css");

    .container {
        width: 550px;
        height: 300px;

        /*以主轴垂直为例进行演示 垂直且不换行*/
        flex-flow: column nowrap;

        /*默认元素紧贴终止线排列*/
        align-items: flex-end;
    }



    .item {
        width: 100px;
        height: 60px;
    }

    /*将第一个单独调整, 紧贴起始线排列*/
    .item:first-of-type {
    	/*重新排序,3*/
		order:3;
        align-self: flex-start;
    }

    /*将最后一个单独调整到中间位置排列*/
    .item:last-of-type {
    	/*重新排序,2*/
    	order:2;
        align-self: center;
    }

    /*将第二个元素,使它自动扩展*/
    .item:nth-last-of-type(2) {
        /*设置不一定背景方便观察*/
        background-color: #fff;
        /*为了自动扩展,需要还原元素的宽度到初始大小*/
        width: auto;

        align-self: stretch;
        /*重新排序,1*/
        order:1;
    }

        效果:

image.png

4. 试着将之前的一些案例用flex布局改定, 例如圣杯布局

    css:

        

实例

 * {
            margin: 0;
            padding: 0;
        }
        /* 将整个页面设置为弹性盒 */
        html,
        body {
            height: 100%;
            overflow: hidden;/*内容溢出会被修剪,并且其余内容是不可见的*/
            display: flex;
            /* 改变主轴的排列方式 */
            flex-direction: column;
            /* 将主轴上的排列规则改为两端分布 */
            justify-content: space-between;
            text-align: center;
            font-size: 25px;
        }
        
        /* 设置头部和尾部的颜色 */
        .footer,
        .header {
            height: 80px;
            background: #ccc;
            text-align: center;
            line-height: 80px;
            font-size: 30px;
        }

        /* 设置中间内容区域样式 */
        .center {
            /*可增长*/
            flex: 1;
            background: #ccc;
            display: flex;
        }
        
        /* 设置左边div和右边div */
        .center>.left,.center>.right {
            width: 200px;
            height: 100%;
            background: yellow;
        }
        /* 设置中间内容 */
        .center>.content {
            /*可增长*/
            flex: 1;
            background: pink;
        }

        HTML代码

实例

    <!-- 界面结构区域 -->
    <div class="header">header</div>
    <div class="center">
        <div class="left">left</div>
        <div class="content">content</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>

        效果图:

image.png

5. 试着自己先模仿一些现成网站首页或某个页面(选做)



总结:        

        1,增长因子: flex-grow:元素和容器都自定义宽度,还需要有剩余空间,且不能设置换行,设置0为默认值,所有元素自适应容器宽度且不换行,当增长因子不相等时,一样能自适应增长,根据增长比例大小,增长的像素也不同。每个元素宽度相等时,增长因子除以增长因子之和然后除以元素的像素,就能知道每个元素需要增长多少像素。当每个元素的宽度不相等时,以上公式一样能用。

        2,缩减因子:flex-shrink:设置0为不自动缩减,设置1自动缩减,所有元素自适应容器宽度且不换行,也是默认值。当缩减因子不相等时,一样能自适应缩减,根据缩减比例大小,缩减的像素也不同。每个元素宽度相等时,可以直接除以缩减比列,然后乘以每个元素的宽度,就能知道每个元素需要缩减多少像素。
            注意:当每个元素的宽度不相等时,多了一步获得它的微调比列,然后每个元素宽度乘以缩减比列乘以微调比列的积,就能得出每个元素宽度需要缩减多少像素。

弹性元素的基准尺寸:flex-basis  ,属性定义在分配多余空间之前, 用在没有为弹性元素设置宽度,或设置了不满足需求,可以为每一个弹性元素设置一个初始值,  如果设置元素宽度和设置了元素的基准,就以设置的基准大小显示。还可以通过flex-basis:设置元素的百分比显示。 

简化设置:   

        flex: 如果有多个值,则按以下顺序:flex: flex-grow flex-shrink flex-basis,默认状态: flex: 0 1 auto;含义: 不增长, 可缩减, 宽度自动


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议