CSS学习（十九）-CSS伸缩布局盒
一、理论：
1.flexbox模型基础知识
a.flexbox布局方向不可预知
b.屏幕和浏览器窗口大小发生改变可以灵活调整布局
c.指定伸缩项目可以按主轴或者侧轴按比例分配额外空间
d.指定伸缩项目沿主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间
e.指定如何将垂直元素布局轴的额外空间分布到该元素周围
f.控制元素在页面上的布局方向
g.按照不同于DOM所指定的方式对屏幕上的元素重新排序
2.flexbox模型术语
a.主轴和侧轴 伸缩项目主要沿着这条轴布局，方向取决于justify-content属于 其值若为column为纵向 否则为横向
b.主轴起点、主轴终点：伸缩项目自主轴起点开始，至主轴终点结束
c.侧轴、侧轴方向：与主轴垂直的称作侧轴，侧轴是侧轴方向的延伸
d.侧轴起点、侧轴终点：伸缩项目的侧面内容由侧轴起点起，至侧轴终点止
e.侧轴长度、侧轴长度属性：由哪一个方向对着侧轴决定，是width或hegiht属性
3.伸缩容器、伸缩项目：
a.通过display属性显式地给一个元素设置为flex或inline-flex，即把容器变作伸缩容器
4.伸缩容器的属性：
a.伸缩流方向：flex-direction（默认为行）
b.伸缩行换行：默认为nowrap
c.伸缩方向与换行：定义伸缩容器的主轴与侧轴
d.主轴对齐：设置伸缩容器当前行伸缩项目在主轴方向的对齐方式，指定如何在伸缩项目之间分布伸缩容器的额外空间
e.堆栈伸缩行：控制伸缩项目在布局轴的堆放方式
5.伸缩项目的属性：
a.显示顺序 改变dom文档的先后顺序，通过此属性对项目进行排序组合
b.侧轴对齐
1)align-items 设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式
2)align-self
用来在单独的伸缩项目上覆写默认的对齐方式
3)伸缩性 定义伸缩项目可改变它们的宽度或高度填补可用的空间
6.伸缩行
a.flex-wrap 每个伸缩行至少包含一个伸缩项目
7.伸缩容器设置 display
a.box 设置为块伸缩容器
b.inline-fox 设置为内联级伸缩容器
c.horizontal 伸缩项目在伸缩容器中从左到右在一条水平线上排列显示
d.vertical 伸缩项目在伸缩项目中从上到下在一条垂直线上排列显示
e.inline-axis 伸缩项目沿着内联轴排列显示
f.block-axis 伸缩项目沿着块轴排列显示
8.布局顺序
a.box-direction
1)normal 正常显示
2)reverse 反向显示
9.伸缩换行 box-lines
1)single 伸缩容器的所有伸缩项目一行或一列显示
2)multiple 指定伸缩容器多行或多列显示伸缩项目
10.主轴对齐 box-pack
a.start 伸缩项目向一行的起始位置靠齐
b.end 伸缩项目向一行的结束位置靠齐
c.center 伸缩项目向中间位置靠齐
d.justify 伸缩项目会平均分布在一行里
11.侧轴对齐 box-align
a.start 伸缩项目顶部边缘放置在伸缩容器的顶端,伸缩容器
b.end 与start值相反，所有伸缩项目底部边缘放置在伸缩容器底端，伸缩容器额外空间放置在伸缩项目底部
c.center 伸缩项目紧靠在，垂直居中于伸缩容器。伸缩容器额外的空间平均分配在伸缩项目的顶部和底部
d.baseline 伸缩项目根据它们的基线对齐，伸缩容器额外的空间可前后显示
e.stretch 伸缩项目填充整个伸缩容器
12.伸缩性box-flex
a.box-flex 可以灵活地控制伸缩项目的宽度来填充伸缩容器额外的空间，解决了传统web设计中习惯使用百分比定义伸缩布局的弊端
1.flexbox模型基础知识
a.flexbox布局方向不可预知
b.屏幕和浏览器窗口大小发生改变可以灵活调整布局
c.指定伸缩项目可以按主轴或者侧轴按比例分配额外空间
d.指定伸缩项目沿主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间
e.指定如何将垂直元素布局轴的额外空间分布到该元素周围
f.控制元素在页面上的布局方向
g.按照不同于DOM所指定的方式对屏幕上的元素重新排序
2.flexbox模型术语
a.主轴和侧轴 伸缩项目主要沿着这条轴布局，方向取决于justify-content属于 其值若为column为纵向 否则为横向
b.主轴起点、主轴终点：伸缩项目自主轴起点开始，至主轴终点结束
c.侧轴、侧轴方向：与主轴垂直的称作侧轴，侧轴是侧轴方向的延伸
d.侧轴起点、侧轴终点：伸缩项目的侧面内容由侧轴起点起，至侧轴终点止
e.侧轴长度、侧轴长度属性：由哪一个方向对着侧轴决定，是width或hegiht属性
3.伸缩容器、伸缩项目：
a.通过display属性显式地给一个元素设置为flex或inline-flex，即把容器变作伸缩容器
4.伸缩容器的属性：
a.伸缩流方向：flex-direction（默认为行）
b.伸缩行换行：默认为nowrap
c.伸缩方向与换行：定义伸缩容器的主轴与侧轴
d.主轴对齐：设置伸缩容器当前行伸缩项目在主轴方向的对齐方式，指定如何在伸缩项目之间分布伸缩容器的额外空间
e.堆栈伸缩行：控制伸缩项目在布局轴的堆放方式
5.伸缩项目的属性：
a.显示顺序 改变dom文档的先后顺序，通过此属性对项目进行排序组合
b.侧轴对齐
1)align-items 设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式
2)align-self
用来在单独的伸缩项目上覆写默认的对齐方式
3)伸缩性 定义伸缩项目可改变它们的宽度或高度填补可用的空间
6.伸缩行
a.flex-wrap 每个伸缩行至少包含一个伸缩项目
7.伸缩容器设置 display
a.box 设置为块伸缩容器
b.inline-fox 设置为内联级伸缩容器
c.horizontal 伸缩项目在伸缩容器中从左到右在一条水平线上排列显示
d.vertical 伸缩项目在伸缩项目中从上到下在一条垂直线上排列显示
e.inline-axis 伸缩项目沿着内联轴排列显示
f.block-axis 伸缩项目沿着块轴排列显示
8.布局顺序
a.box-direction
1)normal 正常显示
2)reverse 反向显示
9.伸缩换行 box-lines
1)single 伸缩容器的所有伸缩项目一行或一列显示
2)multiple 指定伸缩容器多行或多列显示伸缩项目
10.主轴对齐 box-pack
a.start 伸缩项目向一行的起始位置靠齐
b.end 伸缩项目向一行的结束位置靠齐
c.center 伸缩项目向中间位置靠齐
d.justify 伸缩项目会平均分布在一行里
11.侧轴对齐 box-align
a.start 伸缩项目顶部边缘放置在伸缩容器的顶端,伸缩容器
b.end 与start值相反，所有伸缩项目底部边缘放置在伸缩容器底端，伸缩容器额外空间放置在伸缩项目底部
c.center 伸缩项目紧靠在，垂直居中于伸缩容器。伸缩容器额外的空间平均分配在伸缩项目的顶部和底部
d.baseline 伸缩项目根据它们的基线对齐，伸缩容器额外的空间可前后显示
e.stretch 伸缩项目填充整个伸缩容器
12.伸缩性box-flex
a.box-flex 可以灵活地控制伸缩项目的宽度来填充伸缩容器额外的空间，解决了传统web设计中习惯使用百分比定义伸缩布局的弊端
二、实践：
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
body>div{
border:1px solid #ccc;
margin:20px;
padding:10px;
}
div>div{
background-color: #123589;
border:1px solid #a6f5f3;
width:100px;
height:100px;
text-align: center;
line-height: 100px;
}
.box{
display: -moz-box;
display: -webkit-box;
}
.inline-box{
display:-moz-inline-box;
}
</style>
</head>
<body>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="inline-box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin:0;
padding: 0;
}
body>div{
border:1px solid #0055cc;
margin: 20px;
padding: 10px;
}
div > div{
border:1px crimson #f36;
}
.box{
display:-moz-box;
display: -webkit-box;
display: box;
}
.box-horizontal{
-moz-box-orient:horizontal;
-webkit-box-orient: horizontal;
box-orient:horizontal;
}
.box-vertical{
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient:vertical;
}
.box-inline-axis{
-moz-box-orient: inline-axis;
-webkit-box-orient: inline-axis;
box-orident:inline-axis;
}
.box-block-axis{
-moz-box-orient: block-axis;
-webkit-box-orient: block-axis;
box-orident:block-axis;
}
</style>
</head>
<body>
<div class="box box-horizontal">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="box box-vertical">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="box box-inline-axis">
<div>1-1</div>
<div>2-1</div>
<div>3-1</div>
<div>4-1</div>
</div>
<div class="box box-block-axis">
<div>1a</div>
<div>2a</div>
<div>3a</div>
<div>4a</div>
</div>
</body>
</html>
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin:0;
padding: 0;
}
body>div{
border:1px solid #0055cc;
margin: 20px;
padding: 10px;
}
div > div{
border:1px crimson #f36;
}
.box{
display:-moz-box;
display: -webkit-box;
display: box;
}
.box-horizontal{
-moz-box-orient:horizontal;
-webkit-box-orient: horizontal;
box-orient:horizontal;
width:250px;
}
.box-vertical{
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient:vertical;
height:250px;
}
.box-direction-reverse{
-moz-box-direction: reverse;
-webkit-box-direction: reverse;
box-direction:reverse;
}
</style>
</head>
<body>
<div class="box box-horizontal">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="box box-vertical box-direction-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="box box-inline-axis">
<div>1-1</div>
<div>2-1</div>
<div>3-1</div>
<div>4-1</div>
</div>
<div class="box box-block-axis box-direction-reverse">
<div>1a</div>
<div>2a</div>
<div>3a</div>
<div>4a</div>
</div>
</body>
</html>
4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
body>div{
border: 1px solid #0066cc;
margin: 10px;
width: 200px;
height: 200px;
}
div > div{
border: 1px crimson #f36;
padding: 10px;
}
.box{
display: -moz-box;
display: -webit-box;
display: box;
-moz-box-pack: start;
-webkit-box-pack: start;
box-pack: start;
-moz-box-align: start;
-webkit-box-align:start;
box-align:start;
box-pack:start;
-moz-box-lines:multiple;
-webkit-box-lines:multiple;
box-lines:multiple;
}
.box-horizontal{
-moz-box-orient: horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal
}
.box-vertical{
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;
}
</style>
</head>
<body>
<div class="box box-horizontal">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="box box-vertical">
<div>A1</div>
<div>B1</div>
<div>C1</div>
<div>D1</div>
<div>E1</div>
<div>F1</div>
<div>G1</div>
<div>H1</div>
<div>11</div>
<div>21</div>
<div>31</div>
</div>
</body>
</html>
5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
.box{
width: 500px;
height: 200px;
margin:20px;
border:1px solid #ccc;
font-size:20px;
font-weight: bold;
color:#fff;
}
.box-item{
background-color: #6bb2ff;
}
.box,.box3 > div{
padding: 10px;
}
.box div:nth-child(1){
background-color: #819321;
line-height: 50px;
}
.box div:nth-child(2){
background-color: #168929;
line-height: 50px;
}
.box div:nth-child(3){
background-color: #197332;
line-height: 50px;
}
.box div:nth-child(4){
background-color: #390289;
}
.box div:nth-child(5){
background-color: #702356;
}
.box{
display: -webkit-box;
display:-moz-box;
display:box;
-webkit-box-align: start;
-moz-box-align: start;
box-align:start;
-webkit-box-pack:start;
-moz-box-pack:start;
box-pack:start;
}
.box-orient-vertical{
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient:vertical;
height: 400px;
}
.box3{
display: -webkit-box;
display:-moz-box;
display:box;
-webkit-box-align: start;
-moz-box-align: start;
box-align:start;
-webkit-box-pack:end;
-moz-box-pack:end;
box-pack:end;
width:100px;
}
.box4{
display: -webkit-box;
display:-moz-box;
display:box;
-webkit-box-align: start;
-moz-box-align: start;
box-align:start;
-webkit-box-pack:center;
-moz-box-pack:center;
box-pack:center;
background-color: #238692;
width:100px;
}
.box5{
display: -webkit-box;
display:-moz-box;
display:box;
-webkit-box-align: start;
-moz-box-align: start;
box-align:start;
-webkit-box-pack:justify;
-moz-box-pack:justify;
box-pack:justify;
background-color: #8f8f8f;
width:100px;
}
</style>
</head>
<body>
<div class="box box-pack-start">
<div class="box-item">box~~1</div>
<div class="box-item">box~~2</div>
<div class="box-item">box~~3</div>
<div class="box-item">box~~4</div>
<div class="box-item">box~~5</div>
</div>
<div class="box box-pack-start box-orient-vertical">
<div class="box-item">~~1</div>
<div class="box-item">~~2</div>
<div class="box-item">~~3</div>
<div class="box-item">~~4</div>
<div class="box-item">~~5</div>
</div>
<div class="box3 box-pack-start box-orient-vertical">
<div class="box-item">~~1</div>
<div class="box-item">~~2</div>
<div class="box-item">~~3</div>
<div class="box-item">~~4</div>
<div class="box-item">~~5</div>
</div>
<div class="box4 box-pack-start box-orient-vertical">
<div class="box-item">~~1</div>
<div class="box-item">~~2</div>
<div class="box-item">~~3</div>
<div class="box-item">~~4</div>
<div class="box-item">~~5</div>
</div>
<div class="box5 box-pack-start box-orient-vertical">
<div class="box-item">~~1</div>
<div class="box-item">~~2</div>
<div class="box-item">~~3</div>
<div class="box-item">~~4</div>
<div class="box-item">~~5</div>
</div>
</body>
</html>
6.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
body{
color:#8f8f8f;
font-size:20px;
}
.box-flex{
width:910px;
background: gray;
margin:100px;
display:-webkit-box;
display:-moz-box;
display:box;
}
.box-flex p:first-child{
background: darkgreen;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.box-flex p:last-child{
background: orange;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
</style>
</head>
<body>
<div class="box-flex">
<p>
我想吃一盘红烧肉～
</p>
<p>
没有红烧肉，排骨我也很想吃～
</p>
</div>
</body>
</html>