# aardio 范例: 浏览器伸缩盒与HTMLayout布局语法对比 ```aardio //伸缩盒 import win.ui; /*DSG{{*/ var winform = win.form(text="浏览器伸缩盒与HTMLayout布局语法对比";right=759;bottom=469) winform.add() /*}}*/ import web.layout; var wbLayout = web.layout(winform) import process; wbLayout.sinking = { onHyperlinkClick = function (ltTarget,ltEle,reason,behaviorParams) { process.openUrl(ltTarget.href); return true; } } wbLayout.html = /** 浏览器伸缩盒与 HTMLayout 布局语法对比

浏览器 `display:flex` 与 HTMLayout 布局语法 `flow/flex` 对比

水平布局

.parent { 
  display:flex; 
  flex-direction: row; 
}

.parent { flow:horizontal; }

垂直布局

.parent { 
  display:flex; 
  flex-direction: column; 
}

.parent { flow:vertical; }

水平流式布局

.parent { 
  display: flex; 
  flex-wrap: wrap; 
}
.child { 
  width:40%; 
}

.parent { 
  flow:h-flow; 
}
.child { 
  width:40%; 
}

水平布局，并平分间距

.parent { 
  display:flex; 
  flex-direction: row; 
  justify-content: space-between; 
}

.parent { 
  flow:horizontal; 
  border-spacing:*; 
}

水平布局，高度自适应

.parent { 
  display:flex; 
  flex-direction: row; 
  height:80px; 
  align-items:stretch;
}
.child:nth-child(3) { 
  align-self: flex-start; 
}

.parent { 
  flow:horizontal; 
  height:*; 
}
.child { 
  height:*;
  width:40px 
}
.child:nth-child(3) { 
  height:80px;
}

水平布局，垂直对齐

.parent { 
  display:flex; 
  flex-direction: row; 
  height:80px; 
  align-items:center;
}
.child:nth-child(3) { 
  align-self: flex-start; 
}

.parent {
	flow: horizontal;
	height: *;
}
.child {
	margin-top: *;
	margin-bottom: *;
}
.child:nth-child(3) {
	margin-top: 0;
	margin-bottom: *;
}

水平布局，宽度自适应

.parent { 
  display:flex; 
  flex-direction: row; 
}
.child:nth-child(3) { 
  flex: 1;
}

.parent { flow:horizontal; }
.child { height:*;width:40px  }
.child:nth-child(3) { width: *; }

**/ winform.show(3/*_SW_MAXIMIZE*/) win.loopMessage(); ```

浏览器 display:flex 与 HTMLayout 布局语法 flow/flex 对比