flexbox学习笔记

142 阅读1分钟

1. 方向 flex-direction

{
    display: flex;
    flex-direction: row
}
  • row 水平方向
  • column 垂直方向
  • -reverse 反向

2. 自动换行 flex-wrap

flex-wrap: wrap;

3. 主轴对齐 justify-content

justify-content: flex-start;

  • center 居中
  • start 行首 | flex-start 行首 | left 左对齐
  • end 行尾 | flex-end 行尾 | right 右对齐
  • baseline 基线
  • space-between 均匀分布 两侧不留
  • space-around 两边留一点 | space-evenly 两边间隔更大

4. 交叉轴对齐 align-item

{ 
    display: flex; 
    align-items: center; 
}
  • center 居中
  • flex-start 开头
  • flex-end 结尾
  • baseline 基线

5. 多行交叉轴 align-content

  • flex-start 上面
  • flex-end 下面
  • center 居中
  • space-between 上下分布

6. 自身对齐

每个元素单独设置在flex中的位置

.item
{ align-self:center; }
  • stretch/auto 拉伸

7. 元素初始大小 flex-basis

更常用width

  • auto 继承width值
  • ??px 指定值
  • 0 以内容为主

8. 增长因数 flex-grow

.item{flex-grow: 3;} 默认是0

9. 缩小因数 flex-shrink

.item{flex-shrink: 1;} 默认是1
数字越大,缩小的越快

10. flex属性

.item{flex: 2;}

  • 单个数字 = grow+shrink
  • 一个px = basis值 + 增长因数=1
  • 一个整数一个px = grow + basis
  • 两个整数 = grow + shrink
  • 两个整数一个px = 完整版 grow shrink basis

11. 排序 order

数字大的在后面(不怎么用)