aardio 范例: 浏览器伸缩盒与HTMLayout布局语法对比

//伸缩盒
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 = /** 
<html><head>
<title>浏览器伸缩盒与 HTMLayout 布局语法对比</title>
<style>
div.section {
    margin: 1em;
}

div.section > div {
    font: 10pt Verdana, sans-serif;
    padding: 1em;
    text-align: center; 
    width: 30%
}

div.section > pre {
    padding: 1em;
    border: thin solid #ddd;
    height: *
}

div.section > :nth-child(1) {
    background: #eff;
    width: 30%
}

div.section > :nth-child(2) {
    background: #ffe;
    width: 30%
}

div.section > .parent {
    border: thin solid #888;
}

div.section > .parent > .child {
    font-size: 28px;
    border: thin solid #bbb;
    text-align: center;
    background: gold;
}

div.section div {
}

div.section {
    flow: horizontal;
}

div.section > * {
    width: 1*;
    margin: 1em;
}

#A .parent {
    flow: horizontal;
}

#B .parent {
    flow: vertical;
}

#C .parent {
    flow: h-flow;
}

#C .parent .child {
    width: 40%;
}

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

#E .parent {
    flow: horizontal;
    height: *;
}

#E .child {
    height: *;
    width: 40px
}

#E .child:nth-child(3) {
    height: 80px;
}

#F .parent {
    flow: horizontal;
    height: *;
}

#F .child {
    margin-top: *;
    margin-bottom: *;
}

#F .child:nth-child(3) {
    margin-top: 0;
    margin-bottom: *;
}

#G .parent {
    flow: horizontal;
}

#G .child {
    height: *;
    width: 40px
}

#G .child:nth-child(3) {
    width: *;
}
        </style>
    </head>
    <body>

<h1>浏览器 <code>display:flex</code> 与 HTMLayout/Sciter 布局语法 <code>flow/flex</code> 对比</h1>
<a href="http://bbs.aardio.com/forum.php?mod=viewthread&tid=7159">参考：HTMLayout布局教程</a>
<div .section id="header">
  <div>浏览器: Flexbox </div>
  <div>HTMLayout/Sciter: flow/flex</div>
  <div>演示</div>
</div>

<h5>水平布局</h5>
<div .section id="A">
  <pre>.parent { 
  display:flex; 
  flex-direction: row; 
}</pre>
  <pre>.parent { flow:horizontal; }</pre>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
  </div>
</div>

<h5>垂直布局</h5>
<div .section id="B">
  <pre>.parent { 
  display:flex; 
  flex-direction: column; 
}</pre>
  <pre>.parent { flow:vertical; }</pre>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
  </div>
</div>

<h5>水平流式布局</h5>
<div .section id="C">
  <pre>.parent { 
  display: flex; 
  flex-wrap: wrap; 
}
.child { 
  width:40%; 
} </pre>
  <pre>.parent { 
  flow:h-flow; 
}
.child { 
  width:40%; 
}</pre>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
  </div>
</div>

<h5>水平布局，并平分间距</h5>
<div .section id="D">
  <pre>.parent { 
  display:flex; 
  flex-direction: row; 
  justify-content: space-between; 
}</pre>
  <pre>.parent { 
  flow:horizontal; 
  border-spacing:*; 
}</pre>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
  </div>
</div>

<h5>水平布局，高度自适应</h5>
<div .section id="E">
  <pre>.parent { 
  display:flex; 
  flex-direction: row; 
  height:80px; 
  align-items:stretch;
}
.child:nth-child(3) { 
  align-self: flex-start; 
}</pre>
  <pre>.parent { 
  flow:horizontal; 
  height:*; 
}
.child { 
  height:*;
  width:40px 
}
.child:nth-child(3) { 
  height:80px;
}</pre>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
  </div>
</div>


<h5>水平布局，垂直对齐</h5>
<div .section id="F">
  <pre>.parent { 
  display:flex; 
  flex-direction: row; 
  height:80px; 
  align-items:center;
}
.child:nth-child(3) { 
  align-self: flex-start; 
}</pre>
  <pre>.parent {
    flow: horizontal;
    height: *;
}
.child {
    margin-top: *;
    margin-bottom: *;
}
.child:nth-child(3) {
    margin-top: 0;
    margin-bottom: *;
}</pre>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
  </div>
</div>


<h5>水平布局，宽度自适应</h5>
<div .section id="G">
  <pre>.parent { 
  display:flex; 
  flex-direction: row; 
}
.child:nth-child(3) { 
  flex: 1;
}</pre>
  <pre>.parent { flow:horizontal; }
.child { height:*;width:40px  }
.child:nth-child(3) { width: *; }</pre>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
  </div>
</div> 
</body></html>
**/

winform.show(3/*_SW_MAXIMIZE*/) 
win.loopMessage();
Markdown 格式