flex布局1.什么是flex？ Flex是FlexibleBox的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活

1.什么是flex？

Flex是FlexibleBox的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性。设置为display元素的元素，称为“容器”。这个“容器”的所有子元素称为“项目”。

2.如何设置flex布局？

将元素的display属性设置为flex，该元素就会被设置为弹性布局。

<div class="content">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

//css
.content {
  display: flex;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #123456;
  margin-right: 30px;
  text-align: center;
  line-height: 100px;
}

注意：设置为flex布局后，子元素的float，clear和vertical-align（行内元素的对齐属性）属性将失效。

3.flex对于容器的属性（也就是上方代码中的content元素，给他设置的属性）

1.flex-direction属性：决定主轴的方向（项目排列的方向）

flex-direction:row(默认) 主轴方向由左往右
flex-direction:column 主轴方向由上至下
flex-direction:row-reverse 主轴方向由右向左
flex-direction:column-reverse 主轴方向从下至上

2.flex-wrap属性:如果一条轴线上无法放下所有项目，如何换行

flex-wrap:nowrap (默认)不换行，即使超出也会挤在一行
flex-wrap:wrap 换行
flex-wrap:wrap-reverse 换行但是反向排列

3.justify-content: 定义项目在主轴上的对齐方式（默认水平方向）

justify-content: flex-start 主轴起点对齐（默认左对齐，前提是主轴方向是水平）
justify-content: flex-end 主轴终点对齐（默认右对齐，前提是主轴方向是水平）
justify-content: center 中间对齐
justify-content: space-between 项目与边框无边距（有的话看看是不是自己给项目设置了margin或者容器设置了padding），项目与项目之间平分剩余的空间。
justify-content: space-around 项目与边框间距:项目与项目间距 = 1:2
justify-content: space-evenly 项目与边框间距:项目与项目间距 = 1:1

4.align-item:定义项目在交叉轴的对齐方式（与主轴垂直的轴，默认是垂直方向）

align-item:flex-start 交叉轴起点对齐
align-item:flex-end 交叉轴终点对齐
align-item: center 中间对齐
align-item: baseline 第一行文本的基准线进行对齐
align-item: stretch 项目（子元素）若没设置高度，则自动填满整个父元素(比如box5,没设置项目的高度，但是父元素右高度)

4.flex项目设置的属性

order:项目的排序。数字越小，越靠前，默认为0
flex-grow:项目的放大比例，默认0，即即使有剩余空间，项目也不会放大。
flex-shrink:项目的缩小比例，默认1，即若空间不足，项目将缩小。
flex-basis:在分配多余空间之前，项目占据主轴的空间。浏览器根据这个属性，计算主轴是否有多余的空间。默认为：auto，即项目的本来大小
flex:是flex-grow,flex-shrink,flex-basis的简写。默认0 1 auto
align-self:允许单个项目与其他项目有不同的对齐方式，覆盖align-item属性。默认auto继承父元素（容器）的align-item属性。若没有父元素，等同于stretch

5.flex:1 代表的含义

flex:是flex-grow,flex-shrink,flex-basis的简写 flex1表示： flex: 1 1 0% 也就是有剩余空间会等比放大剩余空间不足时会等比缩小

6.flex实现垂直居中

1.flex实现元素垂直居中，需要考虑兼容性问题，但是优点是可以适用于盒子宽高不知

<div class="container">
    <div>让我垂直居中<div/>
<div/>

.container{
  display:flex;
  justify-content: center;
  align-items: center;
}

其他的垂直居中方法： 2.使用绝对定位，需要盒子宽高已知

<div class="container">
    <div class="item"><div/>
<div/>

.container{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
}
.item{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    /* 下面这个减号两边要隔开一个空格 */
    top: calc(50% - 50px);
    left: calc(50% - 50px);
  }

3.同样也可以使用margin

<div class="container">
    <div class="item"><div/>
<div/>

.container{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
}
.item{
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:50%;
  left:50%;
  margin-top: -50px;
  margin-left: -50px;
}

4.利用绝对定位，设置四个方向的值都为0，并将margin设置为auto。由于宽高固定，因此实现对应方向实现平分，就可以实现水平和垂直方向的居中（适用于盒子有宽高的情况）

对于绝对定位元素来说：

定位参照对象的宽度= left + right + margin-left + margin-right + 绝对定位元素实际占用的宽度

定位参照对象的高度 = top + bottom + margin-top + margin-bottom +绝对定位元素实际占用的高度

<div class="container">
    <div class="item"><div/>
<div/>

.container{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
}
.item{
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin: auto;
}

7.flex实现自适应，左边固定宽高，右边自适应

<div class="outer">
  <div class="left"></div>
  <div class="right"></div>
</div>

.outer{
  display: flex;
  height: 100px;
}
.left{
  width: 50px;
  background:tomato;
}
.right{
  flex: 1;
  background: gold;
}