项目1:扩张因子为0默认值,则不会索取父级多余空间
在这里插入代码片<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li:nth-child(1) {
order: 3;
}
li:nth-child(2) {
order: 2;
}
li:nth-child(3) {
order: 1;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<style type="text/css">
ul {
display: flex;
width: 600px;
border: 1px solid red;
}
li {
list-style: none;
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
text-align: center;
line-height: 100px;
background-color: #8cacea;
}
li:nth-child(1) {
flex-basis: 100px;
background: yellow;
}
li:nth-child(2) {
background: red;
flex-basis: 200px;
}
li:nth-child(3) {
flex-basis: auto;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
Formatting Context格式化上下文
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
最常见的 Formatting context 格式化上下文有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
哪些元素会生成BFC?
(1)根元素
(2)float属性不为none
(3)position为absolute或fixed
(4)display为inline-block, table-cell, table-caption, flex, inline-flex
(5)overflow不为visible,overflow:hidden—触发BFC属性—BFC的区域不会与float box重叠
BFC的应用-浮动覆盖问题
(1)根据BFC布局规则第3条:
每个元素的margin box的左边, 与包含块border box的左边相接触。即使存在浮动也是如此。
因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。
*
常见格式化上下文FC --Formatting Context
①BFC—Block Formatting Context—块级格式化上下文
②IFC—Inline Formatting Context—行级格式化上下文
③FFC—Flexible Formatting Contex----弹性格式化上下文
④GFC—Grids Formatting Contex—网格格式化上下文