Flex布局父项常见属性有哪些?

84 阅读1分钟

Flex布局中默认的主轴是row,x轴

  •  如果想改变主轴方向可通过设置flex-direction来改变

    •  flex-direction:column;将主轴改为y轴,纵轴
    •  flex-direction:row; 将主轴改为x轴,横轴
    •  flex-direction:row-reverse;主轴为x轴,并且翻转
    •  flex-direction:column-reverse;主轴为y轴,并且翻转
  •  通过justify-content能够设置主轴子元素排列形式

    •  值为flex-start 所有子元素在主轴头部显示
    •  值为flex-end 所有子元素在主轴尾部显示
    •  值为flex-center 所有子元素在主轴居中对齐
    •  值为space-around 所有子元素平分剩余空间
    •  值为space-between 所有子元素先两边贴边在平分剩余空间
  •  通过align-items能够设置侧轴元素对齐的方式在子项为单项(单行)的时候使用

    •  值为flex-start 表示从头开始
    •  值为flex-end 表示从结尾开始
    •  值为center 表示居中显示
    •  值为stretch 会将子元素拉伸
  •  通过Align-content适应于换行(多行)的情况下(单行情况下无效)

    •  可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值
  •  Flex-flow就是flex-direction和flex-wrap的合写