1.介绍

• 块级元素侧重于垂直方向,行内元素侧重于水平方向,flex布局是与方向无关的
• flex布局可以实现空间自动分配,自动对齐的布局方式

• flex布局适用于线性布局,更强大的布局为grid布局(网格布局)

  
  flex.png

2.容器(flex container)的六个属性

• flex-direction 主轴的排列方向

  • 常用取值: row(行), row-reverse(行反向),column(列), column-reverse(列反向)

• flex-wrap 换行(默认不换行)

  • 常用取值: nowrap(不换行), wrap(换行)

• flex-flow flex-direction和flex-wrap的简写

  • 常用取值: flex-flow: column nowrap;(垂直排列,不换行)

• justify-content 主轴方向的对齐方式

  • 常用取值:

  • space-between(两端对齐)

    
    space-between.png

  • space-around(间距环绕在item周围)

    
    space-around.png

  • flex-start(起点对齐), flex-end(终点对齐)

    
    flex-end.png

  • center(居中对齐)

默认是justity-content: flex-start

• align-items 侧轴方向的对齐方式

  • 常用取值: stretch(弹性,伸展,也就是所有item都会和最高的item一样高), flex-start(起点对齐), flex-end(终点对齐), center(居中), baseline(文字基线对齐)

• align-content 多行/多列的对齐方式(不常用)

  • 常用取值: space-between(行与行两端对齐), flex-start(侧轴方向向起点对齐) , stretch(item和间距平均分配)

3.(flex item)的6个属性

1. flex-grow(item空间增长比例)

   • 取值: flex-grow: 1(空间占一份比例), flex-grow: 2(空间占两份比例),

2. flex-shrink(item空间收缩比例,当容器尺寸不够时)

3. flex-basis(默认大小,不常用)

4. flex(flex-grow和flex-shrink,flex-basis的简写)

   • 例子: flex: 1 2 100px;(空间够时占一份比例,空间不够时占两份, 默认每个item大小为100px)

5. order(item的顺序,代替双飞翼布局)

order: 0(默认,数字小的排名靠前)

6.align-self(自身的对齐方式)