CSS3之多列布局columns詳解

龍恩0707發表於2018-01-25
CSSS3

CSS3之多列布局columns詳解

CSS3提供了個新屬性columns用於多列布局。
基本屬性如下：

1. columns: <'column-width'> || <'column-count'>
設定物件的列數和每列的寬度。複合屬性。

/*列數及列寬固定*/
-moz-columns: 200px 3;
-webkit-columns: 200px 3;
columns: 200px 3;

/*列寬固定，根據容器寬度液態分佈列數*/
-moz-columns: 200px;
-webkit-columns: 200px;
columns: 200px;

2. column-width：<length> | auto 設定物件的寬度；使用畫素表示。
auto：根據 <' column-count '> 自定分配寬度

/*列寬固定，根據容器寬度液態分佈列數*/
-moz-column-width: 200px;
-webkit-column-width: 200px;
column-width: 200px;

3. column-count：<integer> | auto 用來定義物件中的列數，使用數字 1-10表示。
auto：根據 <' column-width '> 自定分配寬度

/*列數固定，根據容器寬度液態分佈列寬*/
-moz-column-count:5;
-webkit-column-count:5;
column-count:5;

4. column-gap: normal || length， normal是預設值，為1em， length 是用來設定列與列之間的間距。

/* 固定列間隙為40px */
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-gap: 40px;

/* 列間隙column-gap: normal；font-size為14px時，列間隙column-gap:normal的計算值也為14px */
-moz-column-gap: normal;
-webkit-column-gap: normal;
column-gap: normal;

5. column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
設定物件的列與列之間的邊框。複合屬性

/* 在列與列之間設定綠色間隔線 */
-moz-column-rule: 10px solid #090;
-webkit-column-rule: 10px solid #090;
column-rule: 10px solid #090;

6. column-fill：auto | balance
設定物件所有列的高度是否統一;
auto： 列高度自適應內容;
balance： 所有列的高度以其中最高的一列統一

7. column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
設定物件之前是否斷行;
auto： 既不強迫也不禁止在元素之前斷行併產生新列;
always： 總是在元素之前斷行併產生新列
avoid：避免在元素之前斷行併產生新列

8. column-break-after：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
設定物件之後是否斷行

9. column-break-inside：auto | avoid | avoid-page | avoid-column
設定物件內部是否斷行;
auto：既不強迫也不禁止在元素內部斷行併產生新列;
avoid：避免在元素內部斷行併產生新列

column-span: none（預設值）|| all，none是不跨越任何列。all 是元素跨越所有列，並定位在列的Z軸之上。

瀏覽器支援：

Internet Explorer 10+ 和 Opera 支援 column-width 屬性。
Firefox 支援替代的 -moz-column-width 屬性。
Safari 和 Chrome 支援替代的 -webkit-column-width 屬性。
註釋：Internet Explorer 9 以及更早版本的瀏覽器不支援 column-width 屬性。

下面使用column實現一個瀑布流佈局的demo如下：

先預覽看效果

碰到的問題如下：
1. 在做demo的時候，需要顯示內容的div設定高度為100% 和 overflow: auto; 否則的話，多列樣式column-width佈局時內容被截斷、錯亂。
比如上面的demo的樣式新增如下程式碼：

.item {
  height: 100%;
  overflow: auto;
}

下面是html程式碼如下：

<!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <title>標題</title>
        <link rel="shortcut icon" href="/favicon.ico">
        <link href="./index.css" rel="stylesheet"/>
    </head>
    <body>
      <div class="container">
        <div class="waterfall">
          <div class="item">
            <img src="http://dummyimage.com/640x4:3" />
            <p>我來測試demo111111</p>
          </div>
          <div class="item">我來測試demo2222</div>
          <div class="item">
            <img src="http://dummyimage.com/640x3:4" />
            <p>我來測試demo3333</p>
          </div>
          <div class="item">
            <img src="http://dummyimage.com/480x4:3" />
            <p>我來測試demo4444</p>
          </div>
          <div class="item">
            <img src="http://dummyimage.com/480x4:3" />
            <p>我來測試demo5555</p>
          </div>
          <div class="item">
            <img src="http://dummyimage.com/480x3:4" />
            <p>我來測試demo6666</p>
          </div>
          <div class="item">
            <img src="http://dummyimage.com/640x21:10" />
            <p>我來測試demo7777</p>
          </div>
          <div class="item">
            <p>我來測試demo8888</p>
          </div>
          
        </div>
      </div>
    </body>
</html>

CSS程式碼如下：

* {
  margin: 0;
  padding: 0;
}
.container {
  width: 96%;
  margin: 20px auto 20px;
}
.waterfall {
  column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;

  column-gap: 15px;
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
  -ms-column-gap: 15px;
  -o-column-gap: 15px;

}
.item {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  padding: 1em;
  background-color: white;
  border: 1px solid #ccc;

  border-radius: 4px;
  -webkit-border-radius: 4px;

  /* 設定上下間距 */
  margin-bottom: 10px;

  /*  需要設定 height: 100%; overflow: auto */
  height: 100%;
  overflow: auto;
}
.item img {
  width: 100%;
  padding-bottom: 1em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #cccccc;
}

相關文章