flex学习

flex布局

弹性布局，当设置为flex布局之后，子元素的float、clear、vertival-align属性将会失效

• 采用flex布局的元素称为容器，其子元素称为项目；
• 容器中存在水平的主轴及垂直的交叉轴

容器属性

• flex-direction：

  row（默认） | row-reverse | column | column-reverse
  

  定义项目在主轴的排列方向即<b>改变主轴和交叉轴的方向</b>

• flex-wrap：

  nowrap（默认） | wrap | wrap-reverse
  

  定义项目在轴线上的换行方式

• flex-flow :

  row nowrap （默认）[flex-direction flex-wrap]
  

  flex-direction和flex-wrap的缩写

• justify-content ：

  flex-start（默认） | flex-end | center | space-between | space-around
  

  定义了项目在主轴上的对齐方式(<b>具体方向根据flex-direction的设置</b>)

  例如 ： 当父元素设置flex-direction：column，主轴方向为垂直方向，即justify-content为垂直方向的对齐

  space-between是项目两侧对齐，项目之间间隔相等；
  space-around是项目两侧间隔想等，项目间隔是项目与边框之间距离的两倍

• align-item ：

  flex-start | flex-end | center | baseline | stretch（默认）
  

  定义了项目在交叉轴上的对齐方式(<b>具体方向根据flex-direction的设置</b>)
  项目未设置高度时，strech会占满整个容器

• align-content

  flex-statr | flex-end | center | strecth（默认） | space-between | space-around
  

  定义多根轴线对对齐方式
  多根轴线前提下，以交叉轴为对齐标准

项目属性

• order

  <integer>  数字越小，排列越靠前
  

  定义项目的排列顺序

• flex-grow

  <number> 默认为0
  

  定义项目的放大比例，flex-grow大于等于1时没有剩余空间，项目按比例放大，flex-grow小于1时则会剩余空间并且与项目为按比例展示

• flex-shrink

  <number> 默认为1
  

  定义项目的缩小比例，在flex容器空间不足的时候进行比例收缩，项目值相同的时候将会等比例收缩

  负值无效

• flex-basis

  <length> 默认为auto
  

  定义在分配剩余空间之前，项目占据主轴的大小

• flex

  [flex-grow flex-shrink flex-basis] 后两项为可选，默认值为0，1，auto
  

  flex-grow flex-shrink flex-basis的缩写

• align-self

  auto | flex-start | flex-end | center | baseline | stretch
  

  定义项目自己在交叉轴上的对齐方式，与容器的align-items属性相同

  auto为继承容器的属性

更多详解：flex详解指路