flex与folat

先做个自我介绍，本人是刚开始学习前端的的即将毕业的大学生，目前也已经系统性的学习了一个多月了，
先说一下首先遇到的float和flex布局的区别。
首先我们知道在一个新建的html文件上添加的内容可以分为两种，它们在普通文档流上的表现不同。

一种是块级元素，< div >、< p >、 < form >等:

每个块元素都会都会独占一整行空间，在页面上默认从上向下排列。 对块的高度、宽度、margin和padding设置有效，宽度没有设置时，默认为100%。 块级元素中可以包含块级元素和行内元素。

一种是行内元素，< intput >、< a > 、< span >等，

行内元素不会独占一整行空间，可以多个行内元素在一条水平线上排列。
高度和宽度设置是无效的，由内容决定。

这样的话实现文字环绕图片很是困难，float属性恰好能很简单的解决这样的问题。

以下是float布局的一些特性：

  1. 浮动元素只会影响写在它后面的元素，写在前面的元素如果不浮动，它是不会顶上去的，只会在下一行紧跟着。
  2. 如果父元素太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会换行显示。
  3. 浮动的特殊情况，以换行的那个元素为基准，如果同行前面有浮动元素的高度大于换行的那个元素，那么当换行元素换行时会被高的那个元素“卡住”。
  4. 浮动元素的高度不会计算在文档流中，所以子元素浮动会造成父级盒子高度坍塌。

所以再用浮动的时候还需要使用 “清除浮动”，也就是“overflow”；

但是flex布局就不会有这样的烦恼，flex 容器中默认存在两条轴，水平主轴和垂直的侧轴，这是默认的设置。当我们设置flex-direction属性让行的方向改变为列时，会使垂直方向变为主轴，水平方向变为交叉轴。

首先，实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。分别生成一个块状或行内的 flex 容器盒子。简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。
需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

设置flex有以下6种属性：

  • flex-direction: 决定主轴的方向(即项目的排列方向)
  • flex-wrap: 决定容器内项目是否可换行
  • flex-flow: flex-direction 和 flex-wrap 的简写形式
  • justify-content：定义了项目在主轴的对齐方式
  • align-items: 定义了项目在侧轴上的对齐方式
  • align-content: 定义了多行的对齐方式，如果项目只有一行，那么该属性将不起作用