flex布局

我们学习flex布局之前都会有一些疑问什么是flex，flex可以干什么，为什么要使用flex等等?

      我们学习完前端的基础时，会发现，布局的时候还是很麻烦，需要一步步的去调试，但是我们学习完flex布局之后就会觉得布局原来没有想的那么难受？

 建议大家学习flex布局之前去学习pinkCSS教程，可以使我们快速开发出自己的页面。好啦，回归正题......

1，什么是flex
     其实flex布局我们称它为：弹性布局，可以很好的实现我的布局的效果

2.怎么使用flex布局
     首先我们使用flex布局之前我们需要引入flex布局

例如：
              .box{
                display: flex;
                 }

我们学习flex布局之前都需要引入 flex 布局，当然我们可以这样理解，我们写JavaScript代码之前为什么要先引入<script></script>标签，因为我们如果不写这个标签的话，你js代码全部写完了，也运行不了，这就是原理

3.flex布局可以做什么：
    3.1： 可以使我们快速的布局页面开发页面

4.flex布局分为几种？

    最常用的就是六种，阮一峰的网络日志，也和我们完全解释了flex布局的一下特点和方法，里面也有说到flex布局就是六种，当然，是那六种呢？

第一种：

  4.1：flex-direction：读音：flex低来可先
             原理：这个flex可以设置我们盒子主轴的位置
             它有四个属性：
             4.2  row（默认值）：主轴为水平方向，起点在左端。
             4.3  row-reverse：主轴为水平方向，起点在右端。
             4.4  column：主轴为垂直方向，起点在上沿。
             4.5  column-reverse：主轴为垂直方向，起点在下沿。

第二种：

 4.2  flex-wrap：读音：flex哇
            原理：这个可以设置我们需不需要换行来进行操作，我们需要使用换行的时候可以使用到里面的属性
            它有三个属性：
            4.2  nowrap（默认）：不换行
            4.3  wrap：换行，第一行在上方
            4.4  wrap-reverse：换行，第一行在下方

第三种：

 4.3  flex-flow

为什么说我第三种没有解释它是干什么的，这个属性它是基于flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap的一种形式，所以说我们只需要理解一下就好了

第四种：

4.4  justify-content 读音：杰斯立法抗邪
              原理：这个属性可以设置我们主轴上的对齐方式
              4.4  flex-start（默认值）：左对齐
              4.5  flex-end：右对齐
              4.6  center： 居中
              4.7  space-between：两端对齐，项目之间的间隔都相等。
              4.8  space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

第四种是很常用的一种flex方式，基本上开发如何一个页面的时候我们读需要使用它

第五种：

 4.5  align-items  读音：A来安瞪死
               原理： 这个属性可以设置我们如何在交叉主轴上面的对齐方式
               4.5  flex-start：交叉轴的起点对齐。
               4.6  flex-end：交叉轴的终点对齐。
               4.7  center：交叉轴的中点对齐。
               4.8  baseline: 项目的第一行文字的基线对齐。
               4.9  stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

第六种：

  4.6  align-content  读音：A来抗邪
              原理：这个属性可以设置我们的对齐方式，如果项目中只有一根主轴线，该属性不起作用，但是这个属性不是很常用
              4.6 flex-start：与交叉轴的起点对齐。
              4.7 flex-end：与交叉轴的终点对齐。
              4.8 center：与交叉轴的中点对齐。
              4.9 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
              5.0 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
              5.1 stretch（默认值）：轴线占满整个交叉轴。

前面我也简单和大家介绍了什么是flex布局，希望对大家有所帮助，大家也可以到我们资料里面去下载压缩包，里面有作者写过的flex代码和一些学习文件......