布局
布局的可视化创建与使用
排列方向 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:拉伸对齐。




