1、flex-direction属性
row(默认值):沿着x轴,从左到右排列。
row-reverse:沿着x轴,从右到左排列。
column:沿着y轴,从上到下排列。
column-reverse:沿着Y轴,从下到上。

2.flex-wrap属性
nowrap(默认):不换行。
wrap:超出自动向下换行。
wrap-reverse:超出自动向上换行。

小程序 四、flex布局3.justify-content属性
flex-start:靠近x轴起点,无间隙。
center:居中显示,多个对象间不留间隙。
flex-end:靠近x轴终点,多对象不留间距。
space-between:对象间间距相等,外围无间距。
space-around:外围间距为对象间距的一半。
space-evenly:对象之间间距等于外围间距。小程序 四、flex布局4.align-items属性
设置对象在行中的对齐方式。
stretch:项目拉伸至填满行高。
flex-start:对象于顶部无间隙。
center:对象在行中居中。
flex-end:对象于底部无间隙。
baseline:对象的第一行文字的基线对齐。小程序 四、flex布局

小程序 四、flex布局

5.align-content属性
多行排列时,设置行在y轴方向上的对齐方式,以及分配行之间及其周围多余的空间。
stretch(默认值):当未设置对象尺寸,将各行中的对象拉伸至填满y轴。当设置了对象尺寸,对象尺寸不变,对象行拉伸至填满Y轴
flex-start:首行在交叉轴起点开始排列,行间不留间距。
center:行在交叉轴中点排列,行间不留间距,首行离交叉轴起点和尾行离交叉轴终点距离相等。
flex-end:尾行在交叉轴终点开始排列,行间不留间距。
space-between:行与行间距相等,首行离交叉轴起点和尾行离交叉轴终点距离为0。
space-around:行与行间距相等,首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半。
space-evenly:行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等。

小程序 四、flex布局

小程序 四、flex布局

小程序 四、flex布局

对象属性

1.order属性
设置对象沿X轴方向上的排列顺序,数值越小,排列越靠前,属性值为整数。

2.flex-shrink属性
当对象在X轴方向上溢出时,通过设置对象收缩因子来压缩对象适应 容器。属性值为对象的收缩因子,属性值取非负数。

3.flex-grow属性
当对象在X轴方向上还有空闲时,通过设置对象扩张因子进行剩余空间的分配。属性值为对象的扩张因子,属性值取非负数。

4.flex-basis属性
定义了在分配多余空间之前,项目占据的x轴空间
当容器设置flex-direction为row或row-reverse时,flex-basis和width同时存在,flex-basis优先级高与height。
当容器设置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。

相关文章:

  • 2021-11-21
  • 2021-11-16
  • 2021-11-29
  • 2021-07-13
  • 2021-12-24
  • 2022-12-23
猜你喜欢
  • 2021-11-21
  • 2021-11-21
  • 2022-12-23
  • 2021-11-21
  • 2021-11-21
相关资源
相似解决方案