javascript盒子的属性

web前端开发 javascript盒子的属性 记忆巩固 随手笔记

盒子的属性 （了解）

• justify-content （盒子 水平对齐）
  • flex-start
    • 让子元素从父盒子的开头排序 但盒子的顺序不变 相当于左对齐
  • flex-end
    • 让子元素从父盒子的右边排序 但盒子的顺序不变 当于右对齐
  • conten
    • 让子元素在父盒子的中间排序 但盒子的顺序不变 当于居中对齐
  • space-between
    • 左右盒子贴近父盒子 中间盒子平均分布空白间距
  • space-around
    • 相当于给每个盒子加了个margin值
• align-item (盒子的垂直对齐)
  • flex-start
    • 上对齐
  • flex-end
    • 下对齐
  • conten
    • 垂直居中对齐
  • stretch
    • 让子盒子高度拉伸适合父盒子的高度 （子元素不给高度）
• flex-wrap (盒子自动换行)
  • wrap
    • 盒子必要时可拆行或拆列，盒子尺寸不够时自动跳到下一 行
  • nowrap
    • 规定盒子在同一行上显示 不自动换行
  • wrap-reverse
    • 上下两列盒子顺序调转 翻转
• order
  • （每个盒子的顺序可自由排列 order 默认值为0 数值越小 越往前 可为负数）
  • order: -1
    • 数值越小 越往前 可为负数