CSS属性之弹性盒模型(新)
什么是弹性盒模型布局
简介：
弹性盒模型布局是CSS3中一种新的布局方式，它的优点在于：开发只需声明布局应该具备的行为，而不须要给出具体的实现方式，它的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。html
即便容器中的条目的尺寸是未知或是动态的，弹性盒模型也能正常地工做，容器会根据布局的须要，调整条目的尺寸和顺序来填充空间，当容器的屏幕尺寸变大或变小时，容器中条目的尺寸或顺序也会动态地调整：当容器尺寸变大时，条目会被拉大来更好地填充空间，相对地，当容器的尺寸变小时，条目的尺寸和顺序也会相应的变小，防止条目溢出容器。布局
与传统布局不一样的是，弹性盒模型布局与方向是无关的，传统布局中，block布局是把块在垂直方向从上到下排列的，在inline布局中，是把元素在水平方向上排列的，而在弹性盒模型中，方向是由开发人员控制。flex
相关概念：
如上图所示：边框表示容器，"1"和"2"表示条目，弹性盒模型中，有两条相互垂直的轴，水平方向上（X）的表示主轴，垂直方向上（Y）的表示交叉轴，固然，主轴也能够在垂直方向上，交叉轴能够在水平方向上。spa
在布局中，CSS属性首先要定义主轴的方向（水平或垂直），交叉轴也相应地肯定下来，主轴表示容器中每一行上条目的排列顺序，交叉轴表示条目自己的排列顺序。3d
肯定了主轴和交叉轴，还要肯定各自的排列顺序，水平方向上，能够从左到右或从右到左，在垂直方向上，能够从上到下或从下到上。在主轴上，条目的起始和结束位置，分别为主轴的起始和主轴的结束，在交叉轴上，条目的起始和结束位置，分别为交叉轴的起始和交叉轴的结束。code
弹性盒模型的两个尺寸：主轴尺寸和交叉轴尺寸。若是主轴在水平方向上，主轴尺寸和交叉轴尺寸分别为元素的宽度和长度，若是主轴在垂直方向上，尺寸相反。若主轴在水平上，与主轴和交叉尺寸对应的属性分别CSS属性中的widht和height。htm
弹性盒模型相关的属性
flex属性
flex属性规定弹性盒模型对象的子元素如何分配空间，注：若元素不是弹性盒模型的子元素，则flex不起做用。因此需定义元素为弹性盒模型的子元素，即：display: flex;对象
flex-grow属性
flex-grow属性设置弹性盒的扩展比例（扩大比例）。blog
属性值：utf-8
- number--默认值为0，相对于其它的扩展量。至关于将空间分为number不均等份。
- initial，默认值。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>弹性盒模型</title>
<style>
#main {
width: 400px;
height: 100px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
}
#main .div1 {
background-color: blue;
flex-grow: 1; /* 扩展比例量为 1 */
}
#main .div2 {
background-color: yellow;
flex-grow: 2; /* 扩展比例量为 2 */
}
#main .div3 {
background-color: orange;
flex-grow: 3; /* 扩展比例量为 3 */
}
#main .div4 {
background-color: #d2d2d2;
flex-grow: 4; /* 扩展比例量为 4 */
}
</style>
</head>
<body>
<div id="main">
<div class="div1">扩展量为1</div>
<div class="div2">扩展量为2</div>
<div class="div3">扩展量为3</div>
<div class="div4">扩展量为4</div.
</div>
</body>
</html>
效果以下：
flex-shrink、flex-basis属性
flex-shrink属性设置弹性盒的缩小量，与flex-grow相反。注：当整个弹性盒被条目填充满时，才能有效。
属性值：number--缩小比例量。
flex-basis属性设置弹性盒的伸缩基准值（项目的初始长度）。
属性值：number--固定长度或百分比长度，设置弹性盒子元素的初始长度。
下面设置全部项目的初始长度为80px：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>弹性盒模型</title>
<style>
#main {
width: 400px;
height: 100px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
}
#main div {
flex-basis: 80px; /* 设置弹性盒项目全部div的初始长度均为80px */
}
#main .div1 {
background-color: blue;
}
#main .div2 {
background-color: yellow;
}
#main .div3 {
background-color: orange;
}
#main .div4 {
background-color: #d2d2d2;
}
</style>
</head>
<body>
<div id="main">
<div class="div1">扩展量为1</div>
<div class="div2">扩展量为2</div>
<div class="div3">扩展量为3</div>
<div class="div4">扩展量为4</div.
</div>
</body>
</html>
效果以下：
也能够在以上状况下，再单独设置"扩展量为2"的初始长度为100px:
#main {
width: 400px;
height: 100px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
}
#main div {
flex-basis: 80px; /* 设置弹性盒项目全部div的初始长度均为80px */
}
#main .div1 {
background-color: blue;
}
#main .div2 {
background-color: yellow;
flex-basis: 100px;
}
#main .div3 {
background-color: orange;
}
#main .div4 {
background-color: #d2d2d2;
}
效果以下：
为"扩展量为2"设置"flex-shrink: 5;"
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>弹性盒模型</title>
<style>
#main {
width: 400px;
height: 100px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
}
#main div {
flex-basis: 120px; /* 设置初始长度为120px */
}
#main .div1 {
background-color: blue;
}
#main .div2 {
background-color: yellow;
flex-shrink: 5; /* 当flex-shrink设置的属性值越大时，即条目长度越长时，效果越明显。 */
}
#main .div3 {
background-color: orange;
}
#main .div4 {
background-color: #d2d2d2;
}
</style>
</head>
<body>
<div id="main">
<div class="div1">扩展量为1</div>
<div class="div2">扩展量为2</div>
<div class="div3">扩展量为3</div>
<div class="div4">扩展量为4</div.
</div>
</body>
</html>
效果以下：
注："flex-shrink"属性，当整个容器被条目填充时，才有效果，当项目的初始长度越长，则flex-shrink效果越明显。
flex-direction属性
flex-direction属性设置灵活项目（条目）的显示方向（水平和垂直）,也就是行显示（row）仍是列显示（column）。且是不是以相反的顺序显示（reverse）。定义flex容器的主轴方向来肯定flex容器中的子元素的排列方向。
属性值：
- row,行显示，水平显示，默认值。
- row-reverse,行显示，且以相反的顺序显示。
- column，列显示，垂直显示。
- column-reverse，列显示，且以相反的顺序显示。
属性值为"row"时：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>弹性盒模型</title>
<style>
#main {
width: 400px;
height: 200px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
flex-direction: row; /* 定义主轴方向为水平方向 */
}
#main div{
width: 50px;
height: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="main">
<div class="div1">I</div>
<div class="div2">II</div>
<div class="div3">III</div>
<div class="div4">IV</div.
</div>
</body>
</html>
效果以下：
属性值为"row-reverse"时：
#main {
width: 400px;
height: 200px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
flex-direction: row-reverse; /* 定义主轴方向为水平方向 */
}
效果以下：
属性值为"column"时：
#main {
width: 400px;
height: 200px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
flex-direction: column; /* 定义主轴的方向为垂直方向 */
}
效果以下：
同理，属性值为"column-reverse"时：
#main {
width: 400px;
height: 200px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
flex-direction: column-reverse; /* 定义主轴方向为垂直方向 */
}
效果以下：
flex-wrap属性
flex-warp属性规定flex容器是单行仍是多行，横轴的方向决定了新行堆叠的方向。
属性值：
- wrap,拆行或者拆列。
- nowrap，不拆行或者不拆列。
- wrap-reverse，拆行或者拆列且以相反顺序显示。
主轴为水平方向，且属性值为"wrap"时：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>弹性盒模型</title>
<style>
#main {
width: 364px;
height: 200px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
flex-direction: row; /* 规定主轴的方向 */
flex-wrap: wrap; /* 规定交叉轴 */
}
#main div{
width: 50px;
height: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="main">
<div class="div1">I</div>
<div class="div2">II</div>
<div class="div3">III</div>
<div class="div4">IV</div>
<div class="div4">V</div>
<div class="div4">VI</div>
<div class="div4">VII</div>
<div class="div4">VIII</div>
</div>
</body>
</html>
效果以下：
主轴为水平方向，且属性值为"wrap-reverse"时：
#main {
width: 364px;
height: 200px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
flex-direction: row; /* 规定主轴的方向 */
flex-wrap: wrap-reverse; /* 规定交叉轴 */
}
效果以下：
主轴为垂直方向，且属性值为"wrap"时：
#main {
width: 364px;
height: 200px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
flex-direction: column; /* 规定主轴的方向 */
flex-wrap: wrap; /* 规定交叉轴 */
}
效果以下：
主轴为垂直方向，且属性值为"wrap-reverse"时：
#main {
width: 364px;
height: 200px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
flex-direction: column; /* 规定主轴的方向 */
flex-wrap: wrap-reverse; /* 规定交叉轴 */
}
效果以下：
align-content属性
align-content属性规定flex容器中的条目在交叉轴上（纵向）的对齐方式。注：需交叉轴方向上的空间未被占用完。注：此属性给条目设置了宽、高。
属性值：
- flex-start，条目位于容器的开头。
- flex-end，条目位于容器的结尾。
- center，条目位于容器的中间部位。
- space-between，条目位于各行之间有空白的容器内。默认值。
- space-around，条目位于各行以前、之间、以后都有空白的容器内。
解释：
之间：两条 条目之间。
以前：条目前面。
以后：条目后面。
flex-start:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>弹性盒模型</title>
<style>
#main {
width: 80px;
height: 310px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
flex-wrap: wrap; /* 条目可拆行或可拆列/换行 */
align-content: flex-start; /* 在flex容器开头 */
}
#main div{
width: 50px;
height: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="main">
<div class="div1">I</div>
<div class="div2">II</div>
<div class="div3">III</div>
<div class="div4">IV</div>
<div class="div4">V</div>
</div>
</body>
</html>
效果以下：
flex-end:
#main {
width: 80px;
height: 310px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
flex-wrap: wrap; /* 条目可拆行或可拆列/换行 */
align-content: flex-end; /* 在flex容器结尾 */
}
效果以下：
space-between:
#main {
width: 80px;
height: 310px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
flex-wrap: wrap; /* 条目可拆行或可拆列/换行 */
align-content: space-betwwen; /* 在条目之间有空白的容器 */
}
效果以下：
align-around:
#main {
width: 80px;
height: 310px;
border: 1px solid red;
display: flex; /* 此项设置元素的弹性盒模型子元素 */
flex-wrap: wrap; /* 条目可拆行或可拆列/换行 */
align-content: space-around; /* 在条目之间、以前、以后有空白的容器 */
}
效果以下：
justify-content属性
justify-around属性规定flex容器中的条目在水平方向上（横向）的对齐方向。注：此属性给条目设置了宽、高。
属性值：与align-content同样。
align-items属性
align-items属性规定flex容器中的条目在侧轴方向的对齐方式。注：此属性未给条目设置宽、高。
属性值：
- flex-start，在容器的开头显示。
- flex-end，在容器的结尾显示。
- center，在容器的中间位置显示。
- baseline，在容器的基准线显示。与flex-start效果类似。
- stretch，填充显示。
flex-start:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>弹性盒模型</title>
<style>
#main {
width: 380px;
height: 300px;
border: 1px solid red;
display: flex; /* 此项设置为弹性盒模型 */
align-items: flex-start; /* 侧轴方向上，在容器的开头显示 */
}
#main .div1 {
background-color: red;
}
#main .div2{
background-color: blue;
}
#main .div3 {
background-color: yellow;
}
#main .div4 {
background-color: orange;
}
#main .div5 {
background-color: green;
}
</style>
</head>
<body>
<div id="main">
<div class="div1">I</div>
<div class="div2">这是一段很长的文字，这是一段很长的文字。</div>
<div class="div3">III</div>
<div class="div4">这是一段很长的文字，这是一段很长的文字。</div>
<div class="div5">V</div>
</div>
</body>
</html>
效果以下：
center:
#main {
width: 380px;
height: 300px;
border: 1px solid red;
display: flex; /* 此项设置为弹性盒模型 */
align-items: center; /* 侧轴方向上，在容器的中间位置显示 */
}
效果以下：
stretch：
#main {
width: 380px;
height: 300px;
border: 1px solid red;
display: flex; /* 此项设置为弹性盒模型 */
align-items: stretch; /* 侧轴方向上，在容器中以填充方式显示 */
}
效果以下：
align-self属性
align-self 属性规定flex容器中条目单独在侧轴的对齐方式。align-self覆盖align-items属性效果。
前提：为全部条目设置align-items属性。
属性值：
- flex-start，条目在容器开头显示。
- flex-end，条目在容器结尾显示。
- stretch，条目在容器中填充显示。
- baseline，条目在容器的基准线显示，与flex-start效果类似。
- center，条目在容器中间位置显示。
以下：给".div2"和".div4"分别设置align-self属性，
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>弹性盒模型</title>
<style>
#main {
width: 380px;
height: 300px;
border: 1px solid red;
display: flex; /* 此项设置为弹性盒模型 */
align-items: center; /* 设置全部子条目在侧轴方向上，容器的中间位置显示 */
}
#main .div1 {
background-color: red;
}
#main .div2{
background-color: blue;
align-self: stretch; /* 侧轴方向上，条目单独在容器的中间位置显示 */
}
#main .div3 {
background-color: yellow;
}
#main .div4 {
background-color: orange;
align-self: center; /* 侧轴方向上，条目单独在容器的中间位置显示 */
}
#main .div5 {
background-color: green;
}
</style>
</head>
<body>
<div id="main">
<div class="div1">I</div>
<div class="div2">这是一段很长的文字，这是一段很长的文字。</div>
<div class="div3">III</div>
<div class="div4">这是一段很长的文字，这是一段很长的文字。</div>
<div class="div5">V</div>
</div>
</body>
</html>
效果以下：
order属性
order属性设置flex容器中条目的出现顺序。书写：order: 1;
默认顺序是：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>弹性盒模型</title>
<style>
#main {
width: 360px;
height: 200px;
border: 1px solid red;
display: flex; /* 此项设置为弹性盒模型 */
}
#main div {
width: 70px;
height: 70px;
}
#main .div1 {
background-color: red;
}
#main .div2{
background-color: blue;
}
#main .div3 {
background-color: yellow;
}
#main .div4 {
background-color: orange;
}
#main .div5 {
background-color: green;
}
</style>
</head>
<body>
<div id="main">
<div class="div1">I</div>
<div class="div2">II</div>
<div class="div3">III</div>
<div class="div4">IV</div>
<div class="div5">V</div>
</div>
</body>
</html>
效果以下：
再者改变顺序：
#main .div1 {
background-color: red;
order: 4; /* 出如今第四位置 */
}
#main .div2{
background-color: blue;
order: 5; /* 出如今第五位置 */
}
#main .div3 {
background-color: yellow;
order: 2; /* 出如今第二位置 */
}
#main .div4 {
background-color: orange;
order: 1; /* 出如今第一位置 */
}
#main .div5 {
background-color: green;
order: 3; /* 出如今第三位置 */
}
效果以下：
注：以上的均属于弹性盒模型中的属性，所以需在"display: flex"条件下使用。