Flexbox Froggy 学习笔记

尚寂新
尚寂新
2022/02/23 20:54

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 则是 视每个单行为单独的个体
已有 4 条评论 (旧评论在前)
  1. 若志奕鑫
    回复
    2022-03-05 13:51 云南省 Windows NT10

    嘤嘤嘤,css知识点+1@[滑稽]

  2. 若志奕鑫
    回复
    2022-03-06 12:20 云南省 Android 6.0

    测试看看,把这个评论删了吧哈哈

    1. 若志奕鑫
      回复
      2022-03-06 21:09 云南省 Windows NT10

      你这个有评论异常提示语。。。

  3. 鸟叔
    回复
    2022-04-26 18:27 山西省 Windows 7

    鸟叔来串门,通过虫洞穿梭至此,期待回访!

添加新评论 (Markdown Supported)
(ノ°ο°)ノ