开发者学堂课程【前端开发CSS基础：CSS 伸缩盒（老版本） 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4263
CSS 伸缩盒（老版本）
内容介绍：
一、伸缩盒概念
二、伸缩盒（旧）属性
三、在代码中的应用
一、伸缩盒概念
1、CSS 引入了一种新的布局模式，Flexbox 布局，即神缩布局盒模型 （Flexible Box )，用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的。
2、Flexbox 布局可以轻松的实现屏慕和浏览器窗口大小发生变化时，保持元素的相对位置和大小不变。它主要采用比例的方式进行布局。
二、伸缩盒（旧）属性
属性 |
描述 |
box-orient |
伸缩盒对象的子元素的排列方式 |
box-pack |
水平居中 |
box align |
垂直居中 |
box-flex |
伸缩盒对象的子元素如何分配其剩余空间，给子元素以比例的方式 |
box-direction |
伸缩盒对象的子元素的排列顺序是否反转 |
三、在代码中的应用
1、创建一个文件给它一些样式，将资源文件引入进来，表示被连接的是一个样式表，代码如下：
< ! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="style.css" rel="Stylesheet" type="text/css"/>
< /head>
<body>
<div class="container">
<div class="one">d1</div>
<div class="two">d2</div>
<div class="three">d3</div>
</div>
< /body>
< /html>
2、给第一个 one 设置高宽 100px ，设置背景颜色，第二个第三个反复，颜色设置不同的颜色，大的容器设置一个样式，给它一个宽，高为 600px ，背景颜色选为深灰。
Container{
width:600px ;
height:600px;
background-color: dimgrey;
}
one{
width:100px;
height:100px;
background-color: aquamar ine;
}
Two{
width:100px;
height:100px;
background-color: pink;
}
Three{
width :100px;
height:100px;
background-color: palegreen;
}
div 是块级元素所以垂直排列。演示效果如下：
3、如果想要进行水平排列，就需要加入一个 div ，给它 display，代码如下：
div{
display:inline-block;
}
4、还有一个方法就是伸缩盒，用 wbkit-box 是因为伸缩盒是 css 新的属性，代码如下：
container{
display: -webkit-box; /*变成盒子*/
}
5、box-pack 属性演示：
需要写 webkit 内核，设置为 center 居中。
webkit- box-pack: center ;
6、box-align 属性演示：
写 webkit 内核，设置为 center 居中。
webkit- box-align: center ;
7、box-flex 属性演示：
为每一个子元素添加比例，把之前的属性都删掉，给它添加比例，让它们1:1:1，代码如下：
Container{
width: 600px ;
height: 600px;
background-color: dimgrey ;
display: -webkit-box; /*变成盒子*/
/-webkit-box-orient: vertical;/
/-webkit-box-pack: center;/
/-webkit- box-align: center;/
}
one{
width: 100px;
height: 100px;
background-color: aquamarine ;
-webkit- box-flex :1；
}
Two{
width: 100px ;
height: 100px;
background-color: pink;
-webkit- box-flex :1；
}
Three{
width:100px;
height:100px;
background-color: palegreen;
-webkit- box-flex :1；
}
可以看到占容器的三分之一，一比一比一。
8、box-direction 属性演示：
输入 normal 就是正常排列，输入 reverse 就是反转排列
