溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS中flex和inline-flex的區(qū)別有哪些

發(fā)布時(shí)間：2021-03-17 11:26:29 來(lái)源：億速云 閱讀：541 作者：清風(fēng) 欄目：web開(kāi)發(fā)

本文將為大家詳細(xì)介紹“CSS中flex和inline-flex的區(qū)別有哪些”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“CSS中flex和inline-flex的區(qū)別有哪些”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。

inline-flex 和 inline-block 一樣，對(duì)內(nèi)部元素來(lái)說(shuō)是個(gè) display:flex 的容器，對(duì)外部元素來(lái)說(shuō)是個(gè) inline 的塊。

兩者的區(qū)別描述：

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

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

一句話來(lái)描述就是 當(dāng)Flex Box 容器沒(méi)有設(shè)置寬度大小限制時(shí)，當(dāng)display 指定為 flex 時(shí)，F(xiàn)lexBox 的寬度會(huì)填充父容器，當(dāng)display指定為 inline-flex 時(shí)，F(xiàn)lexBox的寬度會(huì)包裹子Item，如下圖所示：

CSS中flex和inline-flex的區(qū)別有哪些

對(duì)應(yīng)的代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>

    /*Flex 容器*/
    .flex__container {
      display: inline-flex;
      background-color: gray;
    }

    /*Flex 子 Item */
    .flex__item {
      width: 50px;
      height: 50px;

      background-color: aqua;
      border: 1px solid black;
    }

  </style>
</head>
<body>

<!--Flex容器-->
<div class="flex__container">

  <!--Flex容器中的子Item-->
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
</div>

</body>
</html>

如果你能讀到這里，小編希望你對(duì)“CSS中flex和inline-flex的區(qū)別有哪些”這一關(guān)鍵問(wèn)題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手