CSS：彈性盒模型（Flexible Box）學習

時間 2019-11-13

標籤 css 彈性模型 flexible box 學習欄目 CSS 简体版

原文原文鏈接

關於w3school對彈性盒模型的解釋，只找到這些相關的屬性：css

w3school原文中提到html

瀏覽器支持

目前沒有瀏覽器支持 box-flex 屬性。git

Firefox 支持替代的 -moz-box-flex 屬性。github

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 屬性。web

所以我考慮是否w3school的內容過久沒有更新，以至某些新特性並無特別的新增或進行解釋。瀏覽器

我在我常常學習的網站【菜鳥教程http://www.runoob.com】進行了查詢：學習

基於最近搜索到的有關彈性盒模型都是用的新屬性flex-，所以個人學習也就基於彈性盒模型的新屬性開始。flex

flex的定義和用法：網站

flex 屬性用於設置或檢索彈性盒模型對象的子元素如何分配空間。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
注意：若是元素不是彈性盒模型對象的子元素，則 flex 屬性不起做用。flexbox

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

值	描述
flex-grow	一個數字，規定項目將相對於其餘靈活的項目進行擴展的量。
flex-shrink	一個數字，規定項目將相對於其餘靈活的項目進行收縮的量。
flex-basis	項目的長度。合法值："auto"、"inherit" 或一個後跟 "%"、"px"、"em" 或任何其餘長度單位的數字。
auto	與 1 1 auto 相同。
none	與 0 0 auto 相同。
initial	設置該屬性爲它的默認值，即爲 0 1 auto。
inherit	從父元素繼承該屬性。

如何定義彈性盒模型對象的父元素：

display: flex;

flex-flow的定義和用法：

flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的複合屬性。

flex-flow 屬性用於設置或檢索彈性盒模型對象的子元素排列方式。

flex-direction 屬性規定靈活項目的方向。

flex-wrap 屬性規定靈活項目是否拆行或拆列。

注意：若是元素不是彈性盒對象的元素，則 flex-flow 屬性不起做用。

flex-flow: flex-direction flex-wrap|initial|inherit;

值	描述
flex-direction	可能的值：row、row-reverse、column、column-reverse、initial、inherit，默認值是 "row"。規定靈活項目的方向。
flex-wrap	可能的值：nowrap、wrap、wrap-reverse、initial、inherit，默認值是 "nowrap"。規定靈活項目是否拆行或拆列。
initial	設置該屬性爲它的默認值。
inherit	從父元素繼承該屬性。

實例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>flexbox學習</title>
</head>
<style type="text/css">
body{
	margin: 0;
}
.Grid {
	display: flex;
}
.Grid-cell1 {
	flex: 2;
	border: 1px solid red;
}
.Grid-cell {
	flex: 1;
	border: 1px solid red;
}	
</style>

<body>
	<div class="Grid">
	  <div class="Grid-cell1">…</div>
	  <div class="Grid-cell">…</div>
	  <div class="Grid-cell">…</div>
	</div>
</body>
</html>

使用這個網站http://caniuse.com查詢flexbox目前的兼容性：

總結：

目前可變盒模型兼容性較差，到目前爲止可變盒模型的屬性分爲新舊2個版本，將來不排除產生新變化的可能，對於新手而言學習後實用性不高。固然，將來可變盒模型可能會日漸強大，須要咱們持續的學習css新增的新特性。

參考：