flex布局

直接设置display:flex或者display:inline-flex的元素称为flex容器，里面的子元素称为flex子项

作用在flex容器上（控制整体）

• 1、flex-direction(控制子项整体布局方向)
  row: 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。row-reverse : 显示为行。但方向和row属性值是反的。
  column : 显示为列。从上向下排列 column-reverse: 显示为列。但方向和column属性值是反的
• 2、flex-wrap(用来控制子项整体单行显示还是换行显示)
  nowrap : 默认值，表示单行显示，不换行
  wrap : 宽度不足换行显示
  wrap-reverse : 宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面
• 3、flex-flow 属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性
• 4、justify-content属性决定了水平方向子项的对齐和分布方式
  flex-start：默认值。逻辑CSS属性值，与文档流方向相关。默认表现为左对齐。
  flex-end：逻辑CSS属性值，与文档流方向相关。默认表现为右对齐。
  center：表现为居中对齐。
  space-between：表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配
  space-around：around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
  space-evenly：evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
• 5、align-items(lign-items指的就是flex子项们相对于flex容器在垂直方向上的对齐方式)
  stretch:默认值。flex子项拉伸。在演示中我们可以看到白蓝径向渐变背景区域是上下贯穿flex容器的，就是因为flex子项的高度拉伸到容器高度导致。如果flex子项设置了高度，则按照设置的高度值渲染，而非拉伸。
  flex-start：逻辑CSS属性值，与文档流方向相关。默认表现为容器顶部对齐。
  flex-end：逻辑CSS属性值，与文档流方向相关。默认表现为容器底部对齐。
  center：表现为垂直居中对齐。
  baseline：表现为所有flex子项都相对于flex容器的基线（字母x的下边缘）对齐。
• align-content（可以看成和justify-content是相似且对立的属性，justify-content指明水平方向flex子项的对齐和分布方式，而align-content则是指明垂直方向每一行flex元素的对齐和分布方式）

作用在flex子项上（控制个体）

• 1、order (改变某一个flex子项的排序位置所有flex子项的默认order属性值是0)
  如果我们想要某一个flex子项在最前面显示，可以设置比0小的整数，如-1就可以了。
• 2、flex-grow属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。
  flex-grow不支持负值，默认值是0，表示不占用剩余的空白间隙扩展自己的宽度
• 3、flex-shrink（主要处理当flex容器空间不足时候，单个元素的收缩比例）
  flex-shrink不支持负值，默认值是1 如果设置为0，则表示不收缩，保持原始的fit-content宽度。
• 4、flex-basis定义了在分配剩余空间之前元素的默认大小。相当于对浏览器提前告知：浏览器兄，我要占据这么大的空间，提前帮我预留好。
• 5、align-self指控制单独某一个flex子项的垂直对齐方式
  auto（默认值），表示继承自flex容器的align-items属性值

关于flex

• 在Flex布局中，flex子元素的设置float，clear以及vertical-align属性都是没有用的。