CSS排斥：讓無聊的佈局不那麼無聊

Chinese (Traditional) (中文（繁體）) translation by Stypstive (you can also view the original English article)

在本教程中，我們將探討CSS排斥（排除）。初一看，CSS排斥好像和CSS形狀相似，因為它們都將內容環繞於一個元素。但在技術上，它們的目的是不同的。

CSS形狀模塊定義了一個元素的真實形狀，而內容不會環繞在那個形狀上，除非此元素是浮動的。而CSS排斥模塊卻是專門用於這一目的;它支持嵌入內容環繞於一個元素，而無需浮動，也不管此元素是如何放置的，無論絕對的，相對的或固定的。

屬性

CSS排斥模塊引入了一些新的屬性和值，它們是：

wrap-flow：設置排斥區域，以及內容應該如何環繞。
wrap-margin：顧名思義，設置邊距或環繞排斥區域的偏移量。

瀏覽器支持

值得一提的是，目前CSS排斥只在邊緣，互聯網探索10及以上的版本中得到支持，再一次表現了微軟公司對瀏覽器前沿技術的推動（我們也要感謝他們對CSS網格的開發）。到目前為止，我們必須在使用這個新屬性之前加上前綴-ms-。

為更好地理解CSS排斥是如何工作的，我們準備好了一個簡單的開始頁面，它包含幾行文字和後面的一張人物圖片。

這是網頁上非常常見的一種模式，所以我們看一看是否能用CSS排斥將其裝飾一番。假設你的瀏覽器支持排斥，我們要追求如下效果：

使用CSS排斥

首先，讓我們將內容安排成兩列，並將人物圖片放到中間。你如何編排並不要緊，比如你可以用CSS Flexbox，CSS網格或“傳統的”使用float屬性的方法。

我們從上述圖片中可看出，人物圖片已經從文件流中移除了，它被放在了內容的頂部，變得模糊了一些。使用CSS排斥，我們可強製文字內容環繞這張人物圖片。

為實現這一點，我們要設置头像图片的wrap-flow屬性，將其值設置為both。

.avatar {
   -ms-wrap-flow: both; // Works in IE and Edge.
   wrap-flow: both; // Does't not work in any browser.
}

wrap-flow属性将.avatar设置为一个“排斥区域”;这是一个文字内容不能穿过的区域。你在下图中可以看到，文字内容被挤到了图片的左边和右边。

可能的值

其它可接受的值還有：start，end，maximum，minimum和clear。

第一個值，start，使得文字環繞在排斥區域的開始位置，但讓區域的結束處後面變為空白。

.avatar {
   -ms-wrap-flow: start;
}

作用於我們的頁面，應該會看到如下效果：

end值，正如其名，它會起到相反的作用，讓文字內容圍繞到排斥區域的結束處。

.avatar {
   -ms-wrap-flow: end;
}

於是得到如下效果：

注意：排斥區域的開始(start)和結束(end)是由內容的書寫方向決定的。如果文字是從右至左書寫的，比如阿拉伯文和希伯來文，則內容的環繞開始於排斥區域的右邊，結束於排斥區域的左邊。

對於日文，如果是由上至下書寫，則內容的環繞開始於頂部，結束於底部。

第三種可接受的值是maximum。

.avatar {
   -ms-wrap-flow: maximum;
}

它會讓內容出現於排斥區域在容器區域內空白最大的地方。

minimum值則相反。

.avatar {
   -ms-wrap-flow: minimum;
}

這裡，內容會流過排斥區域周圍最窄的空間處。

最後一個值是clear。

.avatar {
   -ms-wrap-flow: clear;
}

這和你從浮動體那裡學到的那個clear非常相似，因為它會清除排斥區域的左邊和右邊內容。因而，它只允許內容流動到排斥區域的頂部和底部。

排斥邊距

和CSS形狀類似，CSS排斥模塊也有一個定義排斥區域邊距的屬性，稱為wrap-margin。和margin屬性不同，wrap-margin必須是一個正值。

.avatar {
   -ms-wrap-flow: end;
   -ms-wrap-margin: -10px; // Invalid.
   -ms-wrap-margin: 10px; // Valid.
}

此外，wrap-margin屬性不允許為每一邊 (上下左右) 分別設置。這個功能未來是否會出現仍未可知。

.avatar {
   -ms-wrap-flow: end;
   -ms-wrap-margin: 10px 20px 10px 30px; // Invalid.
   -ms-wrap-margin: 10px; // Valid.
}

一旦設置了這個屬性，我們可以看到排斥區域周圍的空白變多了。

@supports

如果我們將人物圖片放到內容上，沒有CSS排斥的支持，將得到一個很糟糕的佈局。因而，考慮回退才是明智的，將相關的樣式放到一個@supports規則下，比如：

.site-content .avatar {
  width: 180px;
  height: 180px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  margin-top: 80px;
}

/* wrap the relevant rules in a @supports declaration, just to be safe */
@supports (-ms-wrap-flow: both) {
  .site-content .avatar {
    position: absolute;
    top: 300px;
    left: 50%;
    margin-left: -90px;
    -ms-wrap-margin: 50px;
    -ms-wrap-flow: both
  }
}

這樣，我們的CSS排斥樣式將只在支持它的瀏覽器中起作用。