flex 布局属性

视频教程-可以点击跳转到视频

简单案例

父元素属性设置-可以点击跳转案例

设置主轴方向
设置子元素是跟着主轴来排序的方式
默认的主轴是X 轴 Y轴是侧轴

flex-direction:{
    row;         默认值    从左到右
    row-reverse; 翻转      从右到左
    主轴是Y 轴 X轴是侧轴
    column;  设置主轴方向    从上到下
    column-reverse; 翻转   从下到上
}

设置主轴上的子元素 排序
默认从头开始排序

justify-content:{
    flex-start; 默认值   从头开始排序 如果主轴是X轴，则是从左到右
    flex-end;           从尾开始排序
    center;             居中
    space-around;       平均分配
    space-between;       两边贴边 剩余分配给中间
}

设置主轴上的子元素换行
默认不换行

flex-wrap:{
    nowrap;  默认不换行
    wrap;    换行
}

设置侧轴上的子元素水平垂直居中配和 justify-content:center
使用于单行

align-items:{
     center;    居中
     stretch;   拉伸高度  注意：子元素不能设置高度不然不生效
}

设置侧轴上的子元素排序多行 注意 要和flex-wrap:wrap
使用于多行

align-content:{
    flex-start;     默认在侧轴从头开始排序
    flex-end;       在侧轴的从尾开始开始排序
    center;         居中
    space-around;   子项在侧轴平均分配剩下空间
    space-between;  子项在侧轴先分布在两头，再平分剩余空间
    stretch;        设置子项高度平分父元素的高度    注意：子元素不能设置高度不然不生效
}

该属性是 flex-direction 和 flex-wrap 简写

flex-flow:{
        flex-flow:column wrap; ==  flex-direction: column; flex-wrap: wrap;
}

子属性设置-可以点击跳转案例

设置子项分配剩余空间 用flex 来表示占多少份数
注意： 数字越大分配越多

flex:{
    <number>  默认是 0
}

设置子项 单个项目与其他项目不一样的对齐方式
可以覆盖 aling-items 属性
默认值为 auto 表示继承父元素align-items属性
如果没有父元素，则等同于stretch

align-self:{
    flex-end;
}

设置子项位置
注意：数字越小越靠前

order:{
    -1 默认值 0
}