flex布局-理解篇

前言

flex布局在前端开发过程中，使用场景非常多。同时由于它自身强大的布局功能，深受前端开发人员的喜爱。但是就我个人，在使用中总是记不住每个属性的特征，以及使用场景，每次都要查看一下阮一峰大佬的flex布局文章，才能定位要使用哪个属性。由此，写下这篇文章，一方面让自己加深记忆，一方面供大家参考。

flex布局教程-阮一峰

基本概念

一副图了解主轴，交叉轴

属性使用场景

• flex-direction(默认值：row)
  这个好记住direction就是方向的意思 决定主轴的方向

  flex-direction: row | row-reverse | column |     column-reverse;

• flex-wrap(默认值：nowrap)

  flex-wrap: nowrap | wrap | wrap-reverse;

• flex-flow(默认值：row nowrap)
  flex-flow -> flex-direction + flex-wrap（以上两种属性的合并）

• justify-content(默认值：flex-start)
  主轴的对齐方式，首先确定主轴是横向还是纵向

  justify-content: flex-start | flex-end | center |       space-between | space-around;

  space-between:指中间的空隙
  space-around：around有环顾四周的意思，所以指两侧都有

• align-items(默认值：stretch)
  交叉轴的对齐方式，首先确定主轴是横向还是纵向

  align-items: flex-start | flex-end | center |           baseline | stretch;

  baseline：项目的第一行文字的基线对齐
  stretch：如果项目未设置高度或设为auto，将占满整个容器的高度

• align-content(默认值：stretch)
  属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。交叉轴为主

  align-content: flex-start | flex-end | center |         space-between | space-around | stretch;

子元素的属性说明

• order(默认值：0)
  属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow(默认值：0)
  属性定义项目的放大比例 0:即如果存在剩余空间，也不放大
• flex-shrink(默认值：1)
  属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  值越大缩小的越多

• flex-basis
  属性定义了在分配多余空间之前，项目占据的主轴空间（main size）

  flex-basis: <length> | auto; /* default auto */

• flex(默认值：0 1 auto)
  flex属性是flex-grow, flex-shrink 和 flex-basis的简写

  flex: none | [ <'flex-grow'> <'flex-shrink'>? ||        <'flex-basis'> ]

  该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

• align-self

  align-self: auto | flex-start | flex-end | center       | baseline | stretch;

理解（必看）

不知道大家是什么原因记不住，搞不清楚这些属性。我总结出我的原因是：（1）没有搞清主轴和交叉轴的重要性，以前总是死记硬背align-items：center是水平居中，justify-content:center是垂直居中。但这是错误的记忆方法，会发现有时候不生效，就开始瞎猜。
（2）自己的英语不是很好，没有很明白每个属性的意思。
综上所述，做了一下总结，希望对大家有用
（1）默认横向的是主轴，可以通过flex-direction来设置主轴的方向，使用flex布局，首先要搞明白哪个方向是主轴
（2）align-items和justify-content、align-content三个分不清。首先有content代表主轴对齐方式，align代表交叉轴。那么justify-content就是主轴的对齐方式，align-items就是交叉轴的对齐方式，最后align-content又有主轴又有交叉轴那么它就是多根交叉轴线的对齐方式，属性值和主轴的对齐方式一样有间隔而交叉轴的对齐方式中有拉升。
（3）flex-flow是方向和换行的属性总和，代表盒子本省
（4）flex:0 1 auto 是子项的属性总和，grow shrik basis 有些人可能觉得不可思议，反正我刚开始是不可思议的 怎么既可以拉伸又可以压缩呀？其实这两个属性代表了两种场景，如果空间足够大是按怎么样的比例拉升，如果空间不够 又怎么压缩。