CSS：弹性盒模型（Flexible Box）学习

最新推荐文章于 2025-09-12 15:58:40 发布

weixin_34082177

最新推荐文章于 2025-09-12 15:58:40 发布

阅读量93

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/1165991/blog/747912

2019独角兽企业重金招聘Python工程师标准>>>

关于w3school对弹性盒模型的解释，只找到这些相关的属性：

w3school原文中提到

浏览器支持

目前没有浏览器支持 box-flex 属性。

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

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

因此我考虑是否w3school的内容太久没有更新，以致某些新特性并没有特别的新增或进行解释。

我在我经常学习的网站【菜鸟教程http://www.runoob.com】进行了查询：

基于最近搜索到的有关弹性盒模型都是用的新属性flex-，因此我的学习也就基于弹性盒模型的新属性开始。

flex的定义和用法：

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

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>