弹性盒子

173 阅读1分钟

除了display开启容器外,还有以下6个属性设置在容器上

  • 1.display:flex父盒子开启 一般为横向排列
  • 2.flex-direction: 主轴的方向(即项目的排列方向)。 【box-orient】flex-direction:row从左到右;flex-direction:row-reverse从右到左;flex-direction:column纵向排列从上向下; flex-direction:column-reverse纵向排列从下向上
  • 3.flex-wrap: 如果一条轴线排不下,如何换行。 【box-lines】.flex-wrap: nowrap不换行;flex-wrap:wrap换行; .flex-wrap:wrap-reverse反转换行第二行在前第二行在后
  • 4.flex-flow: flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap;.flex-flow:行向排列 是否换行;2.3的总写

- 5.justify-content: 项目在主轴上的对齐方式。【box-pack】

  • justify-content:flex-start(默认值):伸缩项目向一行的起始位置靠齐。该行的第一个伸缩项目在主轴起点边的外边距与该行在主轴起点的边对齐,同时所有后续的伸缩项目与其前一个项目对

  • justify-content:flex-end:伸缩项目向一行的结束位置靠齐。该行的最后一个伸缩项目在主轴终点边的外边距与该行在主轴终点的边对齐,同时所有前面的伸缩项目与其后一个项目对齐。

  • justify-content:center:伸缩项目向一行的中间位置靠齐。该行的伸缩项目将相互对齐并在行中居中对齐,同时第一个项目与该行在主轴起点的边的距离等同与最后一个项目与该行在主轴终点的边的距离

  • 6.align-items: 项目在交叉轴上如何对齐。【box-align】

  • 7.align-content: 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。