1.2k
字
2 mins
...
...
关于因为我受够了每次写 flex 都满世界搜它那一堆咒语一样的样式时不时还要被该死的知乎拒之门外所以决定自己写一个互动笔记那些事。
好标准的轻小说标题！【那种语气
是的我一直到今天才知道知乎屏蔽了谷歌的搜索结果，我还以为是我的浏览器 500 年没更新被现代互联网抛弃了呢【。
赶在 3.9 日的 23:58 hexo new 了，所以决定这篇的所有演示项目都用 miku 色【啊？
3.10 更新：由于排版限制本页面仅制作了常用的样式演示，省略的部分会给出 MDN web docs 链接。
容器样式
这是一个设置为 display: flex 的容器，且为了方便预览将最大高度设为页面高度的 40%。在本章节（#容器样式）下点击的所有样式均会反应在此处。
flex-direction
决定容器的主轴（x）的方向。
- flex-direction,row,在横轴上排列（默认）
- flex-direction,row-reverse,在横轴上从后往前排列
- flex-direction,column,在纵轴上排列
- flex-direction,column-reverse,在纵轴上从后往前排列
flex-wrap
设置容器是否换行。
- flex-wrap,nowrap,不换行（默认）
- flex-wrap,wrap,换行
- flex-wrap,wrap-reverse,换行，且从后往前排列每一行
justify-content
设置子元素在主轴（x）方向上的对齐方式，详情请参考此处。
注：以下内容建议在 flex-wrap: wrap 下预览。
- justify-content,flex-start,向主轴开始位置对齐（默认）
- justify-content,center,居中
- justify-content,flex-end,向主轴结束位置对齐
- justify-content,space-between,均匀排列，左右不留空
- justify-content,space-around,均匀排列，左右留空
align-items
设置子元素在侧轴（y）方向上的对齐方式，详情请参考此处。
- align-items,stretch,拉伸以适应容器（默认，但当元素有固定宽高时不生效）
- align-items,center,在 y 轴上居中
- align-items,flex-start,向 y 轴开始位置对齐
- align-items,flex-end,向 y 轴结束位置对齐
子元素样式
妈呀这个工程量比我想象的大太多了先坑着明天再来……