关于前端:flex布局理解篇

前言

flex 布局在前端开发过程中，应用场景十分多。同时因为它本身弱小的布局性能，深受前端开发人员的青睐。然而就我集体，在应用中总是记不住每个属性的特色，以及应用场景，每次都要查看一下阮一峰大佬的 flex 布局文章，能力定位要应用哪个属性。由此，写下这篇文章，一方面让本人加深记忆，一方面供大家参考。[flex 布局教程 - 阮一峰](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

基本概念

一副图理解主轴，穿插轴

属性应用场景

• 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;