前言
其实弹性盒子这个知识，与其我来讲，倒不如让你们自己在这个网址看↓↓↓
因为我也是在这里看的。
1、什么是flex
Flex是Flexible Box的缩写，意为“弹性布局”，也被开发者们称为“弹性盒子”，这是一种为盒装布局提供最大灵活性的布局方式，任何容器（比如div、p等）都可以指定为flex布局方式。
2、flex的概念
所谓的flex布局，我理解为就是用盒子装液体。
我们通常的布局方式可以理解为往盒子里装固体，固体所占空间就是固体本身的大小，如果固体的大小超过了盒子的大小，那么他也将完全的显示出固体大小。
而弹性盒子可以将盒子内部的组件全部变为“液体”，当你为盒子里添加新组件的时候，他们会平均分配掉盒子内所有的空间（如果你没有设置他们的配比），而如果你加入的组件太多，导致了超出了盒子，那么他就会像液体一样溢出来。
将以下代码运行一遍你能更好的理解我的意思
这是弹性布局↓↓↓
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
display: flex;
width: 200px;
}
div{
width: 1300px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
这是通常布局↓↓↓
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
display: block;
width: 200px;
}
div{
width: 1300px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3、flex的使用方式
3.1基本使用
前面说过，在任意容器中都可以使用flex布局
/*对于块级元素*/
body{
display: flex;
}
/*对于行内元素*/
span{
display: inline-flex;
}
/*webkit内核的浏览器*/
body{
display: -webkit-flex;
}
flex布局设置在父级元素身上，但它作用于子元素，也就是说如果你的父元素是空的，那么你将看不到任何变化。这和我们平时使用的属性有很大的不同，这也是许多刚刚接触弹性布局的人常犯的错误（别问我怎么知道的，说多都是泪）
3.2、常用属性
在flex布局中，我们常用的属性有六个，分别是
1、flex-direction
2、flex-wrap
3、flex-flow
4、justify-content
5、align-items
6、align-content
下面我来一一介绍这些属性。
3.2.1、flex-direction
flex-direction属性决定主轴的方向，即决定了组件的排列方式，是从左往右排，还是从右往左排，又或是从上往下排，也可以从下往上排。
body {
flex-direction: row | row-reverse | column | column-reverse;
}
上面四个值分别是从左往右，从右往左，从上到下，从下到上
3.2.2、flex-wrap
flex-wrap属性决定了组件的换行方式，不过在一般情况下，默认属性时不换行
body{
flex-wrap: nowrap | wrap | wrap-reverse;
}
上面三个值分别是不换行，向下换行，向上换行
3.2.3、flex-flow
flex-flow属性其实就是上面两个属性的统称，（类似于我们将所有的背景属性统写为background一样），默认属性是row nowrap
3.2.4、justify-content
justify-content属性决定了主轴的对齐方式，比如你的主轴是row（即从左往右排列）那么这个属性就相当于text-align属性，而如果你的主轴是column（即从上到下排列），这个属性就相当于vertical-align。
body{
justify-content: flex-start | flex-end | center | space-between | space-around;
}
上面五个值分别是靠主轴对齐，远离主轴方向对齐，居中，两端对齐（不包含边距），等间距对齐（包含边距）
3.2.5、align-items
align-items属性决定了主轴交叉轴的对齐方式，也就是和justify-content旋转90度的对齐方式。
body{
align-items: flex-start | flex-end | center | baseline | stretch;
}
上面五个值分别是靠交叉轴对齐，远离交叉轴对齐，居中，基线对齐（基线的概念与vertical-align的基线相同），占满交叉轴方向
3.2.6、align-content
align-content属性决定了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
body {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
上面六个值分别是靠交叉轴对齐，远离交叉轴对齐，居中，与交叉轴两端对齐，与交叉轴等间距对齐，占满整个交叉轴
4、flex的子元素属性
除了可以在父元素上设置flex的属性外，其实在flex盒子的子元素上也有可以设置的属性
4.1、order
order属性可以用来改变子元素在主轴方向的排列顺序，数值越小，排列越靠前，但是他们在html的结构中不会变化
将下面代码运行一遍，你会有更直观的感受。（按F12键查看结构）
<style type="text/css">
body{
display: flex;
}
div:nth-of-type(1){
background: red;
width: 100px;
height: 100px;
order: 2;
}
div:nth-of-type(2){
background: blue;
width: 100px;
height: 100px;
order: 3;
}
div:nth-of-type(3){
background: green;
width: 100px;
height: 100px;
order: 1;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
4.2、flex-grow
flex-grow属性定义了子元素的放大比例，也就是子元素在父元素中的占比，默认值为0，即如果存在剩余空间也不放大。
运行下面代码帮助理解
<style type="text/css">
body{
display: flex;
width: 1000px;
}
div:nth-of-type(1){
background: red;
width: 100px;
height: 100px;
flex-grow: 2;
}
div:nth-of-type(2){
background: blue;
width: 100px;
height: 100px;
flex-grow: 1;
}
div:nth-of-type(3){
background: green;
width: 100px;
height: 100px;
flex-grow: 1;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
4.3、flex-shrink
flex-shrink属性和flex-grow属性相反，他定义了子元素的缩小比例，默认值为1，即如果空间不足，所有子元素等比例缩小
运行下面代码有助于理解
<style type="text/css">
body{
display: flex;
width: 100px;
}
div:nth-of-type(1){
background: red;
width: 100px;
height: 100px;
flex-shrink: 1;
}
div:nth-of-type(2){
background: blue;
width: 100px;
height: 100px;
flex-shrink: 1;
}
div:nth-of-type(3){
background: green;
width: 100px;
height: 100px;
flex-shrink: 1;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
4.4、flex-basis
flex-basis属性定义了子元素在主轴上的长度，默认值为auto，你可以理解为他就是定义了width或height，当你设定了flex-basis属性后你原本的width或height属性就会失效。
4.5、flex
flex属性就是grow、shrink、basis的缩写，默认值为0 1 auto，后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
4.6 align-self
align-self属性定义了子元素与其他元素不对齐的方式，默认值是auto，即继承了父元素align-items属性，如果没有父元素，则等同于stretch。
运行下面代码帮助理解
<style type="text/css">
body{
display: flex;
width: 1000px;
height: 500px;
}
div:nth-of-type(1){
background: red;
width: 100px;
height: 100px;
align-self: flex-end;
}
div:nth-of-type(2){
background: blue;
width: 100px;
height: 100px;
}
div:nth-of-type(3){
background: green;
width: 100px;
height: 100px;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
5、结语
flex布局方式正在逐渐成为新流行的布局方式，我也是最近才接触到的，如果我上面说的有什么不对，欢迎指出。
网友评论