display:flex與inline-flex 區別

admin發表於2019-03-25
Flexinline

關於彈性佈局的基本用法本文不做介紹，具體參閱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.softwhy.com/" />
<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"的元素能夠在橫向上自動填充滿它的父元素。

div為表現為為塊級元素的特性，程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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表現為內聯塊級元素的特性。

相關文章