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}