布局

布局的可视化创建与使用

排列方向 flex-direction

换行 flex-wrap

排列方式 justify-content

对齐方式 align-items

布局概述

助码布局采用弹性盒布局(flex)，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化

创建布局

在可视化设计页面 选择要布局的元素 属性 设备属性-》布局

排列方向 flex-direction：定义了主轴的方向，可以是水平或垂直，以及其起始和结束的方向。

下图分别是选择各种对齐方式后的效果

行row （默认）：从左到右 ltr ；从右到左 rtl：

row-reverse ：从右到左 ltr ；从左到右 rtl

列column: 相同， row 但从上到下

column-reverse: 相同， row-reverse 但从下到上

换行 flex-wrap：决定了当容器空间不足时，项目是否换行。

默认情况下，子项目元素都将尝试适合一行nowrap。

nowrap （默认）不换行wrap 一行放不下时换行wrap-reverse 弹性项目将从下到上换行成多行

行row情况下wrap的效果：

排列方式 justify-content：设置项目在主轴上的对齐方式。

flex-start：与主轴的起点对齐。

flex-end：与主轴的终点对齐。

center：与主轴的中点对齐。

space-between：与主轴两端对齐，轴线之间的间隔平均分布。

对齐方式 align-items：定义了项目在交叉轴上的对齐方式。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

stretch：拉伸对齐。