Flexbox Froggy 学习笔记

2022-02-23 20:54:00
 尚寂新

Flexbox Froggy

一个学习练习 CSS 中 Flex 弹性盒子布局的网站
http://flexboxfroggy.com/

justify-content

功能:设置对齐方式 ( X 轴 )

属性值说明
flex-start始侧对齐(横向排列为左对齐,纵向排列为上对齐)
flex-end终侧对齐
center居中对齐
space-between贴边分散对齐,靠边的盒子仅外侧的单面无 margin (贴边)
space-around分散对齐,每个靠边的盒子四个面都有 margin (不贴边)

align-items

功能:设置对齐方式 ( Y 轴 )

属性值说明
flex-start始侧对齐(横向排列为左对齐,纵向排列为上对齐)
flex-end终侧对齐
center居中对齐
baseline文本基线对齐 (何为基线? 英文四线格的第三条线)
stretch拉伸,顶满容器 (默认)

flex-direction

功能:定义排列方式以及方向 ( 横纵顺逆 )

属性值说明
row顺序横列 (行)
row-reverse逆序横列 (行)
column顺序竖列 (纵)
column-reverse逆序竖列 (纵)

order

功能:重新排列顺序

传递整数,负数相对前移,正数相对后移,默认为 0

align-self

功能:指定单个盒子的对齐方式

属性值与 align-items 相同

flex-wrap

功能:控制是否折行 (排满则去下一行)

属性值说明
nowrap挤在一起贴贴,不折行 (默认)
wrap折行
wrap-reverse折行的同时,逆序排列

flex-flow

功能:简写 flex-direction 和 flex-wrap 至一条 CSS 语句中

使用方法: flex-flow : 方向 折行方式;

align-content

功能:设置对齐方式 ( Y 轴 )

属性值与 justify-content 相同,功能与 align-items 相近,但有所区别。
align-content 是视多行子项以一个整体,而 align-items 则是 视每个单行为单独的个体