精华内容
参与话题
问答
  • html-css布局之弹性盒子布局

    千次阅读 2017-10-21 19:57:46
    简单介绍一下弹性盒子布局:父级盒子可以有多个子盒子,弹性盒子只定义了子元素如何布局,不影响盒子内外的渲染;在父级定义该父级为弹性盒子,父级内的子级盒子全在一行显示,影响只是布局,见代码: *{ ...

    学习资料:菜鸟教程;

    简单介绍一下弹性盒子布局:父级盒子可以有多个子盒子,弹性盒子只定义了子元素如何布局,不影响盒子内外的渲染;在父级定义该父级为弹性盒子,父级内的子级盒子全在一行显示,影响只是布局,见代码:

     

    	        *{
    				margin: 0;
    				padding: 0;
    			}
    			.big{
    				display: flex;
    			}
    			.big>div{
    				width: 200px;
    				height: 100px;
    				background: red;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="big">
    			<div>列1</div>
    			<div>列2</div>
    			<div>列3</div>
    			<div>列4</div>
    			<div>列5</div>
    			<div>列6</div>
    		</div>

    简单的定义为弹性盒子;上面代码默认是从左到右进行排列;

     

    也可以修改从右到左排列;只要设置direction:rtl页面布局也就跟着变;

     

    <span style="color:#333333">                      .big{
    				display: flex;
    				direction: rtl;
    		      }</span>

    请欣赏页面布局的效果:

     


     

    flex-direction属性:顺序指定了弹性子元素在父容器中的位置;

     

    flex-direction: row | row-reverse | column | column-reverse-direction: row | row-reverse | column | column-reverse

     

    flex-direction的值有:

    • row:横向从左到右排列(左对齐),默认的排列方式。
    • row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。{反序排列;}
    • column:纵向排列。
    • column-reverse:反转纵向排列,从后往前排,最后一项排在最上面{反向纵向排列}
                           .big{
    				display: flex;
    				flex-direction: row-reverse;
    			}//产生的效果与diretion相同;


    反向纵向排列:

     

    .big{
    				display: flex;
    				flex-direction: column-reverse;
    			}

    看效果图:

     

     

    justify-content 属性

     

    内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。

    justify-content 语法如下:

    justify-content: flex-start | flex-end | center | space-between | space-around-content: flex-start | flex-end | center | space-between | space-around

    各个值解析:

    • flex-start:(默认值)

      弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放。

    •  
    • flex-end:

      弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放。

    • .big{
      				display: flex;
      				justify-content: flex-end;
      				width: 1300px;
      				height: 300px;
      				border: 1px solid gray;
      				margin: auto;
      			}
      			.big>div{
      				width: 200px;
      				height: 100px;
      				background: red;
      			}
      		</style>
      	</head>
      	<body>
      		<div class="big">
      			<div>列1</div>
      			<div>列2</div>
      			<div>列3</div>
      			<div>列4</div>
      			<div>列5</div>
      			<div>列6</div>
      		</div>
      		
      效果图:(向右对齐)
       
    • center:(居中)

      弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)。

    • .big{
      				display: flex;
      				justify-content: center;
      				width: 1300px;
      				height: 300px;
      				border: 1px solid gray;
      				margin: auto;
      			}

       
    • space-between:(平均分配空隙)

      弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项,则该值等同于flex-start。否则,第1个弹性项的外边距和行的main-start边线对齐,而最后1个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上,相邻项目的间隔相等。

    • .big{
      				display: flex;
      				justify-content: space-between;
      				width: 1300px;
      				height: 300px;
      				border: 1px solid gray;
      				margin: auto;
      			}

       
    • space-around:

      弹性项目平均分布在该行上,两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项,则该值等同于center。否则,弹性项目沿该行分布,且彼此间隔相等(比如是20px),同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px)。

      .big{
      				display: flex;
      				justify-content: space-around;
      				width: 1300px;
      				height: 300px;
      				border: 1px solid gray;
      				margin: auto;
      			}

      效果图:

       

    align-items 属性

    align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

    语法

    align-items: flex-start | flex-end | center | baseline | stretch-items: flex-start | flex-end | center | baseline | stretch

    各个值解析:

    • flex-start(靠着起始边界):弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
    • flex-end(靠着终边界):弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
    • .big{
      				display: flex;
      				
      				align-items: flex-end;
      				width: 1300px;
      				height: 300px;
      				border: 1px solid gray;
      				margin: auto;
      			}
    • center(盒子居中):弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
    •  
    • baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
    •  
    • stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。

    flex-wrap 属性

    flex-wrap 属性用于指定弹性盒子的子元素换行方式。

    语法

    flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

    各个值解析:

    • nowrap - 默认,弹性容器为单行。该情况下弹性子项可能会溢出容器。
    • wrap (多出来的就换行)- 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行
    • wrap-reverse (多出来的反向换行)-反转 wrap 排列。
    .big{
    				display: flex;
    				flex-wrap:wrap-reverse;
    				width: 1100px;
    				height: 300px;
    				border: 1px solid gray;
    				margin: auto;
    			}

    效果图:

     

    align-content 属性

     

    align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。

    语法

    align-content: flex-start | flex-end | center | space-between | space-around | stretch-content: flex-start | flex-end | center | space-between | space-around | stretch

    各个值解析:

    • stretch - 默认。各行将会伸展以占用剩余的空间。
    • flex-start - 各行向弹性盒容器的起始位置堆叠。
    • .big{				display: flex;
      				align-content:flex-start ;
      				flex-wrap: wrap;
      				width: 1000px;
      				height: 300px;
      				border: 1px solid gray;
      				margin: auto;
      			}

    • flex-end - 各行向弹性盒容器的结束位置堆叠。
    • center -各行向弹性盒容器的中间位置堆叠。
    • space-between -各行在弹性盒容器中平均分布。
    • space-around - 各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。

       

    弹性子元素属性

    排序(子元素盒子排序)

    语法

    order: : 

     

    各个值解析:

    • <integer>:用整数值来定义排列顺序,数值小的排在前面。可以为负值。

    order 属性设置弹性容器内弹性子元素的属性:

     

     

     

    对齐

     

    设置"margin"值为"auto"值,自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto",可以使弹性子元素在弹性容器的两上轴方向都完全集中。

     

    .big{
    				display: flex;
    				
    				width: 1300px;
    				height: 300px;
    				border: 1px solid gray;
    				margin: auto;
    			}
    			.big>div{
    				width: 200px;
    				height: 100px;
    				background: red;
    				
    			}
    			.big>div:first-child{
    				
    				margin-right: auto;
    			}
    			.big>div:last-child{
    			
    				margin-right: auto;
    			}


     

     

     

    弹性盒子居中:有关于盒子居中问题,下章重点介绍;

                   
    .big{
                    display: flex;
                    
                    width: 1300px;
                    height: 300px;
                    border: 1px solid gray;
                    margin: auto;
                }
    
    .big>div{
    				width: 200px;
    				height: 100px;
    				background: red;
    				
    			}
    			.big>div:first-child{
    				
    				margin: auto;
    			}

     

    有更多的弹性盒子,见菜鸟教程:

     

    http://www.runoob.com/css3/css3-flexbox.html

     

     

    展开全文
  • 图解CSS3弹性盒子属性

    2020-04-17 21:54:24
    弹性盒子属性 设置弹性盒子:display flex:块级的弹性盒子 inline-flex:行级的弹性盒子 -webkit-flex:苹果和谷歌的兼容性 搞清楚子元素和父元素 设置在父元素上的值 flex-direction:子元素在父容器中的位置...

    弹性盒子属性

    设置弹性盒子:display

    • flex:块级的弹性盒子
    • inline-flex:行级的弹性盒子
    • -webkit-flex:苹果和谷歌的兼容性

    搞清楚子元素和父元素
    默认情况

    设置在父元素上的值

    flex-direction:子元素在父容器中的位置(默认row)

    1. row:横向从左到右排列(左对齐),默认排列
    2. row-reverse:横向右对齐元素反转
    3. column:纵向排列
    4. column-reverse:反转纵向排列

    在这里插入图片描述

    主轴和交叉轴(侧轴)

    主轴为flex-direction属性对其的方式的方向
    交叉轴为主轴的垂直方向

    比如:flex-direction: row;
    主轴为水平向右
    交叉轴为垂直向下

    回到顶部 目录

    flex-wrap:子元素换行方式(默认nowrap)

    1. nowrap:默认, 弹性容器为单行
    2. wrap:弹性容器为多行
    3. wrap-reverse:反转 wrap 排列

    在这里插入图片描述

    flex-flow:flex-direction 和 flex-wrap复合写法

    flex-flow:row nowrap;
    flex-flow:column wrap-reverse;

    align-items:基于交叉轴对齐(单行)(默认stretch)

    1. flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界
    2. flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界
    3. center:弹性盒子元素在该行的侧轴(纵轴)上居中放置
    4. baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐
    5. stretch:如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制

    在这里插入图片描述
    回到顶部 目录

    align-content:基于交叉轴对齐(多行)(默认stretch)

    1. stretch:默认。各行将会伸展以占用剩余的空间。
    2. flex-start:各行向弹性盒容器的起始位置堆叠。
    3. flex-end:各行向弹性盒容器的结束位置堆叠。
    4. center:各行向弹性盒容器的中间位置堆叠。
    5. space-between:各行在弹性盒容器中平均分布。
    6. space-around:各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。

    在这里插入图片描述

    justify-content:基于主轴对齐(默认flex-start)

    1. flex-start:弹性项目向行头紧挨着填充
    2. lex-end:弹性项目向行尾紧挨着填充
    3. center:弹性项目居中紧挨着填充
    4. space-between:弹性项目平均分布在该行上
    5. space-around:弹性项目平均分布在该行上,两边留有一半的间隔空间

    在这里插入图片描述
    回到顶部 目录

    设置在子元素上的属性

    flex-grow:拉伸(默认0)

    自身收缩数/收缩总和*剩余空间
    在这里插入图片描述

    flex-shrink:收缩(默认1)

    (自身宽度*自身收缩数)/(sum每个(宽度*收缩数))*超出的空间
    在这里插入图片描述
    计算:
    A被移除溢出量:(200*1/(200*1+200*1+200*3))*200,即约等于40px
    B被移除溢出量:(200*1/(200*1+200*1+200*3))*200,即约等于40px
    C被移除溢出量:(200*3/(200*1+200*1+200*3))*200,即约等于120px
    A,B,C的实际宽度分别为:200-40=160px, 200-40=160px, 200-120=80px

    回到顶部 目录

    flex-basis:宽度(默认0)

    • px:像素值
    • %:百分值
    • auto(默认):无特定宽度值,取决于其它属性值
    • content:基于内容自动计算宽度

    flex:复合写法

    flex-grow|flex-shrink|flex-basis
    flex:1 1 300px;

    order(默认0)

    适用于:flex子项和flex容器中的绝对定位子元素
    用整数值来定义排列顺序,数值小的排在前面。可以为负值
    在这里插入图片描述

    align-self:子元素自身在侧轴(纵轴)方向上的对齐方式(默认auto)

    1. auto:如果’align-self’的值为’auto’,则其计算值为元素的父元素的’align-items’值,如果其没有父元素,则计算值为’stretch’。
    2. flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
    3. flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
    4. center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
    5. baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。
    6. stretch:如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。
      在这里插入图片描述

    回到顶部 目录

    展开全文
  • 本套Web前端基础全家桶教程是全新录制,将前端学习的基础内容融汇为148节课,涵盖了...除此之外,课程涵盖 大量的CSS技巧、动画、交互效果,对传统浮动和定位的布局方式,以及CSS3中的弹性盒和响应式布局都有深入讲解。
  • 新增样式:文本效果、圆角边框、box-sizing、渐变背景、盒子阴影等 4.新增效果:变形transform、过渡transition、动画animation 5.弹性布局flex详解 6.网格布局grid详解 7.多列布局...
  • 弹性盒子(灵活布局)详解

    千次阅读 多人点赞 2017-11-04 15:38:09
    2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。 读了本篇文章,大家将... 传统布局——基于盒子模型,依赖 display 属性、position属性、float属性。 它对于那些特殊布局

    2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。



    读了本篇文章,大家将会知道:



    Flex布局相较于传统布局方式有哪些优点;
    为什么我们要采用Flex布局来进行页面设计;
    我们如何通过Flex布局来设计页面。


    传统布局——基于盒子模型,依赖 display 属性、position属性、float属性。
    它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
    并且,传统布局代码冗长,出错率高,要时刻注意清除浮动或者在进行绝对定位时给父元素添加相对定位。否则就容易造成页面布局混乱。

    但是,Flex布局就就可以避免这种情况:
    Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。



    任何一个容器都可以指定为Flex布局。

    注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性都将失效!!!


    那么如何实现Flex布局,它可以帮助我们实现什么效果呢

    容器属性:

    1. flex-direction属性:决定主轴的方向(即项目的排列方向);
    2. flex-wrap属性:规定如果一条轴线排不下,如何换行;
    3. flex-flow属性:是flex-direction属性和flex-wrap属性的简写形式,默认值为row/nowrap;
    4. justify-content属性:定义了项目在主轴上的对齐方式;
    5. align-items属性:定义项目在交叉轴上如何对齐;
    6. align-content属性:定义了多根轴线的对齐方式;


    容器属性具体实现效果:

    一、flex-direction属性:决定主轴的方向(即项目的排列方向)。


    - row(默认值):主轴为水平方向,起点在左端;
    - row-reverse:主轴为水平方向,起点在右端;
    - column:主轴为垂直方向,起点在上沿;
    - column-reverse:主轴为垂直方向,起点在下沿。


    这里写图片描述


    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
    
            #box {
                display: flex;
                /*flex-direction: row;         //水平方向,起点在左端;
                flex-direction: row-reverse;   //水平方向,起点在右端;
                flex-direction: column;        //垂直方向,起点在上沿;
                flex-direction: column-reverse;//垂直方向,起点在下沿。
                */
            }
    
            #div1, #div2, #div3 {
                width: 300px;
                height: 200px;
            }
    
            #div1 {
                background-color: #859aff;
            }
    
            #div2 {
                background-color: #9d4c48;
            }
    
            #div3 {
                background-color: #58a429;
            }
        </style>
        <title>弹性盒子</title>
    </head>
    <body>
    <div id="box">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
    </body>
    </html>

    二、flex-wrap属性
    默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

    - nowrap(默认):不换行;
    - wrap:换行,第一行在上方;
    - wrap-reverse:换行,第一行在下方。


    这里写图片描述


    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
    
            #box {
                display: flex;
                /*flex-wrap: nowrap;        //不换行;
                  flex-wrap: wrap;          //换行,第一行在上方;
                  flex-wrap: wrap-reverse;  //换行,第一行在下方。*/
    
            }
    
            #div1, #div2, #div3,#div4,#div5,#div6 {
                width: 300px;
                height: 200px;
            }
    
            #div1 {
                background-color: #859aff;
            }
    
            #div2 {
                background-color: #9d4c48;
            }
    
            #div3 {
                background-color: #58a429;
            }
    
            #div4 {
                background-color: #16a497;
            }
    
            #div5 {
                background-color: #a44166;
            }
    
            #div6 {
                background-color: #1ca460;
            }
        </style>
        <title>弹性盒子</title>
    </head>
    <body>
    <div id="box">
        <div id="div1">1</div>
        <div id="div2">2</div>
        <div id="div3">3</div>
        <div id="div4">4</div>
        <div id="div5">5</div>
        <div id="div6">6</div>
    </div>
    </body>
    </html>
    

    三、flex-flow属性
    是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。


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

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


    这里写图片描述


    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
    
            #box {
                display: flex;
                /*justify-content: flex-start;       //左对齐;
                justify-content: flex-end;         //右对齐;
                justify-content: center;           //居中;
                justify-content: space-between;    //两端对齐,项目之间的间隔都相等;
                justify-content: space-around;     //每个项目两侧的间隔相等。
    */
    
            }
    
            #div1, #div2, #div3,#div4,#div5,#div6 {
                width: 300px;
                height: 200px;
            }
    
            #div1 {
                background-color: #859aff;
            }
    
            #div2 {
                background-color: #9d4c48;
            }
    
            #div3 {
                background-color: #58a429;
            }
    
            #div4 {
                background-color: #16a497;
            }
    
            #div5 {
                background-color: #a44166;
            }
    
            #div6 {
                background-color: #1ca460;
            }
        </style>
        <title>弹性盒子</title>
    </head>
    <body>
    <div id="box">
        <div id="div1">1</div>
        <div id="div2">2</div>
        <div id="div3">3</div>
        <div id="div4">4</div>
        <div id="div5">5</div>
        <div id="div6">6</div>
    </div>
    </body>
    </html>

    五、align-items属性:定义项目在交叉轴上如何对齐。

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


    这里写图片描述


    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
    
            #box {
                display: flex;
                align-content: flex-start;
                align-content: flex-end;
                align-content: center;
                align-content: space-between;
                align-content: space-around;
                align-content: stretch;
            }
    
            #div1, #div2, #div3, #div4, #div5, #div6 {
                width: 300px;
                height: 200px;
            }
    
            #div1 {
                background-color: #859aff;
            }
    
            #div2 {
                background-color: #9d4c48;
            }
    
            #div3 {
                background-color: #58a429;
            }
    
            #div4 {
                background-color: #16a497;
            }
    
            #div5 {
                background-color: #a44166;
            }
    
            #div6 {
                background-color: #1ca460;
            }
        </style>
        <title>弹性盒子</title>
    </head>
    <body>
    <div id="box">
        <div id="div1">1</div>
        <div id="div2">2</div>
        <div id="div3">3</div>
        <div id="div4">4</div>
        <div id="div5">5</div>
        <div id="div6">6</div>
    </div>
    </body>
    </html>



    Programming is an art form.

    展开全文
  • 弹性盒子的使用

    2019-09-28 04:03:59
    它旨在提供一种更加有效的布局方式,控制父容器中子元素的布局,排列以及分布,甚至在它们的尺寸未知或动态变化的情况下,都能够做到正确的展现(弹性盒子中的flex也由此而得名)。 弹性盒子的核心概念是父容器拥有...

    背景

    Flexbox Layout,俗称Flexible box模型,由W3C于2009年开始起草的css3布局样式。它旨在提供一种更加有效的布局方式,控制父容器中子元素的布局,排列以及分布,甚至在它们的尺寸未知或动态变化的情况下,都能够做到正确的展现(弹性盒子中的flex也由此而得名)。

    弹性盒子的核心概念是父容器拥有能够改变其子元素的的宽度/高度和排列顺序,使得子元素能够以最佳的尺寸填充整个父容器的可用空间。简单来说,一个弹性盒子能够充分扩展它的子元素尺寸使其填满自身的可用空间,或者收缩子元素来防止溢出。

    最重要的一点是,相对于传统的块布局block以及行布局inline来说,弹性盒子模型是方向不可知的(direction-agnostic)。尽管块布局以及行布局能够很好的满足页面布局,但是它们缺乏弹性,不能很好地支持大型或者是复杂的应用(特别在屏幕进行横竖屏切换,改变视图尺寸,延伸,收缩等等复杂情景下)。

    注意:弹性盒子布局适合作用在一个应用的组件和小范围的布局,例如,一个歌曲列表,一个导航条,等等。相对的,Grid layout,即栅格布局则倾向于进行大规模的界面布局,例如,整体界面的分栏布局,左右结构,上下结构,等等。

    基本原理

    由于弹性盒子是一整套模型而不是单独的一个css属性,它包含了一个属性集合,其中的一些属性作用于父容器(flex container),另一些则作用于子元素(flex items),所以特别需要区分这些属性的作用对象

    如果说常规布局是建立在块级和行级方向(block and inline flow directions)上的,那么弹性盒子布局则是建立弹性流方向(flex-flow directions)上的。

     
    弹性盒子模型

    如上图所示,假设主轴是横向的,那么子元素将会沿着主轴从左至右依次排列,或者是沿着与主轴垂直的交叉轴由上至下依次排列。下面我们一一进行剖析:

    main axis(主轴)

    父容器的主轴是子元素排列的基本轴,但这并不意味着基本轴必须是横向的,这取决于父容器的flex-direction属性(后边会介绍到)。例如,如果子元素是竖向排列的,那么主轴则是竖向的那条轴。

    main-start | main-end

    子元素会沿着main-start从左至右排列,直到main-end。值得注意的是,默认情况下,子元素只会排列在一排上,就算已经到达了父容器的右边缘,也不会进行换行,除非设置了flex-wrap属性(后边会介绍到)。

    main size

    在父容器中主轴上的子元素的主尺寸(不论宽度或者高度)之和,构成了弹性盒子的主尺寸。例如,如果子元素是横向排列的,则宽度则是主尺寸,相对的,如果子元素是竖向排列的,则高度则是主尺寸。

    cross axis

    垂直于主轴的轴,称之为交叉轴。显然,交叉轴的方向取决于主轴的方向。

    cross-start | cross-end

    当父容器中的子元素换行时,子元素的行排列的方向则是沿着交叉轴进行的,从cross-start开始,直到cross-end。

    cross size

    和main size同理,只是方向与之垂直。


    下面进行弹性盒子属性详解,分为两类,分别是父容器属性和子元素属性。


    父容器属性(flex-container)

     
    父容器

    display

    用于定义弹性盒子的显示方式。

    .flex-container {
      display: flex; // 实际相当于block-flex,块级容器,宽度同其外层容器
      display: inline-flex; // 顾名思义,行级容器,宽度取决于其子元素
    }
    

    flex-direction

    用于定义主轴方向,同时也决定了子元素的排列方向。

     
    flex-direction
    .flex-container {
      flex-direction: row; // 子元素由左至右排列(默认值)
      flex-direction: row-reverse; // 子元素由右向左排列
      flex-direction: column; // 子元素由上至下排列
      flex-direction: column-reverse; // 子元素由下至上排列
    }
    

    flex-wrap

    默认情况下,所有的子元素都会尝试沿着主轴在排列在同一行(列)上,这个属性用来对子元素进行换行排列,即当子元素排列到main-end的时候,会自动进行换行。

     
    flex-wrap
    .flex-container {
      flex-wrap: nowrap; // 子元素都在排列在同一行(默认值)
      flex-wrap: wrap; // 子元素将沿着交叉轴正向排列在多行中
      flex-wrap: wrap-reverse; // 子元素将沿着交叉轴反向排列在多行中
    }
    

    flex-flow

    flex-direction和flex-wrap的属性缩写。

    .flex-container {
      flex-flow: <'flex-direction'> || <'flex-wrap'>;
      flex-flow: row nowrap; // 横向排列 不换行(默认值)
    }
    

    justify-content

    定义子元素在主轴上的对其方式。主要用在当所有的子元素在同一行,且为非弹性元素时,分配剩下的额外空间;或者是弹性元素但是并没有撑满整个父容器的主尺寸。该属性也能够对溢出的子元素起到一定的控制作用,例如,当子元素溢出时,对其进行居中,则左右溢出的宽度将是相等的。

     
    justify-content
    .flex-container {
      justify-content: flex-start; // 子元素向主轴起点看齐排列(默认值)
      justify-content: flex-end; // 子元素向主轴终点看齐排列
      justify-content: center; // 子元素居中排列
      justify-content: space-between; // 子元素以相同的间距从主轴的起点和终点开始平均排列
      justify-content: space-around; // 子元素以相同的边距延主轴平均排列
    }
    

    小贴士:justify-centent: center;还可以配合align-self: center;进行内容的居中垂直布局

    align-items

    用于定义排列在同一主轴的子元素在交叉轴方向上的排列方式(可以想象成是justify-content属性的交叉轴版)。

     
    align-items
    .flex-container {
      align-items: flex-start; // 子元素向交叉轴起点看齐排列
      align-items: flex-end; // 子元素向交叉轴终点看齐排列
      align-items: flex-center; // 子元素在交叉轴居中排列
      align-items: flex-stretch; // 子元素沿交叉轴拉伸排列(撑满整个交叉轴的长度)(默认值)
      align-items: flex-baseline; // 子元素在交叉轴上沿其文本的基线对其排列
    }
    

    align-content

    用于定义父容器中的多行/列在交叉轴上的排列方式(有点类似于多个子元素在主轴上的justify-content排列)。

     
    align-content
    .flex-container {
      align-content: flex-start; // 多排子元素从交叉轴起点进行排列
      align-content: flex-end; // 多排子元素从交叉轴终点进行排列
      align-content: center; // 多排子元素在交叉轴居中排列
      align-content: stretch; // 多排子元素沿交叉轴拉伸排列(撑满整个交叉轴的长度)(默认值)
      align-content: space-between; // 多排子元素以相同的间距从交叉轴的起点和终点开始平均排列
      align-around: // 多排子元素以相同的边距延交叉轴平均排列
    }
    

    小贴士:当只有一排子元素时,align-content属性并没有什么卵用。


    子元素属性(flex-items)

     
    子元素

    order

    默认情况下,子元素按照它们在源码中出现的位置进行排列。幸运的是,通过order属性,则能够控制子元素在父容器中的排列顺序,这大大增加了布局的灵活性。

     
    order

    上图中的数字,代表了元素的顺序值(整型,且接受负值),且order: 0;无order属性等效。

    .flex-item: {
      order: <integer>;
      order: -1|1|2...n;
    }
    

    flex-grow

    用于定义子元素能否伸展的能力。它接受一个数字来作为比例值,这使得子元素能够自动检测父容器中的可用空间,并将其进行填充。

    如果所有的子元素都有flex-grow: 1,那么所有子元素都将均分主轴的长度;如果其中有一个子元素有flex-grow: 2,那么这个子元素将占据其他flex-grow: 1的子元素占据主轴长度的两倍(至少会尽量这样做)。

     
    flex-grow
    .flex-item {
      flex-grow: <number>; // 非负自然数(包括0)
      flex-grow: 0; // 默认值
      flex-grow: 1|2...n;
    }
    

    小贴士1:如果子元素的内容超过了其flex-grow所分配的空间,则会继续伸展,直到满足子元素内容的长度。
    小贴士2:如果父容器设置了flex-wrap: wrap;,那么挤到第二排的子元素将按照第二排的主轴长度进行flex-grow比例的重新计算。

    flex-shrink

    用于定义了子元素收缩的能力。

     
    flex-shrink

    上图中,父容器宽度固定为500px,子元素设置了flex-basis: 120px; flex-shrink: 1;,此时,D和E设置了flex-shrink: 2。这样,D和E将会收缩自身的长度,尽量将所有的元素都排在父容器的主轴上且尽量不超过父容器的宽度500px

    flex-basis

    用于在空间被分配前,定义子元素的默认长度。这个值可以是长度(百分比,rem等等)或者是关键字(如auto等)。

    .flex-item {
      flex-basis: <length> | auto(默认值); 
    }
    

    需要注意的是,如果flex-basis: 0;,那么子元素内容旁边的额外空间是不计算在flex-basis内的。如果设置为auto,那么额外的空间将基于子元素的flex-grow进行计算。计算方式如下图所示。

     
    https://www.w3.org/TR/css-flexbox-1/images/rel-vs-abs-flex.svg

    在上图中,子元素的flex-grow1:1:2。当flex-basis: 0;时,子元素内容旁边的额外空间不计数;flex-basis: auto;时,子元素内容旁边的额外空间计数,且比例由其flex-grow决定,这里则是1:1:2。故而,虽然我们的flex-grow设置为了1:1:2,但是由于flex-basis的影响,产生了不同的显示结果。

    flex

    flex-grow,flex-shrink,flex-basis的属性缩写。其中,flex-shrink和flex-basis是可选项,如不填写这两个值,则默认值为flex-shrink: 1,flex-basis: 0%。如果整个flex属性都不填写,则整个属性默认值为0 1 auto。

    .flex-item {
      flex: none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ];
      flex: 0 1 auto; // 不伸展 收缩度为1 自动基础长度
    }
    

    小贴士:强烈建议采用属性缩写的方式来定义子元素的弹性属性,因为它能帮助我们自动地设置许多默认值。

    align-self

    允许单个子元素覆写父容器的align-items属性(故两者拥有同样的属性值)。

     
    align-self
    .flex-item {
      align-seft: auto | flex-start | flex-end | center | baseline | stretch;
    }
    

    小贴士:floatclearvertical-align这些属性对一个弹性盒子布局的元素将失去作用。

    欢迎交流,完。

    TODO:Grid layout 栅格布局



    作者:JSoon
    链接:https://www.jianshu.com/p/ce5d23ec13aa
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    转载于:https://www.cnblogs.com/lemon-Net-Skill/p/10049345.html

    展开全文
  • 弹性盒子父元素中的属性弹性盒子的元素对齐排列排列方式对齐方式换行方式子元素的属性弹性收缩与扩大重新排列项目单独调整每个项目的对齐 &lt;div id="div-contain"&gt; &lt;div id="...
  • 弹性盒子简单用法

    2020-11-14 16:15:46
    弹性盒子 可以简洁,完整,响应式(自适应)的实现各种页面布局 采用flex布局的元素,称为弹性盒子 或者 flex容器, 他的所有子元素称为弹性元素 或者 flex项目 主轴:元素盒子排列的方向(默认的排列方向x轴, 当然...
  • 弹性盒子

    2020-09-13 10:39:16
    弹性盒模型是CSS3规范中提出的一种新的布局方式。弹性盒模型的目的是提供一种更加高效、简洁的方式来对容器中的元素进行布局、对齐和分配富余空间,即使它们的大小是未知或者动态变化的。利用弹性盒模型的新特性可以...
  • 弹性盒子(移动端布局) 1.任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; //形成弹性盒 } //display:inline-flex行内元素形成弹性盒 //display: -webkit-flex; Webkit 内核的浏览器 2.容器的属性...
  • 弹性盒子(css)

    2020-11-23 20:38:42
    弹性盒子 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供...
  • Bootstrap4之弹性盒子详解(flexbox)

    万次阅读 2018-06-21 10:42:55
    个人认为:弹性盒子是Bootstrap中比较重要同时理解也比较困难的一部分,接下来,我就根据自己的理解详细讲述一下对于弹性盒子的看法。1.排序方式2.响应式布局...
  • css3弹性盒子

    千次阅读 2019-08-01 16:18:15
    弹性盒子 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 弹性盒子内容 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex...
  • 弹性盒子常用属性

    千次阅读 2016-10-18 09:12:23
    弹性盒子常用属性 display设置为flex属性 flex-direction属性:设置子元素的排列方式,同时设置主轴,默认的情况下x轴为主轴 flex-direction: row | column | row-reverse | column-reverserow:设置子元素为x轴正向...
  • CSS3弹性盒子布局

    千次阅读 2016-07-29 17:27:04
    CSS3中引入的弹性盒子布局已经有一段时间,也经历了几次比较重大的修改,可本人一直都没怎么使用过这种布局,惭愧万分!这几天研究了一下这种布局方式,记录一下学习笔记,以后日后用到时过来查看。  2016年5月26日...
  • CSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,...
  • Flex 弹性盒子布局

    千次阅读 2018-06-01 22:48:51
    CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行。它不使用浮动,flex容器的边缘也不会与其内容的边缘...
  • /*弹性垂直水平居中*/ .flex-vertical-center{ display: flex;align-items: center; } /*弹性垂直对齐元素开始位置*/ .flex-vertical-start{ .../*弹性盒子水平居中*/ .flex-horizontal-center{ ...
  • CSS 弹性盒子模式

    2018-03-03 17:27:18
    弹性盒子模式 参考链接:CSS 弹性盒子布局 简介 在定义方面来说,弹性布局是指通过调整其内元素的宽高,从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间,或将其...
  • 弹性盒子理解和介绍

    2017-07-13 14:57:00
    而因为最近在研究小程序,发现中间使用弹性盒子布局效果更好效率更高一点,所以就将之前学习弹性盒模型的相关知识点整理出来,给大家分享。 弹性盒模型flex布局介绍 弹性盒模型(flexbox)又称为...
  • 弹性盒子布局

    2020-08-26 19:05:40
    一、CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式。 CSS3 弹性盒,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一...
  • 浅谈弹性盒子布局

    2016-10-02 14:01:00
    理解 CSS3 弹性盒布局模型  本文结合基本css3的权威书籍中的内容,根据自己的理解,通过相关示例向大家展示了弹性盒子的布局使用,希望大家能够喜欢,如有不足,也希望提出建议,大家共同进步。  Web 应用的样式...
  • 2.决绝两边盒子宽度固定,中间盒子宽度随浏览器的大小而变化的问题(固比固的方法) 示例代码: html> lang="en"> charset="UTF-8"> 固比固的方法 /* 清空所有的margin和padding */ *{
  • CSS3 弹性盒子(Flex Box)

    2018-06-19 12:33:04
    弹性盒子是CSS3的一种新... 引入弹性盒布局模型的目的是提供一种更有效的方式来对一个容器中的子元素进行排列,对齐和分配空白空间。   浏览器支持  表格中的数字表示支持该属性的第一个浏览器的版本号。  ...
  • 弹性盒子的理解

    2019-03-12 11:00:00
    弹性盒子:  display: flex; :是把设置此属性的这块区域(设置此属性的元素)变为弹性盒子,使得此元素的直接子元素按照从左到右的顺序一行排列  如果盒子变小(比子元素的宽度或高度小),里面的直接子元素会...
  • 弹性盒子详解

    2020-06-02 22:04:43
    弹性盒子详解: 一.display:flex : flex意思是弹性布局,在父元素设置弹性布局之后,子元素的float,clear,vertical-align属性都将失效 二.: 1. flex-direction:元素在主轴之上(水平方向的对齐方式) flex-...

空空如也

1 2 3 4 5 ... 20
收藏数 25,540
精华内容 10,216
关键字:

弹性盒子