flex 布局详解，整合springboot集成实现动态刷新配置

• • flex 模块布局

  • flex-direction：设置 main axis 的方向

  • justify-content：设置 flex items 在 main axis 对齐方式

  • align-items：设置 flex items 在 cross axis 对齐方式

  • flex-wrap：设置 flex container 单行还是多行

  • flex-flow：简写属性 (flex-direction || flex-wrap)

  • align-content：多行 flex items 在 cross axis 上的对齐方式

  • 总结

• flex items 相关属性

• • order：决定 flex items 的排布顺序

  • align-self：覆盖 flex container 设置的 align-items

  • flex-grow：决定了 flex items 如何拓展

  • flex-shrink：决定了 flex items 如何收缩

  • flex-basic：设置 flex items 在 main axis 上的 base size

  • flex：简写属性 (flew-grow flew-shrink? || flex-basis)

  • 总结

详细的知识点：【重识 HTML + CSS】知识点目录

flex 简介

==========================================================================

flex 布局（Flexible 布局，弹性布局）是在小程序开发中经常使用的布局

官方文档：

https://www.w3.org/TR/css-flexbox-1/

https://www.w3.org/TR/css-align-3/

开启了 flex 布局的元素叫 flex container

• flex container 里面的直接子元素叫做 flex items

设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

• display: flex： flex container 以 block-level 形式存在

• display: inline-flex： flex container 以 inline-level