Flex 布局

介绍

Flex（Flexible Box），意为弹性布局。通过设置display使一个元素成为 Flex 容器。

.box {
    display: flex;    
}

inline-flex，容器宽度为内部子元素的宽度

.box {
    display: inline-flex;    
}

容器内子元素的float, clear和vertical-align会失效

基本概念

容器（flex container）：设置了display: flex的元素

item（flex item）：容器内的子元素

主轴：容器水平轴

交叉轴：容器的垂直轴

容器属性

设置在容器上的属性

flex-direction: item 主轴排列方向 row（默认）, column

flex-wrap: item 过长时是否换行 wrap, nowrap（默认）

align-content: 设置了wrap、item 换行时，行对齐方式

flex-flow: 上面两个属性的简写

以下两种对齐方式受 flex-direction 影响

justify-content: item 在主轴上的对齐方式 (flex-start, flex-end, center, space-between, space-around)，默认水平方向

align-items: item 在交叉轴上的对齐方式 (flex-start, flex-end, center, baseline, stretch)，默认垂直方向

item 属性

order: 每个 item 排列顺序，越小越靠前

flex-grow: 当主轴空间多余时，item 的放大比例

flex-shrink: 当主轴空间不足时，item 的缩小比例

flex-basis: item 在主轴上初始占据的空间，基于此进行放大、缩小

flex: 上面三个属性的简写

align-self: 单个item 在交叉轴上的对齐方式，可以覆盖容器的 align-items

flex 默认值

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

main size：Flex container / item 的宽度或高度（取决于主轴的方向）

flex-basis：设置 item 的初始 main size。默认值 auto，基于内容大小

flex-grow：放大比例，默认为0。当 container main size 大于所有 item main size 之和，设置多余的空间如何按比例分配给 item。flex-grow 相同时平均分配

flex-shrink：缩小比例，默认为1。当 container main size 小于所有 item main size 之和，设置 item 的缩小比例。flex-shrink 相同时等比缩小

QA：flex-grow and flex-basis

flex: 1

绝对缩放，不考虑 item 内容的大小

flex: 1 等价于1 1 0%

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

flex: auto

相对缩放，基于 item 内容的大小进行缩放。

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

相当于设置了 flex-grow: 1;

flex-basis 0

0px 初始大小总为零

flex-basis: 0px;

0% 父元素具有高度、宽度时，为零。当父元素高度不确定时，回退为auto，基于内容确定初始大小

flex-basis: 0%;

Flex 最后一个元素靠右（last item right）

.last-item {
    margin-left: auto;
}

How to Align Last Flex Item to Right - Ryan Yu - Medium

可以与position: sticky配合使用

.container {
  width: 200px;
  overflow-x: auto;
  display: flex;
  div {
    position: sticky;
    right: 10px;
    margin-left: auto;
  }
}

Flex cross axis stretch

在容器中指定高度/宽度，并设置 align-items 为 stretch。

.container {
  display: 'flex';
  align-items: 'stretch';
  height: '100%';
}

Flex with border radius

Add overflow: hidden;

.container {
  border-radius: 4px;
  overflow: hidden;
}

CL's Blogs