标题：*
140 字

TAG标签：（用空格隔开）
30 字

恢复历史版本：

HTML转MD HTML转MD2

<p>原文： <a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool">http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool</a></p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">网页布局（layout）是CSS的一个重点应用。</p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071001.gif"/></p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">布局的传统解决方案，基于<a style="LIST-STYLE-TYPE: none; TEXT-DECORATION: underline; BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: rgb(17,34,51); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0px" href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model" target="_blank">盒状模型</a>，依赖<span class="Apple-converted-space">&nbsp;</span><a style="LIST-STYLE-TYPE: none; TEXT-DECORATION: underline; BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: rgb(17,34,51); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0px" href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" target="_blank">display</a>属性 +<span class="Apple-converted-space">&nbsp;</span><a style="LIST-STYLE-TYPE: none; TEXT-DECORATION: underline; BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: rgb(17,34,51); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0px" href="https://developer.mozilla.org/en-US/docs/Web/CSS/position" target="_blank">position</a>属性 +<span class="Apple-converted-space">&nbsp;</span><a style="LIST-STYLE-TYPE: none; TEXT-DECORATION: underline; BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: rgb(17,34,51); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0px" href="https://developer.mozilla.org/en-US/docs/Web/CSS/float" target="_blank">float</a>属性。它对于那些特殊布局非常不方便，比如，<a style="LIST-STYLE-TYPE: none; TEXT-DECORATION: underline; BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: rgb(17,34,51); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0px" href="https://css-tricks.com/centering-css-complete-guide/" target="_blank">垂直居中</a>就不容易实现。</p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071002.png"/></p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。</p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071003.jpg"/></p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">Flex布局将成为未来布局的首选方案。本文介绍它的语法，<a style="LIST-STYLE-TYPE: none; TEXT-DECORATION: underline; BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: rgb(17,34,51); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0px" href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html" target="_blank">下一篇文章</a>给出常见布局的Flex写法。</p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">以下内容主要参考了下面两篇文章：<a style="LIST-STYLE-TYPE: none; TEXT-DECORATION: underline; BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: rgb(17,34,51); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0px" href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">A Complete Guide to Flexbox</a><span class="Apple-converted-space">&nbsp;</span>和<span class="Apple-converted-space">&nbsp;</span><a style="LIST-STYLE-TYPE: none; TEXT-DECORATION: underline; BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: rgb(17,34,51); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0px" href="https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties" target="_blank">A Visual Guide to CSS3 Flexbox Properties</a>。</p><h2 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 2.88em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">一、Flex布局是什么？</h2><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">Flex是Flexible Box的缩写，意为&quot;弹性布局&quot;，用来为盒状模型提供最大的灵活性。</p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">任何一个容器都可以指定为Flex布局。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.box{
&nbsp;&nbsp;display:&nbsp;flex;}</pre></blockquote><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">行内元素也可以使用Flex布局。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.box{
&nbsp;&nbsp;display:&nbsp;inline-flex;}</pre></blockquote><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">Webkit内核的浏览器，必须加上-webkit前缀。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.box{
&nbsp;&nbsp;display:&nbsp;-webkit-flex;&nbsp;/*&nbsp;Safari&nbsp;*/
&nbsp;&nbsp;display:&nbsp;flex;}</pre></blockquote><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。</p><h2 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 2.88em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">二、基本概念</h2><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">采用Flex布局的元素，称为Flex容器（flex container），简称&quot;容器&quot;。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称&quot;项目&quot;。</p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071004.png"/></p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。</p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。</p><h2 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 2.88em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">三、容器的属性</h2><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">以下6个属性设置在容器上。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><ul class=" list-paddingleft-2" style="list-style-type: none;"><li><p>flex-direction</p></li><li><p>flex-wrap</p></li><li><p>flex-flow</p></li><li><p>justify-content</p></li><li><p>align-items</p></li><li><p>align-content</p></li></ul></blockquote><h3 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 1.87em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">3.1 flex-direction属性</h3><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">flex-direction属性决定主轴的方向（即项目的排列方向）。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.box&nbsp;{
&nbsp;&nbsp;flex-direction:&nbsp;row&nbsp;|&nbsp;row-reverse&nbsp;|&nbsp;column&nbsp;|&nbsp;column-reverse;}</pre></blockquote><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071005.png"/></p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">它可能有4个值。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><ul class=" list-paddingleft-2" style="list-style-type: none;"><li><p>row（默认值）：主轴为水平方向，起点在左端。</p></li><li><p>row-reverse：主轴为水平方向，起点在右端。</p></li><li><p>column：主轴为垂直方向，起点在上沿。</p></li><li><p>column-reverse：主轴为垂直方向，起点在下沿。</p></li></ul></blockquote><h3 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 1.87em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">3.2 flex-wrap属性</h3><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">默认情况下，项目都排在一条线（又称&quot;轴线&quot;）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。</p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071006.png"/></p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.box{
&nbsp;&nbsp;flex-wrap:&nbsp;nowrap&nbsp;|&nbsp;wrap&nbsp;|&nbsp;wrap-reverse;}</pre></blockquote><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">它可能取三个值。</p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">（1）nowrap（默认）：不换行。</p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071007.png"/></p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">（2）wrap：换行，第一行在上方。</p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071008.jpg"/></p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">（3）wrap-reverse：换行，第一行在下方。</p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071009.jpg"/></p><h3 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 1.87em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">3.3 flex-flow</h3><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.box&nbsp;{
&nbsp;&nbsp;flex-flow:&nbsp;&lt;flex-direction&gt;&nbsp;||&nbsp;&lt;flex-wrap&gt;;}</pre></blockquote><h3 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 1.87em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">3.4 justify-content属性</h3><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">justify-content属性定义了项目在主轴上的对齐方式。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.box&nbsp;{
&nbsp;&nbsp;justify-content:&nbsp;flex-start&nbsp;|&nbsp;flex-end&nbsp;|&nbsp;center&nbsp;|&nbsp;space-between&nbsp;|&nbsp;space-around;}</pre></blockquote><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071010.png"/></p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><ul class=" list-paddingleft-2" style="list-style-type: none;"><li><p>flex-start（默认值）：左对齐</p></li><li><p>flex-end：右对齐</p></li><li><p>center： 居中</p></li><li><p>space-between：两端对齐，项目之间的间隔都相等。</p></li><li><p>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</p></li></ul></blockquote><h3 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 1.87em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">3.5 align-items属性</h3><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">align-items属性定义项目在交叉轴上如何对齐。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.box&nbsp;{
&nbsp;&nbsp;align-items:&nbsp;flex-start&nbsp;|&nbsp;flex-end&nbsp;|&nbsp;center&nbsp;|&nbsp;baseline&nbsp;|&nbsp;stretch;}</pre></blockquote><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071011.png"/></p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><ul class=" list-paddingleft-2" style="list-style-type: none;"><li><p>flex-start：交叉轴的起点对齐。</p></li><li><p>flex-end：交叉轴的终点对齐。</p></li><li><p>center：交叉轴的中点对齐。</p></li><li><p>baseline: 项目的第一行文字的基线对齐。</p></li><li><p>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</p></li></ul></blockquote><h3 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 1.87em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">3.6 align-content属性</h3><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.box&nbsp;{
&nbsp;&nbsp;align-content:&nbsp;flex-start&nbsp;|&nbsp;flex-end&nbsp;|&nbsp;center&nbsp;|&nbsp;space-between&nbsp;|&nbsp;space-around&nbsp;|&nbsp;stretch;}</pre></blockquote><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071012.png"/></p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">该属性可能取6个值。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><ul class=" list-paddingleft-2" style="list-style-type: none;"><li><p>flex-start：与交叉轴的起点对齐。</p></li><li><p>flex-end：与交叉轴的终点对齐。</p></li><li><p>center：与交叉轴的中点对齐。</p></li><li><p>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</p></li><li><p>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</p></li><li><p>stretch（默认值）：轴线占满整个交叉轴。</p></li></ul></blockquote><h3 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 1.87em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">四、项目的属性</h3><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">以下6个属性设置在项目上。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><ul class=" list-paddingleft-2" style="list-style-type: none;"><li><p>order</p></li><li><p>flex-grow</p></li><li><p>flex-shrink</p></li><li><p>flex-basis</p></li><li><p>flex</p></li><li><p>align-self</p></li></ul></blockquote><h3 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 1.87em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">4.1 order属性</h3><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.item&nbsp;{
&nbsp;&nbsp;order:&nbsp;&lt;integer&gt;;}</pre></blockquote><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071013.png"/></p><h3 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 1.87em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">4.2 flex-grow属性</h3><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.item&nbsp;{
&nbsp;&nbsp;flex-grow:&nbsp;&lt;number&gt;;&nbsp;/*&nbsp;default&nbsp;0&nbsp;*/}</pre></blockquote><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071014.png"/></p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p><h3 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 1.87em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">4.3 flex-shrink属性</h3><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.item&nbsp;{
&nbsp;&nbsp;flex-shrink:&nbsp;&lt;number&gt;;&nbsp;/*&nbsp;default&nbsp;1&nbsp;*/}</pre></blockquote><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071015.jpg"/></p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">负值对该属性无效。</p><h3 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 1.87em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">4.4 flex-basis属性</h3><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.item&nbsp;{
&nbsp;&nbsp;flex-basis:&nbsp;&lt;length&gt;&nbsp;|&nbsp;auto;&nbsp;/*&nbsp;default&nbsp;auto&nbsp;*/}</pre></blockquote><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。</p><h3 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 1.87em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">4.5 flex属性</h3><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.item&nbsp;{
&nbsp;&nbsp;flex:&nbsp;none&nbsp;|&nbsp;[&nbsp;&lt;&#39;flex-grow&#39;&gt;&nbsp;&lt;&#39;flex-shrink&#39;&gt;?&nbsp;||&nbsp;&lt;&#39;flex-basis&#39;&gt;&nbsp;]}</pre></blockquote><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。</p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。</p><h3 style="BORDER-TOP-STYLE: none; LIST-STYLE-TYPE: none; TEXT-DECORATION: none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(211,211,211) 1px solid; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0.2em; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 500 1.87em/21px Georgia, serif; BORDER-RIGHT-STYLE: none; PADDING-LEFT: 0px; MARGIN: 1.5em 0px 0.2em; WIDOWS: 1; BORDER-LEFT-STYLE: none; LETTER-SPACING: -0.03em; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">4.6 align-self属性</h3><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</p><blockquote style="LIST-STYLE-TYPE: none; OVERFLOW: auto; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 1em; TEXT-ALIGN: left; PADDING-TOP: 1em; FONT: 12px/21px Consolas, Monaco, &#39;Andale Mono&#39;, monospace; PADDING-LEFT: 1em; MARGIN: 2em; BORDER-LEFT: rgb(224,223,204) 0.3em solid; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 1em;  TEXT-INDENT: 0px; border-radius: 1em; text-shadow: white 0px 1px; -webkit-text-stroke-width: 0px"><pre class=" language-css" style="LIST-STYLE-TYPE: none; OVERFLOW: auto; FONT-SIZE: 1.2em; TEXT-DECORATION: none; BORDER-TOP: medium none; FONT-FAMILY: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; BORDER-RIGHT: medium none; BACKGROUND: rgb(245,242,240); WHITE-SPACE: pre; WORD-SPACING: normal; BORDER-BOTTOM: medium none; FONT-WEIGHT: normal; COLOR: black; PADDING-BOTTOM: 0.5em; DIRECTION: ltr; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0em; PADDING-LEFT: 0em; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-RIGHT: 0em; text-shadow: white 0px 1px; tab-size: 4">.item&nbsp;{
&nbsp;&nbsp;align-self:&nbsp;auto&nbsp;|&nbsp;flex-start&nbsp;|&nbsp;flex-end&nbsp;|&nbsp;center&nbsp;|&nbsp;baseline&nbsp;|&nbsp;stretch;}</pre></blockquote><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px"><img title="" style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: rgb(224,223,204) 0.3em solid; BORDER-RIGHT: rgb(224,223,204) 0.3em solid; BORDER-BOTTOM: rgb(224,223,204) 0.3em solid; FONT-WEIGHT: normal; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; FONT-STYLE: normal; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: rgb(224,223,204) 0.3em solid; PADDING-RIGHT: 0px; border-radius: 1em" alt="" src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071016.png"/></p><p style="LIST-STYLE-TYPE: none; TEXT-DECORATION: none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; WHITE-SPACE: normal; WORD-SPACING: 2px; BORDER-BOTTOM: medium none; TEXT-TRANSFORM: none; COLOR: rgb(17,17,17); PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; FONT: 1.6em/28px Georgia, serif; PADDING-LEFT: 0px; MARGIN: 1em 0px 0px 0.8em; BORDER-LEFT: medium none; WIDOWS: 1; LETTER-SPACING: 0px; PADDING-RIGHT: 0px; TEXT-INDENT: 0px; -webkit-text-stroke-width: 0px">该属性可能取6个值，除了auto，其他都与align-items属性完全一致。</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><h1>Flex 布局教程：实例篇</h1><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">你会看到，不管是什么布局，Flex往往都可以几行命令搞定。</p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071327.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">我只列出代码，详细的语法解释请查阅<a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html" target="_blank" style="margin: 0px; padding: 0px; list-style-type: none; border: none; color: rgb(17, 34, 51);">《Flex布局教程：语法篇》</a>。我的主要参考资料是<a href="http://davidwalsh.name/flexbox-dice" target="_blank" style="margin: 0px; padding: 0px; list-style-type: none; border: none; color: rgb(17, 34, 51);">Landon Schropp</a>的文章和<a href="http://philipwalton.github.io/solved-by-flexbox/" target="_blank" style="margin: 0px; padding: 0px; list-style-type: none; border: none; color: rgb(17, 34, 51);">Solved by Flexbox</a>。</p><h2 style="margin: 1.5em 0px 0.2em; padding: 0px 0px 0.2em; list-style-type: none; font-weight: 500; border-style: none none solid; border-bottom-width: 1px; border-bottom-color: rgb(211, 211, 211); font-size: 2.88em; letter-spacing: -0.03em; font-family: Georgia, serif; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">一、骰子的布局</h2><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">骰子的一面，最多可以放置9个点。</p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071328.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到<a href="http://codepen.io/LandonSchropp/pen/KpzzGo" target="_blank" style="margin: 0px; padding: 0px; list-style-type: none; border: none; color: rgb(17, 34, 51);">codepen</a>查看Demo。</p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071329.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">如果不加说明，本节的HTML模板一律如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-markup" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">&lt;div&nbsp;class=&quot;box&quot;&gt;
&nbsp;&nbsp;&lt;span&nbsp;class=&quot;item&quot;&gt;&lt;/span&gt;&lt;/div&gt;</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。</p><h3 style="margin: 1.5em 0px 0.2em; padding: 0px 0px 0.2em; list-style-type: none; font-weight: 500; border-style: none none solid; border-bottom-width: 1px; border-bottom-color: rgb(211, 211, 211); font-size: 1.87em; letter-spacing: -0.03em; font-family: Georgia, serif; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">1.1 单项目</h3><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。</p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071301.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">设置项目的对齐方式，就能实现居中对齐和右对齐。</p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071302.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;justify-content:&nbsp;center;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071303.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;justify-content:&nbsp;flex-end;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">设置交叉轴对齐方式，可以垂直移动主轴。</p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071304.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;align-items:&nbsp;center;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071305.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;justify-content:&nbsp;center;
&nbsp;&nbsp;align-items:&nbsp;center;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071306.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;justify-content:&nbsp;center;
&nbsp;&nbsp;align-items:&nbsp;flex-end;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071307.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;justify-content:&nbsp;flex-end;
&nbsp;&nbsp;align-items:&nbsp;flex-end;}</pre></blockquote><h3 style="margin: 1.5em 0px 0.2em; padding: 0px 0px 0.2em; list-style-type: none; font-weight: 500; border-style: none none solid; border-bottom-width: 1px; border-bottom-color: rgb(211, 211, 211); font-size: 1.87em; letter-spacing: -0.03em; font-family: Georgia, serif; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">1.2 双项目</h3><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071308.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;justify-content:&nbsp;space-between;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071309.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;flex-direction:&nbsp;column;
&nbsp;&nbsp;justify-content:&nbsp;space-between;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071310.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;flex-direction:&nbsp;column;
&nbsp;&nbsp;justify-content:&nbsp;space-between;
&nbsp;&nbsp;align-items:&nbsp;center;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071311.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;flex-direction:&nbsp;column;
&nbsp;&nbsp;justify-content:&nbsp;space-between;
&nbsp;&nbsp;align-items:&nbsp;flex-end;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071312.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;}.item:nth-child(2)&nbsp;{
&nbsp;&nbsp;align-self:&nbsp;center;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071313.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;justify-content:&nbsp;space-between;}.item:nth-child(2)&nbsp;{
&nbsp;&nbsp;align-self:&nbsp;flex-end;}</pre></blockquote><h3 style="margin: 1.5em 0px 0.2em; padding: 0px 0px 0.2em; list-style-type: none; font-weight: 500; border-style: none none solid; border-bottom-width: 1px; border-bottom-color: rgb(211, 211, 211); font-size: 1.87em; letter-spacing: -0.03em; font-family: Georgia, serif; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">1.3 三项目</h3><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071314.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;}.item:nth-child(2)&nbsp;{
&nbsp;&nbsp;align-self:&nbsp;center;}.item:nth-child(3)&nbsp;{
&nbsp;&nbsp;align-self:&nbsp;flex-end;}</pre></blockquote><h3 style="margin: 1.5em 0px 0.2em; padding: 0px 0px 0.2em; list-style-type: none; font-weight: 500; border-style: none none solid; border-bottom-width: 1px; border-bottom-color: rgb(211, 211, 211); font-size: 1.87em; letter-spacing: -0.03em; font-family: Georgia, serif; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">1.4 四项目</h3><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071315.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;flex-wrap:&nbsp;wrap;
&nbsp;&nbsp;justify-content:&nbsp;flex-end;
&nbsp;&nbsp;align-content:&nbsp;space-between;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071316.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">HTML代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-markup" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">&lt;div&nbsp;class=&quot;box&quot;&gt;
&nbsp;&nbsp;&lt;div&nbsp;class=&quot;column&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class=&quot;item&quot;&gt;&lt;/span&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class=&quot;item&quot;&gt;&lt;/span&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;div&nbsp;class=&quot;column&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class=&quot;item&quot;&gt;&lt;/span&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class=&quot;item&quot;&gt;&lt;/span&gt;
&nbsp;&nbsp;&lt;/div&gt;&lt;/div&gt;</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">CSS代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;flex-wrap:&nbsp;wrap;
&nbsp;&nbsp;align-content:&nbsp;space-between;}.column&nbsp;{
&nbsp;&nbsp;flex-basis:&nbsp;100%;
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;justify-content:&nbsp;space-between;}</pre></blockquote><h3 style="margin: 1.5em 0px 0.2em; padding: 0px 0px 0.2em; list-style-type: none; font-weight: 500; border-style: none none solid; border-bottom-width: 1px; border-bottom-color: rgb(211, 211, 211); font-size: 1.87em; letter-spacing: -0.03em; font-family: Georgia, serif; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">1.5 六项目</h3><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071317.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;flex-wrap:&nbsp;wrap;
&nbsp;&nbsp;align-content:&nbsp;space-between;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071318.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;flex-direction:&nbsp;column;
&nbsp;&nbsp;flex-wrap:&nbsp;wrap;
&nbsp;&nbsp;align-content:&nbsp;space-between;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071319.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">HTML代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-markup" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">&lt;div&nbsp;class=&quot;box&quot;&gt;
&nbsp;&nbsp;&lt;div&nbsp;class=&quot;row&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class=&quot;item&quot;&gt;&lt;/span&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class=&quot;item&quot;&gt;&lt;/span&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class=&quot;item&quot;&gt;&lt;/span&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;div&nbsp;class=&quot;row&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class=&quot;item&quot;&gt;&lt;/span&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;div&nbsp;class=&quot;row&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class=&quot;item&quot;&gt;&lt;/span&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class=&quot;item&quot;&gt;&lt;/span&gt;
&nbsp;&nbsp;&lt;/div&gt;&lt;/div&gt;</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">CSS代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;flex-wrap:&nbsp;wrap;}.row{
&nbsp;&nbsp;flex-basis:&nbsp;100%;
&nbsp;&nbsp;display:flex;}.row:nth-child(2){
&nbsp;&nbsp;justify-content:&nbsp;center;}.row:nth-child(3){
&nbsp;&nbsp;justify-content:&nbsp;space-between;}</pre></blockquote><h3 style="margin: 1.5em 0px 0.2em; padding: 0px 0px 0.2em; list-style-type: none; font-weight: 500; border-style: none none solid; border-bottom-width: 1px; border-bottom-color: rgb(211, 211, 211); font-size: 1.87em; letter-spacing: -0.03em; font-family: Georgia, serif; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">1.6 九项目</h3><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071320.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.box&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;flex-wrap:&nbsp;wrap;}</pre></blockquote><h2 style="margin: 1.5em 0px 0.2em; padding: 0px 0px 0.2em; list-style-type: none; font-weight: 500; border-style: none none solid; border-bottom-width: 1px; border-bottom-color: rgb(211, 211, 211); font-size: 2.88em; letter-spacing: -0.03em; font-family: Georgia, serif; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">二、网格布局</h2><h3 style="margin: 1.5em 0px 0.2em; padding: 0px 0px 0.2em; list-style-type: none; font-weight: 500; border-style: none none solid; border-bottom-width: 1px; border-bottom-color: rgb(211, 211, 211); font-size: 1.87em; letter-spacing: -0.03em; font-family: Georgia, serif; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">2.1 基本网格布局</h3><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。</p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071321.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">HTML代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-markup" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">&lt;div&nbsp;class=&quot;Grid&quot;&gt;
&nbsp;&nbsp;&lt;div&nbsp;class=&quot;Grid-cell&quot;&gt;...&lt;/div&gt;
&nbsp;&nbsp;&lt;div&nbsp;class=&quot;Grid-cell&quot;&gt;...&lt;/div&gt;
&nbsp;&nbsp;&lt;div&nbsp;class=&quot;Grid-cell&quot;&gt;...&lt;/div&gt;&lt;/div&gt;</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">CSS代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.Grid&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;}.Grid-cell&nbsp;{
&nbsp;&nbsp;flex:&nbsp;1;}</pre></blockquote><h3 style="margin: 1.5em 0px 0.2em; padding: 0px 0px 0.2em; list-style-type: none; font-weight: 500; border-style: none none solid; border-bottom-width: 1px; border-bottom-color: rgb(211, 211, 211); font-size: 1.87em; letter-spacing: -0.03em; font-family: Georgia, serif; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">2.2 百分比布局</h3><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。</p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071322.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">HTML代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-markup" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">&lt;div&nbsp;class=&quot;Grid&quot;&gt;
&nbsp;&nbsp;&lt;div&nbsp;class=&quot;Grid-cell&nbsp;u-1of4&quot;&gt;...&lt;/div&gt;
&nbsp;&nbsp;&lt;div&nbsp;class=&quot;Grid-cell&quot;&gt;...&lt;/div&gt;
&nbsp;&nbsp;&lt;div&nbsp;class=&quot;Grid-cell&nbsp;u-1of3&quot;&gt;...&lt;/div&gt;&lt;/div&gt;</pre></blockquote><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.Grid&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;}.Grid-cell&nbsp;{
&nbsp;&nbsp;flex:&nbsp;1;}.Grid-cell.u-full&nbsp;{
&nbsp;&nbsp;flex:&nbsp;0&nbsp;0&nbsp;100%;}.Grid-cell.u-1of2&nbsp;{
&nbsp;&nbsp;flex:&nbsp;0&nbsp;0&nbsp;50%;}.Grid-cell.u-1of3&nbsp;{
&nbsp;&nbsp;flex:&nbsp;0&nbsp;0&nbsp;33.3333%;}.Grid-cell.u-1of4&nbsp;{
&nbsp;&nbsp;flex:&nbsp;0&nbsp;0&nbsp;25%;}</pre></blockquote><h2 style="margin: 1.5em 0px 0.2em; padding: 0px 0px 0.2em; list-style-type: none; font-weight: 500; border-style: none none solid; border-bottom-width: 1px; border-bottom-color: rgb(211, 211, 211); font-size: 2.88em; letter-spacing: -0.03em; font-family: Georgia, serif; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">三、圣杯布局</h2><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><a href="https://en.wikipedia.org/wiki/Holy_Grail_(web_design)" target="_blank" style="margin: 0px; padding: 0px; list-style-type: none; border: none; color: rgb(17, 34, 51);">圣杯布局</a>（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。</p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071323.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">HTML代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-markup" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">&lt;body&nbsp;class=&quot;HolyGrail&quot;&gt;
&nbsp;&nbsp;&lt;header&gt;...&lt;/header&gt;
&nbsp;&nbsp;&lt;div&nbsp;class=&quot;HolyGrail-body&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&nbsp;class=&quot;HolyGrail-content&quot;&gt;...&lt;/main&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&nbsp;class=&quot;HolyGrail-nav&quot;&gt;...&lt;/nav&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;aside&nbsp;class=&quot;HolyGrail-ads&quot;&gt;...&lt;/aside&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;footer&gt;...&lt;/footer&gt;&lt;/body&gt;</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">CSS代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.HolyGrail&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;min-height:&nbsp;100vh;
&nbsp;&nbsp;flex-direction:&nbsp;column;}header,
footer&nbsp;{
&nbsp;&nbsp;flex:&nbsp;1;}.HolyGrail-body&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;flex:&nbsp;1;}.HolyGrail-content&nbsp;{
&nbsp;&nbsp;flex:&nbsp;1;}.HolyGrail-nav,&nbsp;.HolyGrail-ads&nbsp;{
&nbsp;&nbsp;/*&nbsp;两个边栏的宽度设为12em&nbsp;*/
&nbsp;&nbsp;flex:&nbsp;0&nbsp;0&nbsp;12em;}.HolyGrail-nav&nbsp;{
&nbsp;&nbsp;/*&nbsp;导航放到最左边&nbsp;*/
&nbsp;&nbsp;order:&nbsp;-1;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">如果是小屏幕，躯干的三栏自动变为垂直叠加。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">@media&nbsp;(max-width:&nbsp;768px)&nbsp;{
&nbsp;&nbsp;.HolyGrail-body&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;flex-direction:&nbsp;column;
&nbsp;&nbsp;&nbsp;&nbsp;flex:&nbsp;1;
&nbsp;&nbsp;}
&nbsp;&nbsp;.HolyGrail-nav,
&nbsp;&nbsp;.HolyGrail-ads,
&nbsp;&nbsp;.HolyGrail-content&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;flex:&nbsp;auto;
&nbsp;&nbsp;}}</pre></blockquote><h2 style="margin: 1.5em 0px 0.2em; padding: 0px 0px 0.2em; list-style-type: none; font-weight: 500; border-style: none none solid; border-bottom-width: 1px; border-bottom-color: rgb(211, 211, 211); font-size: 2.88em; letter-spacing: -0.03em; font-family: Georgia, serif; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">四、输入框的布局</h2><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">我们常常需要在输入框的前方添加提示，后方添加按钮。</p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071324.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">HTML代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-markup" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">&lt;div&nbsp;class=&quot;InputAddOn&quot;&gt;
&nbsp;&nbsp;&lt;span&nbsp;class=&quot;InputAddOn-item&quot;&gt;...&lt;/span&gt;
&nbsp;&nbsp;&lt;input&nbsp;class=&quot;InputAddOn-field&quot;&gt;
&nbsp;&nbsp;&lt;button&nbsp;class=&quot;InputAddOn-item&quot;&gt;...&lt;/button&gt;&lt;/div&gt;</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">CSS代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.InputAddOn&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;}.InputAddOn-field&nbsp;{
&nbsp;&nbsp;flex:&nbsp;1;}</pre></blockquote><h2 style="margin: 1.5em 0px 0.2em; padding: 0px 0px 0.2em; list-style-type: none; font-weight: 500; border-style: none none solid; border-bottom-width: 1px; border-bottom-color: rgb(211, 211, 211); font-size: 2.88em; letter-spacing: -0.03em; font-family: Georgia, serif; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">五、悬挂式布局</h2><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">有时，主栏的左侧或右侧，需要添加一个图片栏。</p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071325.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">HTML代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-markup" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">&lt;div&nbsp;class=&quot;Media&quot;&gt;
&nbsp;&nbsp;&lt;img&nbsp;class=&quot;Media-figure&quot;&nbsp;src=&quot;&quot;&nbsp;alt=&quot;&quot;&gt;
&nbsp;&nbsp;&lt;p&nbsp;class=&quot;Media-body&quot;&gt;...&lt;/p&gt;&lt;/div&gt;</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">CSS代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.Media&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;align-items:&nbsp;flex-start;}.Media-figure&nbsp;{
&nbsp;&nbsp;margin-right:&nbsp;1em;}.Media-body&nbsp;{
&nbsp;&nbsp;flex:&nbsp;1;}</pre></blockquote><h3 style="margin: 1.5em 0px 0.2em; padding: 0px 0px 0.2em; list-style-type: none; font-weight: 500; border-style: none none solid; border-bottom-width: 1px; border-bottom-color: rgb(211, 211, 211); font-size: 1.87em; letter-spacing: -0.03em; font-family: Georgia, serif; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">六、固定的底栏</h3><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。</p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);"><img src="http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071326.png" alt="" title="" style="margin: 0px; padding: 0px; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); border-radius: 1em;"/></p><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">HTML代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-markup" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">&lt;body&nbsp;class=&quot;Site&quot;&gt;
&nbsp;&nbsp;&lt;header&gt;...&lt;/header&gt;
&nbsp;&nbsp;&lt;main&nbsp;class=&quot;Site-content&quot;&gt;...&lt;/main&gt;
&nbsp;&nbsp;&lt;footer&gt;...&lt;/footer&gt;&lt;/body&gt;</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">CSS代码如下。</p><blockquote style="margin: 2em; padding: 1em; list-style-type: none; border: 0.3em solid rgb(224, 223, 204); color: rgb(17, 17, 17); border-radius: 1em; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; text-shadow: white 0px 1px; overflow: auto; font-size: 12px; letter-spacing: -0.12px; line-height: 21.6px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 242, 240);"><pre class=" language-css" style="margin-top: 0px; margin-bottom: 0px; padding: 0em 0em 0.5em; list-style-type: none; border: none; color: black; text-shadow: white 0px 1px; font-family: Consolas, Monaco, &#39;Andale Mono&#39;, monospace; direction: ltr; word-spacing: normal; font-size: 1.2em; tab-size: 4; overflow: auto; background-color: rgb(245, 242, 240);">.Site&nbsp;{
&nbsp;&nbsp;display:&nbsp;flex;
&nbsp;&nbsp;min-height:&nbsp;100vh;
&nbsp;&nbsp;flex-direction:&nbsp;column;}.Site-content&nbsp;{
&nbsp;&nbsp;flex:&nbsp;1;}</pre></blockquote><p style="margin-top: 1em; margin-bottom: 0px; margin-left: 0.8em; padding: 0px; list-style-type: none; border: none; color: rgb(17, 17, 17); font-size: 1.6em; line-height: 28.8px; font-family: Georgia, serif; letter-spacing: -0.12px; white-space: normal; word-spacing: 2.4px; background-color: rgb(245, 245, 213);">（完）</p><p>&nbsp;<br/></p>