flex弹性布局-用法

flex布局

1. 简介：传统的做法，我们要准确的定位一个元素，需要知道元素具体的宽度、高度、padding、margin、配合position、display、float属性，这样是实现了元素的定位，但是这样未免太过麻烦，而且也有一些弊端，比如：如何实现垂直剧中？flex布局就解决了这样的问题，也简易了元素的布局。
2. flex布局介绍：
   - 任何容器都可以指定为flex布局。
   - flex布局的内部子元素的float、clear、vertical-align属性是失效的。
   - 使用flex布局的元素成为flex容器，内部子元素成为flex子项目。
   - 盒模型的定位轴线:主轴与交叉轴，默认row为主轴，column为交叉轴
   
3. flex用法—容器的属性：
   以下六个属性设置在容器上：
   -flex-direction
   -flex-wrap
   -flex-flow
   -justify-content
   -align-content
   -align-items

• flex-direction: 定义主轴的方向，默认为row（水平轴）
  flex-direction: row | row-reverse | column | column-reverse
row: 主轴为水平方向，起点在左边
  row-reverse:主轴为水平方向， 起点在右边
  column: 主轴为垂直方向，起点在上边
  column-reverse: 主轴为垂直方向， 起点在下边
  

• flex-wrap: 决定主轴上的换行方式
  flex-wrap: nowrap | wrap | wrap-reverse
nowrap： 不换行（默认）
  wrap: 换行，往下
  wrap-reverse: 换行, 往上
  

• flex-flow: flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
  flex-flow: <flex-direction> || <flex-wrap>

• justify-content: 决定主轴上的对齐方式
  justify-content: flex-start | flex-end | center | space-between | space-around
flex-start：左对齐
  flex-end：右对齐
  center： 居中
  space-between：两端对齐，项目之间的间隔都相等。
  space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  

• align-content: 决定交叉轴上整体的对齐方式，整体有效，单轴线上无效
  align-content: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉轴的起点对齐。
  flex-end：交叉轴的终点对齐。
  center：交叉轴的中点对齐。
  baseline: 项目的第一行文字的基线对齐。
  stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

• align-items: 决定交叉轴上项目的对齐方式，整体无效，单轴线上有效
  align-items: flex-start | flex-end | center | baseline | stretch;
  
  align-content：center 整体居中，单轴线无效果
  只有设置了align-items的元素在单轴线才有效果

4. flex的用法-子项目上的属性：
   order
   flex-grow
   flex-shrink
   flex-basis
   flex
   align-self

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
  order: <integer>; /* default 0 */
• flex-grow: 定义项目在主轴上的放大比例。默认为0，
  flex-grow: <integer>; /* default 0 */
  a. 默认为0，即使有剩余空间，也不放大；
  b. flex-grow： 1；子项目在主轴上平均划分;
  c. 子项目默认为0，只有其中一个设了flex-grow：x，不管x是多少，这个子项目将撑开剩余空间；
  d. 子项目均设了flex-grow，将按等比划分；
  
• flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  flex-shrink: <number>; /* default 1 */
  
• flex-basis: 定义了项目在分配多余空间前，项目占据的主轴空间
  flex-basis: <length>
  相当于定义了项目的width或height，这个值不随项目的放大或者缩小而改变，是固定的
• flex: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
• align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto
  align-self: auto | flex-start | flex-end | center | baseline | stretch;