• 组件
  • 布局与其它

弹性布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

如果不熟悉,推荐学习下这个 Flex 布局教程

代码演示

弹性布局

基本

item
item
item
item
item
item
item
item
item
item
item
item
item

换行

item
item
item
item
item
item
item
item

轴对齐方式

item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
基本
<div class="flexbox g-vertical-md g-wing-lg">
	<div class="flexbox-item">
		<div style="background:#ebebef; text-align:center;color:#999999;">item</div>
	</div>
	<div class="flexbox-item">
		<div style="background:#ebebef; text-align:center;color:#999999;">item</div>
	</div>
</div>
<div class="flexbox g-vertical-md g-wing-lg">
	<div class="flexbox-item">
		<div style="background:#ebebef; text-align:center;color:#999999;">item</div>
	</div>
	<div class="flexbox-item">
		<div style="background:#ebebef; text-align:center;color:#999999;">item</div>
	</div>
	<div class="flexbox-item">
		<div style="background:#ebebef; text-align:center;color:#999999;">item</div>
	</div>
</div>
<div class="flexbox g-vertical-md g-wing-lg">
	<div class="flexbox-item">
		<div style="background:#ebebef; text-align:center;color:#999999;">item</div>
	</div>
	<div class="flexbox-item">
		<div style="background:#ebebef; text-align:center;color:#999999;">item</div>
	</div>
	<div class="flexbox-item">
		<div style="background:#ebebef; text-align:center;color:#999999;">item</div>
	</div>
	<div class="flexbox-item">
		<div style="background:#ebebef; text-align:center;color:#999999;">item</div>
	</div>
</div>
<div class="flexbox flexbox-column g-vertical-md g-wing-lg">
	<div class="flexbox-item">
		<div style="background:#ebebef; text-align:center;color:#999999;">item</div>
	</div>
	<div class="flexbox-item">
		<div style="background:#ebebef; text-align:center;color:#999999;">item</div>
	</div>
	<div class="flexbox-item">
		<div style="background:#ebebef; text-align:center;color:#999999;">item</div>
	</div>
	<div class="flexbox-item">
		<div style="background:#ebebef; text-align:center;color:#999999;">item</div>
	</div>
</div>
换行
<div class="flexbox flexbox-wrap ">	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>
</div>
轴对齐方式
<div class="flexbox flexbox-justify-center ">
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>
</div>
<div class="flexbox flexbox-justify-end ">
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>
</div>
<div class="flexbox flexbox-justify-between ">
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>
</div>
<div class="flexbox flexbox-align-top ">
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; line-height: 1; height: 16px; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>
</div>
<div class="flexbox flexbox-align-bottom ">
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; line-height: 1; height: 16px; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>
</div>
<div class="flexbox flexbox-align-middle ">
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; line-height: 1; height: 16px; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>
</div>
<div class="flexbox flexbox-align-stretch ">
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; line-height: 1; height: 16px; text-align:center;color:#999999;width:50px;margin:10px">item</div>	
	<div style="background:#ebebef; text-align:center;color:#999999;width:50px;margin:10px">item</div>
</div>

Flex

成员 说明 默认
direction 子元素的排列方向，smart-ui支持row、column row
wrap 子元素的排列方向，smart-ui支持wrap、nowrap nowrap
justify 子元素在主轴上的对齐方式，smart-ui支持start、end、center、between start
align 子元素在交叉轴上的对齐方式，smart-ui支持start/top、end/bottom、center/midden、stretch stretch

Item

Flexbox-Item 默认加上了样式flex:1 ,保证所有 item 平均分宽度, Flex 容器的 children 不一定是 Flexbox-Item

Text 文本 G-space 间距