【愚公系列】2023年12月 HarmonyOS教学课程 007-ArkUI组件（Flex）

作者简介，愚公搬代码

《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，51CTO博客专家等。

《近期荣誉》：2022年CSDN博客之星TOP2，2022年华为云十佳博主等。

《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。

欢迎 点赞✍评论⭐收藏

文章目录

• 一、Flex
• • 1.概述
  • 2.布局方向
  • • 2.1 FlexDirection.Row
    • 2.2 FlexDirection.RowReverse
    • 2.3 FlexDirection.Column
    • 2.4 FlexDirection.ColumnReverse
    • 2.布局换行
    • • 2.1 FlexWrap.NoWrap
      • 2.2 FlexWrap.Wrap
      • 2.3 FlexWrap. WrapReverse
      • 3.对齐方式
      • • 3.1 主轴对齐方式
        • • ☀️3.1.1 FlexAlign.Start
          • ☀️3.1.2 FlexAlign.Center
          • ☀️3.1.3 FlexAlign.End
          • ☀️3.1.4 FlexAlign.SpaceBetween
          • ☀️3.1.5 FlexAlign.SpaceAround
          • ☀️3.1.6 FlexAlign.SpaceEvenly
          • 3.2 交叉轴对齐方式
          • • ☀️3.2.1 ItemAlign.Auto
            • ☀️3.2.2 ItemAlign.Start
            • ☀️3.2.3 ItemAlign.Center
            • ☀️3.2.4 ItemAlign.End
            • ☀️3.2.5 ItemAlign.Stretch
            • ☀️3.2.6 ItemAlign.Baseline
            • ☀️3.2.7 alignSelf
            • 二、案例
            • • 1.多行内容对齐
              • • 1.1 Start
                • 1.2 Center
                • 1.3 End
                • 1.4 SpaceBetween
                • 1.5 SpaceAround
                • 1.6 SpaceEvenly
                • 2.自适应拉伸
                • • 2.1 flexBasis
                  • 2.2 flexGrow
                  • 2.3 flexShrink
                  • 2.4 案例
                  • 感谢：给读者的一封信