什么是弹性盒模型布局
简介:
弹性盒模型布局是CSS3中一种新的布局方式,它的优势在于:开发只需声明布局应该具有的行为,而不需要给出具体的实现方式,它的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。
即使容器中的条目的尺寸是未知或是动态的,弹性盒模型也能正常地工作,容器会根据布局的需要,调整条目的尺寸和顺序来填充空间,当容器的屏幕尺寸变大或变小时,容器中条目的尺寸或顺序也会动态地调整:当容器尺寸变大时,条目会被拉大来更好地填充空间,相对地,当容器的尺寸变小时,条目的尺寸和顺序也会相应的变小,防止条目溢出容器。
与传统布局不同的是,弹性盒模型布局与方向是无关的,传统布局中,block布局是把块在垂直方向从上到下排列的,在inline布局中,是把元素在水平方向上排列的,而在弹性盒模型中,方向是由开发人员控制。
相关概念:
如上图所示:边框表示容器,"1"和"2"表示条目,弹性盒模型中,有两条相互垂直的轴,水平方向上(X)的表示主轴,垂直方向上(Y)的表示交叉轴,当然,主轴也可以在垂直方向上,交叉轴可以在水平方向上。
在布局中,CSS属性首先要定义主轴的方向(水平或垂直),交叉轴也相应地确定下来,主轴表示容器中每一行上条目的排列顺序,交叉轴表示条目本身的排列顺序。
确定了主轴和交叉轴,还要确定各自的排列顺序,水平方向上,可以从左到右或从右到左,在垂直方向上,可以从上到下或从下到上。在主轴上,条目的起始和结束位置,分别为主轴的起始和主轴的结束,在交叉轴上,条目的起始和结束位置,分别为交叉轴的起始和交叉轴的结束。
弹性盒模型的两个尺寸:主轴尺寸和交叉轴尺寸。如果主轴在水平方向上,主轴尺寸和交叉轴尺寸分别为元素的宽度和长度,如果主轴在垂直方向上,尺寸相反。若主轴在水平上,与主轴和交叉尺寸对应的属性分别CSS属性中的widht和height。
弹性盒模型相关的属性
flex属性
flex属性规定弹性盒模型对象的子元素如何分配空间,注:若元素不是弹性盒模型的子元素,则flex不起作用。所以需定义元素为弹性盒模型的子元素,即:display: flex;
flex-grow属性
flex-grow属性设置弹性盒的扩展比例(扩大比例)。
属性值:
- 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,条目位于各行之前、之间、之后都有空白的容器内。
<!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,条目在容器中间位置显示。
<!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属性
<!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"条件下使用。