弹性布局_弹性布局flex - CSDN
精华内容
参与话题
  • CSS弹性布局

    千次阅读 2018-05-29 17:08:32
    CSS3弹性伸缩布局简介2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便、完整、响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局...

    CSS3弹性伸缩布局简介

    2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便、完整、响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段,并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端的布局,所以本次主要讲解一下旧版本和新版本在移动端使用的各个知识点,让大家对神秘的flex布局熟悉起来。

    旧版本(box)

    首先看一下浏览器兼容情况:

    $1EZQ9IENP7}1HCH8DQ_KWA

    PS:浏览器兼容数据不一定很准确,不过相差不大。

    下面将通过一个简单的实例来讲解旧版本的各个属性:

    html代码:

    <div>
        <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
        <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
        <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
    </div>

    可以看到我们这个例子是很简单的,一个div元素内包含三个p元素,它们都是块元素(block)。接下来给段落加一些基础的样式:

    复制代码
    p{
        width:150px;
        border:3px solid lightblue;
        background:lightgreen;
        padding:5px;
        margin:5px;
    }
    复制代码

    此时刷新网页看到的结果是这样的:

    3%`JU`~CGTEYZXCUR7[E`Z6

    这个结果很正常吧!OK,现在我们给div元素设置为box,看看有什么变化:

    div{
        display:-webkit-box;
        display:box;
    }

    我们再次刷新网页,结果是这样的:

    _0%FOA8C$VGLAYR_4T}H[8C

    看到了吧,现在每一个p元素都变成一个box了,这就是弹性布局的神奇所在!

    在上面中,我们将div元素的display设置为box,这就是旧版本的弹性布局。对于比较旧的浏览器版本,我们需要加上-webkit-前缀。

    旧版本的弹性布局有两个属性值:

    •  box : 将容器盒模型作为块级弹性伸缩盒显示
    •   inline-box : 将容器盒模型作为内联级弹性伸缩盒显示

    PS:我们知道块级它是占用整行的,比如div元素;而内联级不占用整行,比如span元素。但是我们设置了整个盒子,他们都不占用,保持一致。就像我们上面的例子一样,给div元素设置了盒子,那么div元素里面的p元素就不占用了。

    下面介绍旧版本弹性布局的各个属性:

    box-orient 属性

    box-orient属性主要实现盒子内部元素的流动方向。

    div{
        display:-webkit-box;
        display:box;
        -webkit-box-orient:vertical;
        box-orient:vertical;
    }

    此时的结果就是垂直排列:

    KO$O4RM%C_DK3RL6{4NS`D6

    此属性的属性值有:

    • horizontal : 伸缩项目从左到右水平排列
    •     vertical  : 伸缩项目从上到下垂直排列
    • inline-axis : 伸缩项目沿着内联轴排列显示
    • block-axis : 伸缩项目沿着块轴排列显示

    大家不妨试一下:horizontal 和 inline-axis 都是水平排列,而vertical 和 block-axis 都是垂直排列。

    box-direction属性

    box-direction 属性主要是设置伸缩容器中的流动顺序。

    div{
        display:-webkit-box;
        display:box;
        -webkit-box-direction:reverse;
        box-direction:reverse;
    }

    这样我们的排序就是反序的了,运行结果为:

    `29$SHXQF0L(9X7921XJ2MJ

    此属性的属性值有:

    • normal  : 正常顺序,默认值
    • reverse : 反序

    box-pack属性

    box-pack 属性用于伸缩项目的分布方式。

    此属性的属性值有:

    • start   :  伸缩项目以起始点靠齐
    •   end   :  伸缩项目以结束点靠齐
    • center :  伸缩项目以中心点靠齐
    • justify  :  伸缩项目平局分布

    下面我们都试一下各个属性值的效果:

    1.start属性值

    div{
        -webkit-box-pack:start;
        box-pack:start;
    }

    这个就是默认靠齐方式:

    _0FOA8CVGLAYR_4TH8C

    2.end属性值

    复制代码
    div{
        -webkit-box-pack:
    end
    ;
        box-pack:
    end
    ;
    }
    复制代码

    这个就是以结束点靠齐:

    I(AW2DG@H(1S78}A10O47S8

    3.center属性值

    复制代码
    div{
        -webkit-box-pack:
    center
    ;
        box-pack:
    center
    ;
    }
    复制代码

    这就是居中对齐效果:

    CPL1~K0}U_2@U%5QQC2NDJE

    4.justify属性值

    复制代码
    div{
        -webkit-box-pack:
    justify
    ;
        box-pack:
    justify
    ;
    }
    复制代码

    这个就是平均分布效果:

    PPM48@VCKY3SC@)ETF`YB87

    PS:垂直方向上也是一样的原理,但如果height为auto的话,效果将出不来。所以需要给height设置一个定高(最好比默认情况高)。这时,就能看到在垂直方向上的效果了。这里我就不再赘述了。

    box-align属性

    box-align 属性用来处理伸缩容器的额外空间。

    此属性的属性值有:

    •      start  : 伸缩项目以顶部为基准,清理下部额外空间
    •      end    : 伸缩项目以底部为基准,清理上部额外空间
    •    center : 伸缩项目以中部为基准,平均清理上下部额外空间
    • baseline : 伸缩项目以基线为基准,清理额外的空间
    • stretch  : 伸缩项目填充整个容器,默认值

    同样的,我们将试一下每个属性值的效果:

    1.start属性值

    div{
        display:-webkit-box;
        display:box;
        -webkit-box-align:start;
        box-align:start;
    }

    效果如下:

    BBZ9PGG5X%$JR~1`4ZX5C{P

    2.end属性值

    复制代码
    div{
        display:-webkit-box;
        display:box;
        -webkit-box-align:
    end
    ;
        box-align:
    end
    ;
    }
    复制代码

    效果如下:

    3TTD)TX5TN{{U@`G~P6]60E

    3.center属性值

    复制代码
    div{
        display:-webkit-box;
        display:box;
        -webkit-box-align:
    center
    ;
        box-align:
    center
    ;
    }
    复制代码

    效果如下:

    (@PD~VFPSGZ_WZEWG~U2$G5

    4.baseline属性值

    如果box-orient是内嵌单轴或横向,所有的子元素都置于他们的基线对齐。

    复制代码
    div{
        display:-webkit-box;
        display:box;
        -webkit-box-orient:horizontal;
        box-orient:horizontal;
        -webkit-box-align:baseline;
        box-align:baseline;
    }
    复制代码

    效果如下:

    BBZ9PGG5X%$JR~1`4ZX5C{P

    而如果box-orient是块轴或者垂直方向的,那么所有的子元素都将居中垂直排列。

    复制代码
    div{
        display:-webkit-box;
        display:box;
        -webkit-box-orient:
    vertical
    ;
        box-orient:vertical;
        -webkit-box-align:baseline;
        box-align:baseline;
    }
    复制代码

    效果如下:

    ]6MTV[ER[6RJ$I}JC6Q5SP6

    5.stretch属性值

    所有子元素拉伸以填充包含区块。

    复制代码
    div{
        display:-webkit-box;
        display:box;
        -webkit-box-align:
    stretch
    ;
        box-align:
    stretch
    ;
    }
    复制代码

    效果如下:

    _0FOA8CVGLAYR_4TH8C

    box-flex属性

    box-flex 属性可以使用浮点数分配伸缩项目的比例。此属性是给容器内的项目设置的,它们会基于父容器的宽度来分配它们所占的比例:

    复制代码
    p:nth-child(1){
        -webkit-box-flex:1;
        box-flex:1;
    }
    p:nth-child(2){
        -webkit-box-flex:3;
        box-flex:3;
    }
    p:nth-child(3){
        -webkit-box-flex:1;
        box-flex:1;
    }
    复制代码

    效果如下:

    }GF4AT{PJ_HG0OGW~58J}}G

    当然也可以有些项目是固定宽度的,那么其他的项目也会分配剩余的宽度,比如这里第一个p元素设置为固定宽度:

    复制代码
    p:nth-child(2){
        -webkit-box-flex:2;
        box-flex:2;
    }
    p:nth-child(3){
        -webkit-box-flex:1;
        box-flex:1;
    }
    复制代码

    效果如下:

    ]R]G@J893O]@7PL@@%[%2YA

    更多使用情况,大家可以自己慢慢去尝试。

    box-ordinal-group 属性

    box-ordinal-group 属性可以设置伸缩项目的显示位置。

    复制代码
    p:nth-child(1){
        -webkit-box-ordinal-group:2;
        box-ordinal-group:2;
    }
    p:nth-child(2){
        -webkit-box-ordinal-group:3;
        box-ordinal-group:3;
    }
    p:nth-child(3){
        -webkit-box-ordinal-group:1;
        box-ordinal-group:1;
    }
    复制代码

    效果如下:

    2NH4LK6]XRV[C[V6NDKACDT

    可以看到:第一个p元素排在了第二,第二个p元素排在了第三,第三个p元素排在了第一。可以单独给某一个p元素设置此属性,其他项目会按照原来的顺序做变动。

    OK,那么旧版本的所有属性就简单的介绍完了,更多结合的用法还是根据需要自己多动手去练习一下。

    这里举一个水平垂直居中的例子:

    复制代码
    div{
        display:-webkit-box;
        display:box;
        height:500px;
        border:1px solid #f00;
        -webkit-box-pack:center;
        box-pack:center;
        -webkit-box-align:center;
        box-align:center;
    }
    复制代码

    那么效果就是这样的了:

    OV@IL0C)V)@ZSW3CI2~P7LO

    此时我们再给p元素设置一个固定的高度:

    p{
        width:150px;
        height:200px;
    }

    那么这时的效果就是:

    8%QHR3YLPZ~328YIF8L)3$B

    是不是很轻松就实现了这种效果呢!

    小结

    好的,到这里旧版本的弹性布局基础知识点就都介绍了一下。由于篇幅过长,怕大家看着疲劳,新版本的弹性布局(flex)我将放在下一篇博客介绍。希望能帮到大家,同时尽请关注!



    原文转载于:https://www.cnblogs.com/jr1993/p/4751410.html



    展开全文
  • Flex 弹性布局使用及说明

    千次阅读 2017-11-03 15:50:40
    1.flex-direction  决定主轴的方向,即项目排列的方向,有四个可能的值:row(默认)|row-reverse|column|column-reverse  row:主轴为水平方向,项目沿主轴从左至右排列 ... column:主轴为竖直方向,项目沿...

     1.flex-direction

        决定主轴的方向,即项目排列的方向,有四个可能的值:row(默认)|row-reverse|column|column-reverse

        row:主轴为水平方向,项目沿主轴从左至右排列

        column:主轴为竖直方向,项目沿主轴从上至下排列

        row-reverse:主轴水平,项目从右至左排列,与row反向

        column-reverse:主轴竖直,项目从下至上排列,与column反向

      2、flex-wrap

        默认情况下,item排列在一条线上,即主轴上,flex-wrap决定当排列不下时是否换行以及换行的方式,可能的值nowrap(默认)|wrap|wrap-reverse

        nowrap:自动缩小项目,不换行

        wrap:换行,且第一行在上方

        wrap-reverse:换行,第一行在下面

      3、flex-flow

        是flex-direction和flex-wrap的简写形式,如:row wrap|column wrap-reverse等。默认值为row nowrap,即横向排列 不换行。

      4、justify-content

        决定item在主轴上的对齐方式,可能的值有flex-start(默认),flex-end,center,space-between,space-around。当主轴沿水平方向时,具体含义为

          flex-start:左对齐

          flex-end:右对齐

          center:居中对齐

          space- between:两端对齐

          space-around:沿轴线均匀分布

        效果如下图 

      

    5、align-items

      决定了item在交叉轴上的对齐方式,可能的值有flex-start|flex-end|center|baseline|stretch,当主轴水平时,其具体含义为

        flex-start:顶端对齐

        flex-end:底部对齐

        center:竖直方向上居中对齐

        baseline:item第一行文字的底部对齐

        stretch:当item未设置高度时,item将和容器等高对齐

      效果图如下:

      

     

     6、align-content

       该属性定义了当有多根主轴时,即item不止一行时,多行在交叉轴轴上的对齐方式。注意当有多行时,定义了align-content后,align-items属性将失效。align-content可能值含义如下(假设主轴为水平方向):

          flex-start:左对齐

          flex-end:右对齐

          center:居中对齐

          space- between:两端对齐

          space-around:沿轴线均匀分布

          stretch:各行将根据其flex-grow值伸展以充分占据剩余空间

      效果图如下

      

      

    四、flex item属性详述

      item的属性在item的style中设置。item共有如下六种属性

      1、order

        order的值是整数,默认为0,整数越小,item排列越靠前,如下图所示代码如下

    复制代码
    <div class="wrap">
        <div class="div" style="order:4"><h2>item 1</h2></div>
        <div class="div" style="order:2"><h2>item 2</h2></div>
        <div class="div" style="order:3"><h2>item 3</h2></div>
        <div class="div" style="order:1"><h2>item 4</h2></div>
    </div>
    复制代码

    效果图为
      

      2、flex-grow

        定义了当flex容器有多余空间时,item是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同item的放大比例,如

    <div class="wrap">
        <div class="div" style="flex-grow:1"><h2>item 1</h2></div>
        <div class="div" style="flex-grow:2"><h2>item 2</h2></div>
        <div class="div" style="flex-grow:3"><h2>item 3</h2></div>
    </div>

    即当有多余空间时item1、item2、和item3以1:2:3的比例放大。

      3、flex-shrink

        定义了当容器空间不足时,item是否缩小。默认值为1,表示当空间不足时,item自动缩小,其可能的值为整数,表示不同item的缩小比例。flex-grow

      4、flex-basis

        表示项目在主轴上占据的空间,默认值为auto。如下代码

    <div class="wrap">
        <div class="div" style="flex-basis:80px"><h2>item 1</h2></div>
        <div class="div" style="flex-basis:160px"><h2>item 2</h2></div>
        <div class="div" style="flex-basis:240px"><h2>item 3</h2></div>
    </div>

      其效果图为

      

      5、flex

        flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和。

      6、align-self

        align-self属性允许item有自己独特的在交叉轴上的对齐方式,它有六个可能的值。默认值为auto

          auto:和父元素align-self的值一致

          flex-start:顶端对齐

          flex-end:底部对齐

          center:竖直方向上居中对齐

          baseline:item第一行文字的底部对齐

          stretch:当item未设置高度时,item将和容器等高对齐

      

    展开全文
  • 常见布局—弹性布局

    千次阅读 2020-08-24 12:04:53
    在常见的布局中,通常有一部分是固定高度,而其他部分是剩余大小分配的,这种情况我们可以使用弹性布局。 说到弹性布局,就得介绍一下css属性中的弹性盒——display:flex 它分为主轴和交叉轴两个方向,没有固定的...

    在常见的布局中,通常有一部分是固定高度,而其他部分是剩余大小分配的,这种情况我们可以使用弹性布局。

    说到弹性布局,就得介绍一下css属性中的弹性盒——display:flex

    它分为主轴和交叉轴两个方向,没有固定的方向,默认主轴是X轴,交叉轴是Y轴,也可以通过属性 flex-direction: column来设置主轴为Y轴

    主轴是X轴,意味着它会把子元素横向排列,所有子元素都到一行,Y轴也就是反过来的。

    主轴对齐方式——justify-content: center;(这里我选择的是居中对齐)

    交叉轴对齐方式——align-items: center;(这里我选择的是居中对齐)

    那我们来实现几个小例子:

    (1)、设置两个元素横向排列

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		html,body{
    			width: 100%;
    			height: 100%;
    		}
    		.box{
    			width: 100%;
    			height: 300px;
    			display: flex;
    		}
    		.left{
    			width: 50%;
    			height: 300px;
    			background: lightblue;
    		}
    		.right{
    			width: 50%;
    			height: 300px;
    			background: pink;
    		}
    	</style>
    </head>
    <body>
    	<div class="box">
    		<div class="left"></div>
    		<div class="right"></div>
    	</div>
    </body>
    </html>

    效果:

    (2)、设置上下两部分,上部固定高度,下部占剩余部分,其中下部左边固定,右边占剩余部分

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		html,body{
    			width: 100%;
    			height: 100%;
    		}
    		.box{
    			width: 100%;
    			height: 100%;
    			display: flex;
    			flex-direction: column;
    		}
    		.top{
    			width: 100%;
    			height: 200px;
    			background: lightblue;
    		}
    		.content{
    			flex: 1;
    			display: flex;
    		}
    		.left{
    			width: 300px;
    			height: 100%;
    			background: pink;
    		}
    		.right{
    			flex: 1;
    			background: orange;
    		}
    	</style>
    </head>
    <body>
    	<div class="box">
    
    		<div class="top"></div>
    
    		<div class="content">
    			<div class="left"></div>
    			<div class="right"></div>
    		</div>
    		
    	</div>
    </body>
    </html>

    这里解释一下,flex是在父元素中有 display:flex的情况下,这个元素占父元素的大小减去其他子元素的大小,即剩余全部大小

    效果:

    弹性盒还有很多属性,这里就不一一介绍了,如果有需要,大家可以自行去了解。

    如有疑问,也可以咨询博主。

    好了,这次就介绍到这里。

    如有问题,请指出,接受批评。

    个人微信公众号:

    展开全文
  • CSS弹性布局(一)

    千次阅读 2018-12-26 19:28:55
    弹性布局可以用于做响应式页面的制作 使用弹性布局需要使用要display里的flex属性 例:让一个div是弹性布局,代码如下 .div{ display:flex; } flex里有很多属性,其中设置在容器上的属性有6个 1.flex direction:...

    弹性布局可以用于做响应式页面的制作
    使用弹性布局需要使用要display里的flex属性
    例:让一个div是弹性布局,代码如下

    .div{
    	display:flex;
    	}
    

    flex里有很多属性,其中设置在容器上的属性有6个

    1.flex direction:决定主轴的方向(即项目的排列方向)。

    • row:主轴为水平方向,起点在左边
    <head>
        <meta charset="utf-8">
        <title>弹性布局</title>
        <style>
            .div{
                width: 1300px;
                background-color: green;
                height: 200px;
                display: flex;
                flex-direction:row;
            }
            .div1,.div2,.div3{
                width: 300px;
                height: 200px;
            }
            .div1{
                background-color: red;
            }
            .div2{
                background-color: darkcyan;
            }
            .div3{
                background-color: orange;
            }
    
        </style>
    </head>
    
    <body>
    <div class="div">
        <div class="div1">one</div>
        <div class="div2">two</div>
        <div class="div3">three</div>
    </div>
    </body>
    

    效果如下
    在这里插入图片描述

    • row-reverse:主轴为水平方向,起点在右边。
    .div{
                width: 1300px;
                background-color: green;
                height: 200px;
                display: flex;
                flex-direction:row;
            }
    

    结果如下
    在这里插入图片描述

    • column:主轴为垂直方向,起点在上沿。
      例:
    .div{
                width: 1300px;
                background-color: green;
                height: 200px;
                display: flex;
                flex-direction:column;
            }
    

    结果如下
    在这里插入图片描述

    div的高度被自动压缩

    • column-reverse:主轴为垂直方向,起点在下沿。
    .div{
                width: 1300px;
                background-color: green;
                height: 200px;
                display: flex;
                flex-direction:column-reverse;
            }
    

    结果如下图
    在这里插入图片描述

    2.flex-wrap:一行排不下,如何换行

    • wrap:换行,第一行在上方
     .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                flex-wrap: wrap;
            }
    

    结果如下
    在这里插入图片描述

    • nowrap:不换行
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                flex-wrap: wrap;
            }
    

    结果如下
    在这里插入图片描述

    div不换行,宽度自动收缩

    • wrap-reverse:换行,第一行在下方。
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                flex-wrap: wrap-reverse;
                margin-top: 200px;
            }
    

    结果如下
    在这里插入图片描述

    3.flex-flow:flex-direction属性和flex-wrap属性的简写形式

    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                flex-flow: row wrap;
                margin-top: 200px;
            }
    

    4.justify-content:项目在主轴上的对齐方式

    • flex-start:左端对齐
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:flex-start;
                margin-top: 200px;
            }
    

    结果如下
    在这里插入图片描述

    • flex-end:右端对齐
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:flex-end;
                margin-top: 200px;
            }
    

    结果如下

    在这里插入图片描述

    • center:居中对齐
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:center;
                margin-top: 200px;
            }
    

    结果如下
    在这里插入图片描述

    -space-around:每个项目两侧的间隔相等

    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:space-around;
                margin-top: 200px;
            }
    

    结果如下
    在这里插入图片描述

    -space-between:两端对齐,项目之间的间隔都相等

    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:space-between;
                margin-top: 200px;
            }
    

    结果如下
    在这里插入图片描述

    5.align-items:项目在交叉轴上如何对齐

    • flex-start
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:space-between;
                align-item:flex-start;
                
            }
    

    结果如下
    在这里插入图片描述

    • flex-end
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:space-between;
                align-item:flex-end;
                
            }
    

    结果如下

    在这里插入图片描述

    • center
    .div{
                width: 100%;
                background-color: green;
                height: 200px;
                display: flex;
                justify-content:space-between;
                align-item:center;
                
            }
    

    结果如下

    在这里插入图片描述

    • stretch::如果项目未设置高度或设为auto,将占满整个容器的高度。
    .div{
                width: 100%;
                background-color: green;
                height: 500px;
                display: flex;
                justify-content: space-between;
                align-items: stretch;
    
            }
    

    结果如下
    在这里插入图片描述

    • baseline:项目的第一行文字的基线对齐。
    .div{
                width: 100%;
                background-color: green;
                height: 500px;
                display: flex;
                justify-content: space-between;
                align-items: stretch;
    
            }
    

    在这里插入图片描述

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

    展开全文
  • HTMl弹性布局

    千次阅读 2019-03-12 20:40:32
    开发工具与关键技术:弹性布局 作者:li 弹性布局 一直以来,我们前端开发的布局方案是基于盒模型,但现在移动端的网页如果按pc端的来写,pc端的布局就不适应了,Flex布局意思是弹性布局,它可以让我们更灵活。需要...
  • 弹性布局 简介

    2019-08-11 17:18:21
    Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性,而且弹性布局基本可以任何一个容器都可以指定为Flex布局. 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的...
  • 弹性布局-列表

    2019-04-08 14:21:50
    弹性布局-列表li个数为单数时的布局
  • 弹性布局

    2019-03-11 20:28:17
    1.弹性布局简介 弹性布局,又称为“flex布局”,是W3C于2009年推出的一种布局方式,可以简单、快速、响应式的实现各种布局页面,取而代之的是“position+display+float”,现在已经得到了所有主流浏览器的支持。 ...
  • html之弹性布局

    千次阅读 2019-01-14 16:12:09
    相信大家在做html页面布局的时候都有过一个很脑袋疼的问题,那就是尺寸不平均,尺寸不平均会导致页面的不整齐,今天给大家分析下弹性布局弹性布局html布局中是很广泛的一个属性,他可以让你整个页面的布局合理化...
  • 弹性布局详解——一看就秒听懂

    千次阅读 2018-08-02 18:56:25
    前 言 itWang  在网页制作过程中,布局是我们最重要的一个环节。可以说布局的好坏直接影响到整个网页的成败!布局成,则事半功倍;布局败,则事倍功半。... 今天,就让我们一起来学习一下弹性布局...
  • 弹性布局实现垂直左右居中

    万次阅读 2018-05-19 17:04:59
    以下代码是用弹性布局实现垂直左右居中的例子 Document *{ margin: 0; padding: 0; } .wrap{ width: 100px; height: 100px; border: 1px solid #000; margin: 3.125em auto; display:...
  • 主要提醒大家注意:在使用弹性布局的时候,如果div内部写的是 中文 ,会导致内部换行,请给换行的div加一个 white-space: nowrap; 属性。
  • 首先介绍弹性布局中的一些术语的意思 main-axis:进行布局时作为布局基准的轴,在横向布局时为水平轴,在纵向布局时为垂直轴 main-start/main-end:进行布局时的起点和终点。在横向布局时为容器的左端和右端...
  • /*父级*/ .location-box{ flex:1; background:#fff; display:flex; flex-wrap:wrap; /*换行*/ } /*子级*/ .location-box .one-item{ display:flex; ...
  • 传送门,点击我!
  • CSS3弹性布局怎么兼容IE(11)?

    千次阅读 2017-12-01 13:14:57
    弹性布局(Flexbox)确实为我们构建复杂、灵活的布局带来了很大的便利,但是它的兼容性确让人很头痛,下面是我遇到的一个问题: 理想效果: IE11效果: html大概结构: 这里大致说一下css,input-...
  • flex多行弹性布局

    千次阅读 2018-06-08 08:40:42
    在父元素设置display: flex; flex-flow:row wrap; justify-content: space-between;原本以为使用align-content这个属性,结果一直不成功,然后在一个角落看到一个说明 align-content:在父元素内设置,用于确定子...
  • #container{ display: -moz-box; display: -webkit-box; border: solid 1px blue; -moz-box-orient: horizontal; -webkit-box-orient:horizontal; width: 500p
  • 弹性布局小技巧

    千次阅读 2019-08-10 12:01:22
    弹性布局小技巧 大对数人刚学完弹性布局时候会很疑惑,写出来的东西总是不尽人意,总有那种我明明是这样想的,为什么出来是另一种效果 弹性布局对图片的处理 有时候我们会直接用弹性布局去做图片,比如三张图片往里...
  • 常用样式基础篇(一)弹性布局flex

    千次阅读 2020-06-24 15:08:10
    在布局方面,尽可能减少左右浮动的使用,将弹性布局样式封装好,具有很大的实用性。下面为大家贴出较为常用的布局样式: 1.space-between左右布局/* 左右布局 */ .space-between { display: -webkit-flex;
1 2 3 4 5 ... 20
收藏数 33,120
精华内容 13,248
关键字:

弹性布局