传统的盒模型:简单,但在处理实现诸如垂直居中,弹性宽度和特性时会较麻烦。

flexbox布局方式:可以快速实现上述的各种场景,以及更多非常常用的排版需求.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

一:flexbox模型

小程序 Flex模式

小程序 Flex模式

通过设置容器的参数,来实现内部的项目按照一定的循序进行排布。

2.容器的属性

以下6个属性设置在容器上。

小程序 Flex模式

 

小程序 Flex模式

 

 

 

小程序 Flex模式

小程序 Flex模式

 

 

小程序 Flex模式

 

说明例子:

小程序 Flex模式

 

小程序 Flex模式

 

小程序 Flex模式

 

 

 

 

 

 

 

 

相关文章:

  • 2021-08-10
  • 2022-01-08
  • 2021-11-21
  • 2021-11-16
  • 2021-11-29
猜你喜欢
  • 2022-01-31
  • 2022-12-23
  • 2021-11-21
  • 2021-11-21
  • 2022-12-23
  • 2021-11-21
  • 2021-11-10
相关资源
相似解决方案