CSS中display:flex與inline-flex屬性的使用方法

發(fā)布時(shí)間：2020-04-22 10:49:34 來(lái)源：億速云閱讀：943 作者：小新欄目：web開發(fā)

今天小編給大家分享的是CSS中display:flex與inline-flex屬性的使用方法，相信很多人都不太了解，為了讓大家更加了解，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

Flex介紹

Flex是Flexible Box的縮寫，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局。

flex：將對(duì)象作為彈性伸縮盒顯示

inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示

flex示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
  <style type="text/css">
    .main{
      width:200px;
      background-color: red;
      display: flex;/*父div設(shè)置該屬性*/
    }
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      box-sizing: border-box;/*這是css3屬性，如果不懂，請(qǐng)繼續(xù)往下閱讀*/
      /*float:left;這個(gè)屬性就不需要了，會(huì)自動(dòng)浮動(dòng)*/
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>
</html>

效果如下：

CSS中display:flex與inline-flex屬性的使用方法

display:inline-flex示例代碼

如果想看到效果，將上面的display:flex,換成display:inline-flex,并且將width:200px刪除。在沒(méi)有測(cè)試之前，有的人可能會(huì)認(rèn)為.main會(huì)占據(jù)整個(gè)一行，但是，測(cè)試結(jié)果是，它會(huì)根據(jù)子元素所有的div大小自適應(yīng)寬度和高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
  <style type="text/css">
    .main{
      background-color: red;
      display: inline-flex;/*父div設(shè)置該屬性*/
    }
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      box-sizing: border-box;/*這是css3屬性，如果不懂，請(qǐng)繼續(xù)往下閱讀*/
      /*float:left;這個(gè)屬性就不需要了，會(huì)自動(dòng)浮動(dòng)*/
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>
</html>

效果如下：

CSS中display:flex與inline-flex屬性的使用方法

以上就是CSS中display:flex與inline-flex屬性的使用方法的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來(lái)億速云行業(yè)資訊！

向AI問(wèn)一下細(xì)節(jié)

CSS中display:flex與inline-flex屬性的使用方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽