flex布局

flex布局意为弹性布局，任何一个容器都可以指定为flex布局，行内元素也可以使用flex布局display:flex;

• 采用flex布局的元素称为flex容器，所有的子元素自动成为容器成员，成为flex项目（item）。
• 容器默认存在两根轴，水平的主轴，垂直的交叉轴。

• 容器的属性

  • flex-direction

  决定主轴的方向（即项目的排列方向）

  div{
   display:flex;
   flex-direction:row | row-reverse | column |
   column-reverse;
  }
  //row（默认值），主轴为水平方向，水平从左到右
  //row-reverse，主轴为水平方向，水平从右向左
  //column，主轴为垂直方向，从上向下
  //column，主轴为垂直方向，从下往上
  

  • flex-wrap

  如果一条轴线排不下，如何换行

  div{
    flex-wrap:nowrap | wrap | wrap-reverse;
  }
  //nowrap(默认值），不换行，也就是一行挤🙄
  //wrap,换行，第一行在上方
  //wrap-reverse,换行，第一行在下方
  

  • flex-flow

  是flex-direction和flex-wrap的简写形式，默认值为row nowrap.

  div{
    flex-flow:<flex-direction> || <flex-wrap>;
  }
  

  • justify-content

  定义了项目在主轴上的对齐方式（👉有点怪啊

  div{
   justify-content:flex-start | flex-end | center 
   |space-between | space-around;
  }
  //flex-start(默认值），左对齐
  //flex-end,右对齐
  //center，居中
  //space-between，两端对齐，项目之间的间隔相等
  //space-aroud，每个项目两侧的间隔相等，所以项目之间的
  间隔比项目与边框的间隔大一倍。
  

  • align-items

  定义项目在交叉轴上如何对齐。

  div{
   align-items:flex-start | flex-end | center | 
   baseling | stretch;
  }
  //flex-start,交叉轴的起点对齐，也就是上对齐
  //flex-end，下对齐
  //center，居中
  //baseline，项目的第一行文字的基线对齐
  //stretch（默认值），如果项目没有设置高度或者设置为auto，
  将占满整个容器的高度。
  

  • align-content

  定义了多根轴线（也就是有很多行的时候，这些行在垂直方向上如何对齐）如何对齐，如果只有一根轴线，不起作用。属性值和上面的一样。

• 项目的属性

  • order

  定义项目的排列顺序，数值越小，排列越靠前

  • flex-grow

  定义项目的放大比例，默认为0，也就是如果存在剩余空间，也不放大，1的话表示等分剩余空间

  • flex-shrink

  定义项目的缩小比例，默认为1，如果空间不足，那么项目等比例缩小

  • flex-basis

  定义了在分配多余空间之前，项目占据的主轴空间。默认为auto。

  • flex

  是flex-grow,flex-shrink,flex-basis的简写,默认值为
  0 1 auto,后两个属性可选。flex-grow有两个快捷值，auto代表1 1 auto,none代表0 0 auto。

  • align-self

  允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items，默认值为auto，表示继承父元素的align-items属性。如果没有父元素，则等同于stretch.

  .item{
    align-self:auto | flex-start | flex-end | 
    center | baseline | stretch;
  }