⼩程序四、flex布局1、flex-direction属性
row(默认值)：沿着x轴，从左到右排列。
row-reverse：沿着x轴，从右到左排列。
column：沿着y轴，从上到下排列。
column-reverse：沿着Y轴，从下到上。
2.flex-wrap属性
nowrap(默认)：不换⾏。
wrap：超出⾃动向下换⾏。
wrap-reverse：超出⾃动向上换⾏。
3.justify-content属性
flex-start：靠近x轴起点，⽆间隙。
center：居中显⽰，多个对象间不留间隙。
flex-end：靠近x轴终点，多对象不留间距。
flex布局详细讲解
space-between：对象间间距相等，外围⽆间距。
space-around：外围间距为对象间距的⼀半。
space-evenly：对象之间间距等于外围间距。
4.align-items属性
设置对象在⾏中的对齐⽅式。
stretch：项⽬拉伸⾄填满⾏⾼。
flex-start：对象于顶部⽆间隙。
center：对象在⾏中居中。
flex-end：对象于底部⽆间隙。baseline：对象的第⼀⾏⽂字的基线对齐。
5.align-content属性
多⾏排列时，设置⾏在y轴⽅向上的对齐⽅式，以及分配⾏之间及其周围多余的空间。
stretch(默认值)：当未设置对象尺⼨，将各⾏中的对象拉伸⾄填满y轴。当设置了对象尺⼨，对象尺⼨不变，对象⾏拉伸⾄填满Y轴flex-start：⾸⾏在交叉轴起点开始排列，⾏间不留间距。
center：⾏在交叉轴中点排列，⾏间不留间距，⾸⾏离交叉轴起点和尾⾏离交叉轴终点距离相等。
flex-end：尾⾏在交叉轴终点开始排列，⾏间不留间距。
space-between：⾏与⾏间距相等，⾸⾏离交叉轴起点和尾⾏离交叉轴终点距离为0。
space-around：⾏与⾏间距相等，⾸⾏离交叉轴起点和尾⾏离交叉轴终点距离为⾏与⾏间间距的⼀半。
space-evenly：⾏间间距、以及⾸⾏离交叉轴起点和尾⾏离交叉轴终点距离相等。
对象属性
设置对象沿X轴⽅向上的排列顺序，数值越⼩，排列越靠前，属性值为整数。
2.flex-shrink属性
当对象在X轴⽅向上溢出时，通过设置对象收缩因⼦来压缩对象适应 容器。属性值为对象的收缩因⼦，属性值取⾮负数。
3.flex-grow属性
当对象在X轴⽅向上还有空闲时，通过设置对象扩张因⼦进⾏剩余空间的分配。属性值为对象的扩张因⼦，属性值取⾮负数。
4.flex-basis属性
定义了在分配多余空间之前，项⽬占据的x轴空间
当容器设置flex-direction为row或row-reverse时，flex-basis和width同时存在，flex-basis优先级⾼与he
ight。
当容器设置flex-direction为column或column-reverse时，flex-basis优先级⾼
需要注意的是，当flex-basis和width(或height)，其中⼀个属性值为auto时，⾮auto的优先级⾼
5.align-self属性
设置对象在⾏中y轴⽅向上的对齐⽅式，⽤于覆盖容器的align-items，这么做可以对对象的对齐⽅式做特殊处理。默认属性值为auto，继承容器的align-items值，当容器没有设置align-items时，属性值为stretch。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。