CSS3之弹性盒子(Flex Box)
Posted IT大亨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3之弹性盒子(Flex Box)相关的知识，希望对你有一定的参考价值。
css3 弹性盒子(Flex Box)
Flex Box是 css3 的一种新的布局方式。
css3 弹性盒（ Flexible Box&flexbox），简单来说，就是当你不知道别的屏幕大小的情况下，可以灵活的调整元素与页面空间的关系，自动调整大小，计算元素在容器空间的大小。
举一个例子，这样就好说了，在之前的时候，我们是这样做的，用div水平垂直居中。在知道对象高宽的情况下，对居中元素进行绝对定位，在通过margin的移动来实现。
eg：
<head>
<style>
.big{
width: 800px;
height: 600px;
border: 2px solid #000;
position: relative;
}
.box{
width: 300px;
height: 200px;
border: 1px solid #000;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top:-50px;
}
</style>
</head>
<body>
<div class="big">
<div class="box"></div>
</div>
</body>
但是我们如果用了flex之后，实现起来就更方便了，不用绝对定位，也不需要自己去算位置，只要通过对Flexbox定义两个属性，justify-content定义伸缩项目沿着主轴线的对齐方式为center， align-items定义伸缩项目在侧轴（垂直于主轴）的对齐方式为center，如下：
<head>
<style>
.big{
width: 800px;
height: 500px;
background: red;
border: 1px solid #09c;
display: flex;
justify-content:center;
align-items:center;
}
.box{
width: 300px;
height: 150px;
background: yellow;
border: 1px solid #0f0;
}
</style>
</head>
<body>
<div class="big">
<div class="box"></div>
</div>
</body>
弹性盒布局模型
下图：
css3 弹性盒子内容
Flexbox包括弹性容器(Flex container)和弹性子元素(Flex item)两部分，弹性容器通过 display 属性的 flex 或 inline-flex将它们叫做弹性容器。而弹性容器不仅仅可以放一个弹性子元素，也可以放多个弹性子元素。
我们也可以修改排列方式，如果设置 direction 属性为 rtl (right-to-left),它的排列方式也会改变，页面布局也会跟着改变:
eg：
body {
direction: rtl; /* rtl=right-to-left，由右向左排*/
}
弹性容器(Flex container)
flex-direction属性
flex-direction：指定弹性子元素在父容器中的位置。
语法
flex-direction: row
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse
详细的值，如下：
flex-direction: row （横向从左到右排列（左对齐），是默认的方式）
flex-direction: row-reverse（倒着排，横向排列（右对齐，从后往前排，最后 一项排在最前面，相当于ul右浮）
flex-direction: column （纵向排列）
flex-direction: column-reverse （倒着排，纵向排列，从后往前排，最后一项排在最上面）
justify-content 属性
justify-content：内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content 语法：
justify-content: flex-start
justify-content：flex-end
justify-content：center
justify-content：space-between
justify-content：space-around
详细的值，如下：
justify-content: flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
justify-content：flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
justify-content：center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
justify-content：space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
justify-content：space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）
如图，以下效果：
align-items 属性
align-items：设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法
align-items: flex-start
align-items:flex-end
align-items:center
align-items:baseline
align-items:stretch
详细的值，如下:
align-items: flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
align-items:flex-end ：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
align-items:center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
align-items:baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
align-items:stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
flex-wrap 属性
flex-wrap属性用于指定弹性盒子的子元素换行方式。
语法
flex-flow: nowrap
flex-flow:wrap
flex-flow:wrap-reverse
flex-flow:initial
flex-flow:inherit
详细的值，如下:
flex-flow: nowrap 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
flex-flow:wrap 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
flex-flow:wrap-reverse 反转 wrap 排列。
align-content 属性
align-content属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
语法
align-content: flex-start
align-content:flex-end
align-content:center
align-content:space-between
align-content:space-around
align-content:stretch
详细的值，如下:
align-content:stretch 默认。各行将会伸展以占用剩余的空间。
align-content: flex-start 各行向弹性盒容器的起始位置堆叠。
align-content:flex-end 各行向弹性盒容器的结束位置堆叠。
align-content:center各行向弹性盒容器的中间位置堆叠。
align-content:space-between各行在弹性盒容器中平均分布。
align-content:space-around 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
弹性子元素属性
排序
order
语法
order: -1；/*可以是负值,<number>*/
详细的值，如下:
<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值。
align-self
align-self属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
语法
align-self: auto
align-self:flex-start
align-self:flex-end
align-self:center
align-self:baseline
align-self:stretch
详细的值，如下:
align-self: auto 如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
align-self:flex-start弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
align-self:flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
align-self:center弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
align-self:baseline 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
align-self:stretch 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
对齐
设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全集中。
完美的居中
使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中。
flex
flex属性用于指定弹性子元素如何分配空间。
语法
flex：none | [ 'flex-grow' ] ? [ 'flex-shrink' ] || [ 'flex-basis' ]
flex： flex-grow <number> //default:0
flex： flex-shrink <number> //default:1
flex： flex-basis <length> ||auto //default:auto
详细的值，如下:
flex：none 关键字的计算值为: 0 0 auto
flex： flex-grow 定义弹性盒子元素的扩展比率。
flex： flex-shrink 定义弹性盒子元素的收缩比率。
flex： flex-basis 定义弹性盒子元素的默认基准值。
讲了这么多弹性盒子的使用，那来看看flexbox布局的兼容性。
其实在PC端其实很乐观了，基本上主流的浏览器都已经兼容了flex的使用，但是到了苹果的浏览器，就不会显示的那么好了，假如想兼容多个浏览器，可以采用优雅降级的方式来使用。
本文的大多数内容来自w3c，但也有自己原创的内容，更多详情在：https://www.w3cschool.cn/css3/2h6g5xoy.html
以上是关于CSS3之弹性盒子(Flex Box)的主要内容，如果未能解决你的问题，请参考以下文章
CSS3--Flex弹性盒子布局: 声明弹性盒子 & 容器的属性