在学习CSS3 弹性盒子(Flex Box)之前，我们先了解：
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
- w3c标准盒模型
以宽度举例（高度是同理的）
boxWidth = 设置的宽( width ) + 边框的两边 ( border * 2 ) + 内边距两边（padding * 2） - IE6混杂模式 （怪异模式）
box-sizing: border-box 触发ie6混杂模型 （默认值是 content-box）
boxWidth = 设置的宽( width )
boxContentWidth （盒子内容区宽） = boxWidth - border * 2 - padding * 2
box-sizing的主要属性有两种：border-box和content-box，默认情况下，浏览器是按content-box即标准模式解析盒模型的，上面第一种情况即是。如果定义了box-sizing:border-box；浏览器就会以怪异模式解析盒子模型了
box-sizing是css3的属性，对于我们css盒子模型的兼容问题提供了很好的帮助，就连IE8也支持了这一属性。
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox）是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:
当然我们可以修改排列方式。
一、flex-direction 属性指定了弹性子元素在父容器中的位置。
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
可以看案例一后面的图1 2 3 4分别是他们属性值的效果 注意里面的数字变化
.big{
width: 600px;
height: 600px;
border: 1px solid red;
/*给父容器设置弹性盒子*/
display: flex;
/*display: inline-flex; 将对象作为内联块级弹性伸缩盒显示*/
flex-direction: column-reverse;
}
案例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 弹性盒子(Flex Box)</title>
<style type="text/css">
.big{
width: 600px;
height: 600px;
border: 1px solid red;
/*给父容器设置弹性盒子*/
display: flex;
/*display: inline-flex; //将对象作为内联块级弹性伸缩盒显示*/
}
.content{
width: 200px;
height: 200px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="big">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
</body>
</html>
效果图：
二、flex-wrap 属性用于指定弹性盒子的子元素换行方式。
nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。
.big{
width: 600px;
height: 600px;
border: 1px solid red;
/*给父容器设置弹性盒子*/
display: flex;
flex-wrap: nowrap;
}
.big{
width: 600px;
height: 600px;
border: 1px solid red;
/*给父容器设置弹性盒子*/
display: flex;
flex-wrap: nowrap;/*默认值*/
}
三、justify-content 属性内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
各个值解析:
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
.big{
width: 800px;
height: 600px;
border: 1px solid red;
/*给父容器设置弹性盒子*/
display: flex;
justify-content: flex-start;
}
四、align-content 属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐
stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
.big{
width: 500px;
height: 600px;
border: 1px solid red;
/给父容器设置弹性盒子/
display: flex;
align-content:center;
flex-wrap: wrap;
}
最后补充一下resize的方法:规定可以由用户调整 div 元素的大小 有四个属性值
none 用户无法调整元素的尺寸。
both 用户可调整元素的高度和宽度。
horizontal 用户可调整元素的宽度。
vertical 用户可调整元素的高度。
如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
下面的案例：用户拖动第一张图右下角出可调整div元素的大小
.two{
width: 600px;
height: 600px;
border: 1px solid red;
overflow: auto;
resize: horizontal;
/*会产生重构和重排，消耗较大*/
}
<div class="two">
12月26日下午，在国防部例行记者会上，国防部新闻局局长、国防部新闻发言人吴谦大校主动发布一条关于中国—坦桑尼亚两军联训的消息。
根据中国、坦桑尼亚两军达成的共识，本月下旬至2020年1月中旬，中坦“真诚伙伴－2019”联合训练在坦桑尼亚达累斯萨拉姆举行。此次训练旨在深化中坦两军务实合作，推动构建平等互信、合作共赢的新型安全伙伴关系。
12月26日下午，在国防部例行记者会上，国防部新闻局局长、国防部新闻发言人吴谦大校主动发布一条关于中国—坦桑尼亚两军联训的消息。
根据中国、坦桑尼亚两军达成的共识，本月下旬至2020年1月中旬，中坦“真诚伙伴－2019”联合训练在坦桑尼亚达累斯萨拉姆举行。此次训练旨在深化中坦两军务实合作，推动构建平等互信、合作共赢的新型安全伙伴关系。
12月26日下午，在国防部例行记者会上，国防部新闻局局长、国防部新闻发言人吴谦大校主动发布一条关于中国—坦桑尼亚两军联训的消息。
根据中国、坦桑尼亚两军达成的共识，
</div>
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
