• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  广告

                  display:flex与inline-flex 区别

                  2019-3-25 14:10| 作者: admin| 查看: 277| 评论: 0|来自: 蚂蚁部落

                  关于弹性布局的基本用法本文不做介绍,具体参阅display:flex 弹性布局一章节。

                  弹性布局的设置可以有两种,也就是几天主题中介绍的两种方式:

                  [CSS] 纯文本查看 复制代码
                  display:flex;
                  display:inline-flex;

                  都可以设置元素的弹性布局效果,但是很少介绍两者的区别,或者有文章介绍,但是并不是太详细。

                  本文结合代码实例对它们之间的区别进行一下详细介绍,首先看一段简化的代码:

                  [CSS] 纯文本查看 复制代码
                  .one{display: flex;}
                  .two{display: inline-flex;}

                  有两个div,分别设置两种不同类型的弹性布局,那么对它们有什么影响呢。

                  总结如下:

                  (1).对于它们的内部的项目没有任何区别,也就是效果完全一样。

                  (2).对于容器div自身来说,一个表现为块级元素,一个表现为块级内联元素。

                  它们唯一的区别就是inline-flex可以将当前元素转换为块级内联元素,flex不进行转换。

                  对于它们的内部子项目没有任何影响,只是对自身和自身与周边元素的关系产生一些影响。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  .main{
                    background-color: red;
                    display: flex;
                  }.main>div{
                    width: 50px;
                    height: 50px;
                    border: 1px solid blue;
                    box-sizing: border-box
                  }
                  </style>
                  </head>
                  <body>
                    <div class="main">
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                    </div>
                  </body>
                  </html>

                  class属性值为"main"的元素能够在横向?#29486;?#21160;填充满它的父元素。

                  div为表现为为块级元素的特性,代码修改如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  .main{
                    background-color: red;
                    display: inline-flex;
                  }.main>div{
                    width: 50px;
                    height: 50px;
                    border: 1px solid blue;
                    box-sizing: border-box
                  }
                  </style>
                  </head>
                  <body>
                    <div class="main">
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                    </div>
                  </body>
                  </html>

                  上面代码将display属性值修改为inline-flex。

                  外层div的宽度是根据内部子元素的宽度自自适应的,也就是外层div表现为内联块级元素的特性。


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                                            彩票中奖查询2019072 福利彩票基本走势图带坐标 32张扑克牌九 六合图库118 山东群英会软件手机版 时时彩平台大全 体彩浙江6+1开奖结果18135 彩乐乐11选5 一头一尾中特码 舟山飞鱼直播走势图片 体彩p3杀码 贵州快三形态一定牛 腾讯分分彩怎么才能赢 彩票顶呱刮app下载 甘肃快三开奖结果今天一定牛