flex布局常见属性

自己学习参考使用

flex布局父项常见属性

body {
    flex-direction: 设置主轴的方向;
    /* row 默认值从左到右
    row-reverse 从右到左
    column 从上到下
    column-reverse 从下到上 */
    justify-content: 设置主轴上的子元素排列方式;
    /* flex-start 默认值从头部开始
    flex-end 从尾部开始排列
    center 在主轴居中对齐（如果主轴是x轴 水平居中）
    space-around 平分剩余空间
    space-between 先两边贴边 再平分剩余空间 */
    flex-wrap: 设置子元素是否换行;
    /* nowrap 默认值，不换行
    wrap 换行 */
    align-items: 设置侧轴上的子元素排列方式（单行）;
    /* flex-start 默认值 从上到下
    flex-end 从下到上
    center 挤在一起居中（垂直居中）
    stretch 拉伸 */
    align-content: 设置侧轴上的子元素排列方式（多行）;
    /* flex-start 默认值在侧轴的头部开始排列
    flex-end 在侧轴的尾部开始排列
    center 在侧轴中间显示
    space-around 子项在侧轴平分剩余空间
    space-between 子项在侧轴先分布在两头，再平分剩余空间
    stretch 设置子项元素高度平分父元素高度 */
    flex-flow: 复合属性，相当于同事设置了flex-direction和flex-wrao;
    /* flex-flow:row wrap; */
}

flex布局子项常见属性

p {
    flex: 子项目占的份数;
    /* -ms-flex: 1;
    flex: 1; */
    align-self: 控制子项自己在侧轴的排列方式;
    /* flex-start 元素位于容器的开头
    center 元素位于容器的中央
    flex-end 元素位于容器的末端 */
    order: 属性定义子项的排列顺序（前后顺序）;
    /* order:-1; */
}