后盾人CSS课程学习笔记
CSS3 弹性盒模型（Flex Box）
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。
| 属性 | Chrome | Edge | Fire Fox | Safari | Opera |
|---|---|---|---|---|---|
| Basic support (single-line flexbox) | 29.0 21.0 -webkit- | 11.0 | 22.0 18.0 -moz- | 6.1 -webkit- | 12.1 -webkit- |
| Multi-line flexbox | 29.0 21.0 -webkit- | 11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
弹性盒模型
声明定义
容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。
使用display: flex进行声明定义的元素将可以看作是一个弹性盒容器，容器内的元素将可以使用后续的一些样式进行处理。当然，flex容器下的子元素也可以使用display: flex将它定义成弹性盒容器，即容器中还有容器。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>声明flex布局</title>
<style>
* {
margin: 0;
padding: 0;
}
footer {
/* 使用 display: flex 或 display: inline-flex 将元素设置成弹性盒模型 */
/* display: flex 将元素设置成块状的弹性盒模型 */
/* display: inline-flex 将元素设置成行状的弹性盒模型 */
display: flex;
/* display: inline-flex; */
background-color: #ccc;
height: 100px;
}
</style>
</head>
<body>
<footer>
<div>moxuan</div>
<div>max</div>
<div>xyx</div>
</footer>
</body>
</html>
flex-direction
flex-direction：用于控制弹性盒子的元素排列方向（用于控制弹性盒子
主轴的方向）
| flex-direction | 功能描述 |
|---|---|
| row | 从左到右水平排列元素（默认值） |
| row-reverse | 从右向左排列元素 |
| column | 从上到下垂直排列元素 |
| column-reverse | 从下到上垂直排列元素 |
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex-direction</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 10px 20px;
}
main {
/* 将 mian 元素定义成 flex 容器 */
display: flex;
/* flex-direction 定义容器的主轴方向，默认是 row ,即水平方向 */
flex-direction: row;
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
border: 2px solid #cccccc;
}
main div {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<main>
<div>1</div>
<div>2</div>
<div>3</div>
</main>
</body>
</html>
flex-direction示例
flex-wrap
flex-wrap：规定flex容器在某一方向长度不够时是否换行，默认
flex-wrap: nowarp不换行，此时对容器内的元素进行压缩处理（用于控制交叉轴（副轴）的方向）flex-wrap按行换行，正常wrap方向是从上到下，wrap-reverse方向是从下到左
flex-wrap按列换行，正常wrap方向是从左到右，wrap-reverse方向是从右到左
| flex-wrap | 功能说明 |
|---|---|
| nowrap | 元素不拆行或不拆列（默认值） |
| wrap | 容器元素在必要的时候拆行或拆列。 |
| wrap-reverse | 容器元素在必要的时候拆行或拆列，但是以相反的顺序 |
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex-wrap</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 10px 20px;
}
main {
/* 容器宽度为280 < 3*100 */
width: 280px;
/* 将 mian 元素定义成 flex 容器 */
display: flex;
/* flex-direction 定义容器的主轴方向，默认是 row ,即水平方向 */
flex-direction: row;
/* flex-wrap 规定flex容器是否换行，默认是 nowrap 不换行 */
/* 此时当容器的指定方向装不下时，容器会对容器内的元素进行压缩处理 */
flex-wrap: nowrap;
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
border: 2px solid #cccccc;
}
main div {
width: 100px;
height: 100px;
background-color: red;
background-clip: content-box;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<main>
<div>1</div>
<div>2</div>
<div>3</div>
</main>
</body>
</html>
flex-wrap示例
flex-flow
flex-flow: <flex-direction> <flex-wrap>，即flex-flow是flex-direction和flex-wrap的组合
flex容器中轴的概念
flex容器中有两种轴：主轴、副轴（交叉轴）
flex-direction规定主轴的方向；flex-wrap规定副轴的方向
例如：
- 当
flex-direction: row;flex-wrap: wrap时，主轴为从左到右的水平轴（元素排列方向），副轴为从上到下的垂直轴（元素的换行方向）； - 当
flex-direction: row-reverse;flex-wrap: wrap-reverse时，主轴为从右到左的水平轴，副轴为从下到上的垂直轴； - 当
flex-direction: column;flex-wrap: wrap时，主轴为从上到下的垂直轴，副轴为从左到右的水平轴； - 。。。。。。
对齐方式
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex容器对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 10px 20px;
}
main {
height: 150px;
display: flex;
/* 根据 flex-direction: row; 当前主轴为从左到右 */
flex-direction: row;
/* 根据 flex-wrap: wrap; 当前副轴为从上到下 */
flex-wrap: wrap;
justify-content: flex-start;
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
/* justify-items: center; */
/* align-content: stretch; */
/* align-items: stretch; */
border: 2px solid #cccccc;
}
main div {
width: 100px;
height: 100px;
background-color: red;
/* background-clip: content-box; */
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<main>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</main>
</body>
</html>
justify-content
justify-content：设置主轴内容的对齐方式
| justify-content | 功能说明 |
|---|---|
| flex-start | 元素紧靠主轴起点对齐 |
| flex-end | 元素紧靠主轴终点对齐 |
| center | 元素沿主轴方向居中对齐 |
| space-between | 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间 |
| space-around | 每个元素两侧的间隔相等。所以，元素之间的间隔比元素与容器的边距的间隔大一倍 |
| space-evenly | 元素间距离平均分配（这个样式好看） |
justify-content示例
align-items
align-items：控制元素在行上的对齐方式（副轴）
| align-items | 功能说明 |
|---|---|
| stretch | 元素被拉伸以适应容器（默认值）（优先级低于width、height之类） |
| center | 元素位于容器的中心 |
| flex-start | 元素位于容器的交叉轴开头 |
| flex-end | 元素位于容器的交叉轴结尾 |
align-items示例
align-content
align-content：控制行在副轴上的对齐方式
| align-content | 功能说明 |
|---|---|
| stretch | 将空间平均分配给元素 |
| flex-start | 元素紧靠副轴起点 |
| flex-end | 元素紧靠副轴终点 |
| center | 元素从弹性容器中心开始 |
| space-between | 第一个元素靠副轴起点，最后一个元素靠副轴终点，余下元素平均分配空间 |
| space-around | 每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 |
| space-evenly | 元素间距离平均分配 |
align-content示例
弹性元素
align-self
align-self：对单个元素的副轴对齐方式控制，控制方式同align-items，不同之处在于align-self是作用在flex容器的元素上，而align-items直接作用在flex容器上。
flex-grow
flex-grow：用于将弹性盒子的可用空间，分配给弹性元素。可以使用整数或小数声明。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex容器对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 10px 20px;
}
main {
width: 560px;
height: 150px;
display: flex;
/* 根据 flex-direction: row; 当前主轴为从左到右 */
flex-direction: row;
/* 根据 flex-wrap: wrap; 当前副轴为从上到下 */
flex-wrap: wrap;
border: 2px solid #cccccc;
}
main div {
width: 100px;
height: 100px;
background-color: red;
background-clip: content-box;
padding: 10px;
box-sizing: border-box;
border: 1px solid red;
}
/* main 下的三个 div 元素 */
/* flex-grow 属性值分别为 0 1 3 */
/* 它们共同分配主轴方向的剩余空间 */
/* 首先按照 flex-grow 的值的总和将剩余空间拆分 */
/* flex-grow 值为 0 则表示不分配剩余空间 */
/* flex-grow 值为 1 则表示分配一份空间 */
/* flex-grow 值为 3 则表示分配 3 分空间 */
main div:first-child {
flex-grow: 0;
}
main div:nth-child(2) {
flex-grow: 1;
}
main div:nth-child(3) {
flex: 3;
}
</style>
</head>
<body>
<main>
<div>1</div>
<div>2</div>
<div>3</div>
</main>
</body>
</html>
flex-grow示例
flex-shrink
与
flex-grow相反flex-shrink是在弹性盒子装不下元素时定义的缩小值。
缩小比例 = 不足的空间 / (元素1宽度 x 缩小比例) + (元素2宽度 x 缩小比例) ...
最终尺寸 = 元素3宽度 - (缩小比例 x 元素3的宽度) X 元素宽度
flex-basis
flex-basis：主轴的基准尺寸
flex
flex: <flex-grow> <flex-shrink> <flex-basis>，flex是flex-grow、flex-shrink和flex-basis的组合
order
order用于做元素的排序，默认order值为 0
order的值越大，元素越靠后
使用margin自动撑满空间技巧
margin-right: auto
比如对于顶部header，左边有一部分内容，右边有一部分内容
当所有的元素都是用的display: flex弹性盒模型的时候
此时，可以在左边的元素上使用margin-right: auto让左侧的元素自动撑满
