Flexbox Froggy 学习笔记
尚寂新
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 则是 视每个单行为单独的个体
嘤嘤嘤，css知识点+1
测试看看，把这个评论删了吧哈哈
你这个有评论异常提示语。。。
鸟叔来串门，通过虫洞穿梭至此，期待回访！