美文网首页
Flex的API

Flex的API

作者: TheRaging | 来源:发表于2021-01-12 14:07 被阅读0次

    在父项目上的可添加的属性

    父属性必须拥有display:flex这一项 负责所有属性不起作用

    • flex-direction 决定主轴的方向
      1. row水平向右
      2. row-reverse 水平向左
      3. column 垂直向下
      4. column-reverse垂直向上
    • justily-content 设置主轴上子元素的排列方式
      1. flex-start 主轴方向从头到尾
      2. flex-end 侧轴方向从尾到头排列
      3. center 在主轴居中对齐
      4. space-around 平分剩余空间
      5. space-between 先两边贴边,在平分剩余空间
      6. space-evenly 每个子项目的间隔相等包裹贴边
    • align-items 设置侧轴上子元素的排列方式(单行)
      1. flex-start 侧轴方向从头到尾排列
      2. flex-end 侧轴方向从尾到头排列
      3. center 侧轴剧中排列
      4. stretch 如果项目未设置高度,则会自己拉伸到父项的高度
      5. baseLine 项目的第一行文字的基线对齐
    • align-content 设置侧轴上子元素的排列方式(多行)
      1. flex-start 侧轴方向从头到尾排列
      2. flex-end 侧轴方向从尾到头排列
      3. center 侧轴剧中排列
      4. space-around 子项在侧轴平分剩余空间
      5. space-between 子项在侧轴先贴向两边,在平分剩余空间
      6. stretch 如果项目未设置高度,则会自己拉伸到父项的高度
      7. space-evenly 每一行元素都完全上下等分。
    • flex-wrap 设置子元素是否换行
      1. wrap
      2. nowrap
      3. wrap-reverse

    在子项目上可添加的属性

    • flex 分配剩余空间 值为0-9999
    • align-self
      1. auto 自动
      2. flex-start 从头到尾
      3. flex-end 从尾到头
      4. center 居中
      5. baseline 项目的第一行文字的基线对齐
      6. stretch 拉伸

    相关文章

      网友评论

          本文标题:Flex的API

          本文链接:https://www.haomeiwen.com/subject/tvcdaktx.html