跳到主要内容

弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。

一、 开启 flexible​

使用 flex 值设定父元素为弹性的盒子

.container {
  display: flex;
}

二、flex 模型​

当元素表现为 flex 框时，它们沿两个轴布局：

  • 主轴：沿着 flex 元素放置方向延伸的轴（比如页面中横向的行、纵向的列）。该轴的开始和结束被称为 main start、main end
  • 交叉轴：垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start、cross end
  • 设置了 display: flex 的父元素被称为 flex 容器（flex container）
  • 在 flex 容器中表现为弹性盒子的元素被称为 flex 项（flex item）

1.主轴方向​

flexbox 的主轴方向由 flex-direction 属性控制。默认值是 row，使得默认方向是拍成一排。也可以设置成纵向排列

/* 默认值 */
flex-direction: row;
/* 纵向排布 */
flex-direction: column;
/* 横向反向排布 */
flex-direction: row-reverse;
/* 纵向反向排布 */
flex-direction: column-reverse;

2. 换行​

当布局使用定宽或是定高时，可能会出现处于容器中的弹性盒子子元素溢出。所有需要使用 flex-wrap 指定当前是否需要换行模式。

/* 默认不换行 */
flex-wrap: nowrap;
/* 启用换行 */
flex-warp: warp;
/* 启用换行，但是行反向排列 */
flex-warp: wrap-reverse;

3. flex-flow 缩写​

可以将 flex-direction、flex-wrap 缩写为 flew-flow

把

flex-direction: row;
flex-wrap: warp;

替换为

flex-flow: row warp;

三、 flex 项的动态尺寸（作用于 flex 项）​

flex 属性可以指定三个不同值的缩写属性：

  • 第一个就是无范围比例。可以单独写 flex-grow 属性
  • 第二个就是无单位比例-- flex shrink -- 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，收缩的大小依据是 flex-shrink 的值
  • 第三个值为 -- flex-basis -- 指定了 flex 元素在主轴方向的初始大小。
/* 设置 flex 项是别的项的 2 倍，并放大 10 倍 */
flex: 2 0.1 50px;
/* 上面设置相当于 */
flex-grow: 2;
flex-shrink: 0.1;
flex-basis: 50px;

1. flex-grow flex 项主尺寸的 flex 增长系数​

flex-grow 描述了单个项在 flex 容器中分配剩余空间的相对比例。主尺寸是项的宽度或事高度，取决于 flex-direction 的值。

被设定了额外的 flex-grow 的项，其尺寸是其它未设置项的该设置值的倍数（所以不能为负数）。

2. flex-shrink flex 元素的收缩规则​

当 flex 元素仅在默认宽度之和大于容器的时候才会发生。

3. flex-basis flex 元素在主轴方向上的初始大小​

如果不使用 box-sizing 改变盒模型的化，那么这个属性就决定了 flex 元素的内容盒（content-box）的大小。

提示

当一个元素同时被设置了 flex-basis（除值为 auto 外）和 width （或者在 flex-direction: column 情况下设置了 height），flex-basis 具有更高的优先级。

四、水平和垂直对齐​

1. 交叉轴的对齐​

使用 align-items （作用于 flex 容器）控制 flex 项在交叉轴上的位置。

  • 默认值为 stretch ，会使所有的 flex 项沿着交叉轴方向拉伸以填充父容器
  • 如果父容器在交叉轴上没有固定宽度（即高度），则所有的 flex 项将变得与最长的 flex 项一样长（即高度保持一致）
  • 也可以在 flex 项单独设置 align-self 属性覆盖 align-items 的行为 
    .flex-item {
      align-self: flex-end;
    }

2. flex 项在主轴上的位置​

使用 justify-content （作用于 flex 容器）控制 flex 在主轴上的位置

  • 默认值为 flex-start，这会使所有的 flex 项都位于主轴的开始处
  • 使用 flex-end 让 flex 项处于结尾处
  • content 在 justify-content 中可用，可以让 flex 项在主轴居中
  • space-around 会让所有的 flex 项沿主轴均匀的分布，在任意一端都会留一点空间
  • space-between 会让元素均匀分布。但两端不留空间

五、 flex 项排序​

弹性盒子也可以改变 flex 项的布局位置，而不影响到源顺序（dom 树里的顺序）。这也是传统布局很难做到的一点。

.first-flex-item {
  order: 1;
}
  • 所有的 flex 项默认 order 值为 0
  • order 值越大的 flex 项比 order 值小的在显示顺序中更靠后
  • 相同的 order 值的 flex 项按源顺序显示