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新增的新特性。

参考：

http://www.w3school.com.cn/cssref/index.asp【CSS 参考手册】
http://www.runoob.com/cssref/css-reference.html【CSS 参考手册】
http://www.cnblogs.com/JuFoFu/p/5101948.html【CSS 标准发布流程】
https://github.com/itechifree/solved-by-flexbox-cn【flexbox案列解析】