Flex 布局

1.5

介绍

整理自 Flex 布局教程:语法篇

Flex(Flexible Box),意为弹性布局。通过设置display使一个元素成为 Flex 容器。

.box {
    display: flex;    
}

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

.box {
    display: inline-flex;    
}

容器内子元素的float, clearvertical-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-itemsstretch

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