bingoogolapple.github.io Flex 弹性盒子模型

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html https://css-tricks.com/snippets/css/a-guide-to-flexbox https://flexboxfroggy.com/#zh-cn

justify-xxx 主轴
align-xxx 交叉轴

Jul 19 '17 17:07 bingoogolapple

Flex 容器

display: flex;  // 设置布局为 flex 布局
flex-direction: row;  // 设置主轴方向
flex-wrap: nowrap;  // 设置一行显示不完时是否通过多行显示来显示所有 item
flex-flow: row nowrap; // 可以使用该属性分别指定 flex-direction flex-wrap 的值
justify-content: space-around;  // 设置主轴方向的对其方式，默认值为 flex-start, space-between 在 item 间添加间隔， space-around 在 item 两边添加间隔
align-items: center;  // 定义了 flex 容器中 flex 成员项在交叉轴方向上如何排列以处理空白部分（每一根主轴线在自身交叉轴线上的位置），默认值为 stretch 表示主轴垂直方向上拉伸的意思
align-content: center;  // 设置多根主轴线在交叉轴方向的对齐方式（所有主轴线整体在交叉轴线上的位置）。如果项目只有一根交叉轴线，该属性不起作用，除非设置了 flex-wrap 为 wrap

设置容器为 flex 布局

display: flex;

flex-direction

定义了 flex 容器中 flex 成员项的排列方向

column（默认值）：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿
row：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端

justify-content

定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分

flex-start（默认值）：所有的 flex 成员项都排列在容器的前部
flex-end：则意味着成员项排列在容器的后部
center：即中间对齐，成员项排列在容器中间、两边留白
space-between：表示两端对齐，空白均匀地填充到 flex 成员项之间
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

align-items

定义了 flex 容器中 flex 成员项在交叉轴方向上如何排列以处理空白部分（每一根主轴线在自身交叉轴线上的位置）

stretch（默认值）：如果项目未设置交叉轴大小或设为auto，将占满整个容器的交叉轴大小
flex-start：则是上对齐，所有的成员项排列在容器顶部
flex-end：是下对齐，所有的成员项排列在容器底部
center：是中间对齐，所有成员项都垂直地居中显示
baseline：子项交叉轴大小未明确指定时，子项的第一行文字的基线对齐

align-content

设置多根主轴线在交叉轴方向的对齐方式（所有主轴线整体在交叉轴线上的位置）。如果项目只有一根交叉轴线，该属性不起作用，除非设置了 flex-wrap 为 wrap

flex-start（默认值）：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch：轴线占满整个交叉轴

flex-wrap

设置一行显示不完时是否通过多行显示来显示所有 item

nowrap（默认值）：不换行
wrap：换行，第一行交叉轴的头部
wrap-reverse：换行，第一行交叉轴的尾部

flex-flow

可以使用该属性分别指定 flex-direction flex-wrap 的值

flex-flow: row nowrap;

row-gap、column-gap、gap

row-gap 设置行间距
column-gap 设置列间距
gap 上面两个的简写，第一个值设置行间距，第二个值设置列间距

Dec 29 '19 08:12 bingoogolapple

Flex 成员项

flex-grow: 1;  // item 占用主轴方向剩余空间的比例（单个元素时：1 占满所有剩余空间，0.5 占满剩余空间的一半），默认值为0。如果主轴方向为竖直方向，在 移动设备和 Safari 上不会生效
flex-shrink: 2;  // 设置 item 在主轴方向缩小的宽度，默认值为 1，越大表示越容易缩小，0 表示不会缩小
flex-basis: 100px;  // 设置 item 的初始宽度，默认为 auto
flex: 0 1 auto;  // 可以使用该属性分别指定 flex-grow flex-shrink flex-basis 的值
align-self: center;  // 单独设置 item 在主轴垂直方向的对其方式。stretch 表示在主轴垂直方向上拉伸当前 item

flex-grow

定义主轴存在剩余空间时，项目在主轴的放大比例（单个元素时：1 占满所有剩余空间，0.5 占满剩余空间的一半）。如果主轴方向为竖直方向，在移动设备和 Safari 上不会生效

默认为 0，即如果存在剩余空间，也不放大
如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间（如果有的话）
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
如果一共两个项目，一个项目的 flex-grow 属性为 0.1，另一个项目为 0.2，如果有剩余空间的话，则前者占据的剩余空间为十分之一，后者占据的剩余空间为十分之二，其余的十分之七空白

flex-shrink

定义主轴不存在剩余空间时，item 在主轴方向缩小比例

默认为 0，即如果空间不足，都不缩小
如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将按项目宽度比例缩小

容器宽 500px，项目 1「flex-shrink 为 1，宽 300」，项目 2「flex-shrink 为 1，宽 400」 => 最终项目 1 和 项目 2 的宽度是多少？

项目 1 宽 300 + 项目 2 宽 400 - 容器宽 500 = 需要缩小 200
项目 1 最终宽度为 300 - 3/(3 + 4) * 200
项目 2 最终宽度为 400 - 4/(3 + 4) * 200

如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小
如果多个项目设置了 flex-shrink 的属性大于 0，则值越大，缩小越多

容器宽 500px，项目 1「flex-shrink 为 2，宽 300」，项目 2「flex-shrink 为 1，宽 400」，最终项目 1 和 项目 2 的宽度是多少？

项目 1 宽 300 + 项目 2 宽 400 - 容器宽 500 = 需要缩小 200
项目 1 最终宽度为 300 - (2 * 3) / (2 * 3 + 4) * 200
项目 2 最终宽度为 400 - 4 / (2 * 3 + 4) * 200