Начало Каталог Помощ
Регистрация Вход
root
/
myBlogs_2
1
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
Клон: master
Клонове Маркери
myBlogs_2
/
dist
/
CSS
/
2018_10_21_03.html

2018_10_21_03.html 91 KB
Постоянна връзка История Директен файл

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en-US">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta name="viewport" content="width=device-width,initial-scale=1">
    6. 

  6.     <title>box-flex使用说明 | 看白鹿的博客</title>
    7. 

  7.     <meta name="description" content="只有敢于尝试,才能品味人生.">
    8. 

  8.     <link rel="icon" href="/logo.png">
    9. 

  9.     
    10. 

  10.     <link rel="preload" href="/assets/css/0.styles.a2e0d1a2.css" as="style"><link rel="preload" href="/assets/js/app.9558671e.js" as="script"><link rel="preload" href="/assets/js/3.515b53d6.js" as="script"><link rel="preload" href="/assets/js/66.a56465a2.js" as="script"><link rel="preload" href="/assets/js/13.ff4ae139.js" as="script"><link rel="preload" href="/assets/js/14.836a5132.js" as="script"><link rel="preload" href="/assets/js/15.6f048cfc.js" as="script"><link rel="preload" href="/assets/js/8.be3a48f4.js" as="script"><link rel="preload" href="/assets/js/9.db31af68.js" as="script"><link rel="preload" href="/assets/js/10.f724d0ba.js" as="script"><link rel="preload" href="/assets/js/11.8006ec70.js" as="script"><link rel="preload" href="/assets/js/12.005e0dbb.js" as="script"><link rel="prefetch" href="/assets/js/100.5834781e.js"><link rel="prefetch" href="/assets/js/101.21b366b3.js"><link rel="prefetch" href="/assets/js/102.2ae747f3.js"><link rel="prefetch" href="/assets/js/103.093cd825.js"><link rel="prefetch" href="/assets/js/104.22c3355f.js"><link rel="prefetch" href="/assets/js/105.0d2c6d27.js"><link rel="prefetch" href="/assets/js/106.57e86379.js"><link rel="prefetch" href="/assets/js/107.3859929f.js"><link rel="prefetch" href="/assets/js/108.305f4abf.js"><link rel="prefetch" href="/assets/js/109.bfba36ff.js"><link rel="prefetch" href="/assets/js/110.b67873d6.js"><link rel="prefetch" href="/assets/js/111.39112c80.js"><link rel="prefetch" href="/assets/js/112.6452e3ad.js"><link rel="prefetch" href="/assets/js/113.60c65ce6.js"><link rel="prefetch" href="/assets/js/114.955a027b.js"><link rel="prefetch" href="/assets/js/115.dd036aff.js"><link rel="prefetch" href="/assets/js/116.14835fbf.js"><link rel="prefetch" href="/assets/js/117.c79a8c90.js"><link rel="prefetch" href="/assets/js/118.c0e2c0d9.js"><link rel="prefetch" href="/assets/js/16.d91b81f0.js"><link rel="prefetch" href="/assets/js/17.f2e82e43.js"><link rel="prefetch" href="/assets/js/18.4e4cd572.js"><link rel="prefetch" href="/assets/js/19.3b203b0f.js"><link rel="prefetch" href="/assets/js/20.7a5c58ab.js"><link rel="prefetch" href="/assets/js/21.97e7a824.js"><link rel="prefetch" href="/assets/js/22.c2c71341.js"><link rel="prefetch" href="/assets/js/23.af6cefca.js"><link rel="prefetch" href="/assets/js/24.8a375cba.js"><link rel="prefetch" href="/assets/js/25.238ba08c.js"><link rel="prefetch" href="/assets/js/26.9c2191ba.js"><link rel="prefetch" href="/assets/js/27.aa86acfc.js"><link rel="prefetch" href="/assets/js/28.858301d1.js"><link rel="prefetch" href="/assets/js/29.808ea0c3.js"><link rel="prefetch" href="/assets/js/30.e9907d4a.js"><link rel="prefetch" href="/assets/js/31.c87c923f.js"><link rel="prefetch" href="/assets/js/32.4b1edff8.js"><link rel="prefetch" href="/assets/js/33.73f494d0.js"><link rel="prefetch" href="/assets/js/34.50a183ad.js"><link rel="prefetch" href="/assets/js/35.7df7ce1e.js"><link rel="prefetch" href="/assets/js/36.349910a5.js"><link rel="prefetch" href="/assets/js/37.d0f9f5f8.js"><link rel="prefetch" href="/assets/js/38.fb3a1bd1.js"><link rel="prefetch" href="/assets/js/39.601de504.js"><link rel="prefetch" href="/assets/js/4.389f8161.js"><link rel="prefetch" href="/assets/js/40.08558ea8.js"><link rel="prefetch" href="/assets/js/41.9cab78b4.js"><link rel="prefetch" href="/assets/js/42.570f67c5.js"><link rel="prefetch" href="/assets/js/43.41766314.js"><link rel="prefetch" href="/assets/js/44.61865afc.js"><link rel="prefetch" href="/assets/js/45.b4d6c042.js"><link rel="prefetch" href="/assets/js/46.ab1face5.js"><link rel="prefetch" href="/assets/js/47.cfc26f59.js"><link rel="prefetch" href="/assets/js/48.b14654a7.js"><link rel="prefetch" href="/assets/js/49.6598379f.js"><link rel="prefetch" href="/assets/js/5.d4651190.js"><link rel="prefetch" href="/assets/js/50.1278be5c.js"><link rel="prefetch" href="/assets/js/51.7fd917c5.js"><link rel="prefetch" href="/assets/js/52.25b15acf.js"><link rel="prefetch" href="/assets/js/53.2e62bed5.js"><link rel="prefetch" href="/assets/js/54.af31649a.js"><link rel="prefetch" href="/assets/js/55.e6c76277.js"><link rel="prefetch" href="/assets/js/56.59b2e0fa.js"><link rel="prefetch" href="/assets/js/57.e75a4f7d.js"><link rel="prefetch" href="/assets/js/58.f45feb68.js"><link rel="prefetch" href="/assets/js/59.21a7b545.js"><link rel="prefetch" href="/assets/js/6.4bfb03ad.js"><link rel="prefetch" href="/assets/js/60.d5bd9a2b.js"><link rel="prefetch" href="/assets/js/61.dc32bd44.js"><link rel="prefetch" href="/assets/js/62.552676dd.js"><link rel="prefetch" href="/assets/js/63.86db7a84.js"><link rel="prefetch" href="/assets/js/64.eb8d2554.js"><link rel="prefetch" href="/assets/js/65.405a53d2.js"><link rel="prefetch" href="/assets/js/67.8184d78b.js"><link rel="prefetch" href="/assets/js/68.c56c64fe.js"><link rel="prefetch" href="/assets/js/69.6b654ce5.js"><link rel="prefetch" href="/assets/js/7.5373c3ff.js"><link rel="prefetch" href="/assets/js/70.9a186317.js"><link rel="prefetch" href="/assets/js/71.ac0a8a64.js"><link rel="prefetch" href="/assets/js/72.b10eb62e.js"><link rel="prefetch" href="/assets/js/73.8d0ed403.js"><link rel="prefetch" href="/assets/js/74.903a6ec9.js"><link rel="prefetch" href="/assets/js/75.b4770f9b.js"><link rel="prefetch" href="/assets/js/76.38bc39a3.js"><link rel="prefetch" href="/assets/js/77.f9865d6b.js"><link rel="prefetch" href="/assets/js/78.10f6bd6c.js"><link rel="prefetch" href="/assets/js/79.a9255312.js"><link rel="prefetch" href="/assets/js/80.02b17ee8.js"><link rel="prefetch" href="/assets/js/81.a1112357.js"><link rel="prefetch" href="/assets/js/82.4568ca67.js"><link rel="prefetch" href="/assets/js/83.49710233.js"><link rel="prefetch" href="/assets/js/84.533366f2.js"><link rel="prefetch" href="/assets/js/85.97dbc2cd.js"><link rel="prefetch" href="/assets/js/86.6514a49a.js"><link rel="prefetch" href="/assets/js/87.0c59077d.js"><link rel="prefetch" href="/assets/js/88.1df289b4.js"><link rel="prefetch" href="/assets/js/89.7269909c.js"><link rel="prefetch" href="/assets/js/90.272a0e37.js"><link rel="prefetch" href="/assets/js/91.72195388.js"><link rel="prefetch" href="/assets/js/92.f6e0c47a.js"><link rel="prefetch" href="/assets/js/93.36e0cacd.js"><link rel="prefetch" href="/assets/js/94.f5c4f682.js"><link rel="prefetch" href="/assets/js/95.8408e244.js"><link rel="prefetch" href="/assets/js/96.a71354b0.js"><link rel="prefetch" href="/assets/js/97.4fb8b67b.js"><link rel="prefetch" href="/assets/js/98.785be908.js"><link rel="prefetch" href="/assets/js/99.219eebc3.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.431cfe91.js">
    11. 

  11.     <link rel="stylesheet" href="/assets/css/0.styles.a2e0d1a2.css">
    12. 

  12.   </head>
    13. 

  13.   <body>
    14. 

  14.     <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">看白鹿的博客</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/CSS/" class="nav-link router-link-active">CSS</a></li><li class="dropdown-item"><!----> <a href="/FLUTTER/" class="nav-link">flutter</a></li><li class="dropdown-item"><!----> <a href="/GIT/" class="nav-link">GIT</a></li><li class="dropdown-item"><!----> <a href="/JavaScript/" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/REACT/" class="nav-link">react</a></li><li class="dropdown-item"><!----> <a href="/VUE/" class="nav-link">vue</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后台" class="dropdown-title"><span class="title">后台</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/NODE/" class="nav-link">node</a></li><li class="dropdown-item"><!----> <a href="/UBUNTU/" class="nav-link">ubuntu</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/IDE/" class="nav-link">IDE</a></li><li class="dropdown-item"><!----> <a href="/About/WHY.html" class="nav-link">待了解</a></li><li class="dropdown-item"><!----> <a href="/INTERVIEW/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/hello/" class="nav-link">你好</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/Johnhong9527" target="_blank" rel="noopener noreferrer" class="nav-link external">
    15. 

  15.   GitHub
    16. 

  16.   <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/CSS/" class="nav-link router-link-active">CSS</a></li><li class="dropdown-item"><!----> <a href="/FLUTTER/" class="nav-link">flutter</a></li><li class="dropdown-item"><!----> <a href="/GIT/" class="nav-link">GIT</a></li><li class="dropdown-item"><!----> <a href="/JavaScript/" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/REACT/" class="nav-link">react</a></li><li class="dropdown-item"><!----> <a href="/VUE/" class="nav-link">vue</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后台" class="dropdown-title"><span class="title">后台</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/NODE/" class="nav-link">node</a></li><li class="dropdown-item"><!----> <a href="/UBUNTU/" class="nav-link">ubuntu</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/IDE/" class="nav-link">IDE</a></li><li class="dropdown-item"><!----> <a href="/About/WHY.html" class="nav-link">待了解</a></li><li class="dropdown-item"><!----> <a href="/INTERVIEW/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/hello/" class="nav-link">你好</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/Johnhong9527" target="_blank" rel="noopener noreferrer" class="nav-link external">
    17. 

  17.   GitHub
    18. 

  18.   <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/CSS/" class="sidebar-link">CSS 目录</a></li><li><a href="/CSS/cases.html" class="sidebar-link">案例收集</a></li><li><a href="/CSS/2018_10_21_01.html" class="sidebar-link">1px 边框问题</a></li><li><a href="/CSS/2018_10_21_02.html" class="sidebar-link">border-style</a></li><li><a href="/CSS/2018_10_21_03.html" class="active sidebar-link">box-flex使用说明</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_03.html#_1-box-flex属性" class="sidebar-link">1.box-flex属性</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_03.html#_2-box属性" class="sidebar-link">2.box属性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_03.html#a-box-orient" class="sidebar-link">a.box-orient</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_03.html#b-box-direction" class="sidebar-link">b.box-direction</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_03.html#c-box-align" class="sidebar-link">c.box-align</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_03.html#d-box-pack" class="sidebar-link">d.box-pack</a></li></ul></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_03.html#box-flex小结" class="sidebar-link">box-flex小结</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_03.html#用法" class="sidebar-link">用法</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_03.html#box" class="sidebar-link">box</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_03.html#box-orient" class="sidebar-link">box-orient</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_03.html#box-direction" class="sidebar-link">box-direction</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_03.html#box-align" class="sidebar-link">box-align</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_03.html#box-pack" class="sidebar-link">box-pack</a></li></ul></li></ul></li><li><a href="/CSS/2018_10_21_04.html" class="sidebar-link">css动画</a></li><li><a href="/CSS/2018_10_21_05.html" class="sidebar-link">加速网站的最佳实践</a></li><li><a href="/CSS/principle.html" class="sidebar-link">CSS盒子</a></li><li><a href="/CSS/2019_04_11_01.html" class="sidebar-link">Grid 布局教程</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="box-flex使用说明"><a href="#box-flex使用说明" class="header-anchor">#</a> box-flex使用说明</h1> <h2 id="_1-box-flex属性"><a href="#_1-box-flex属性" class="header-anchor">#</a> 1.box-flex属性</h2> <p>box-flex主要让子容器针对父容器的宽度按一定规则进行划分</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>acticle</span><span class="token punctuation">&gt;</span></span>
    19. 

  19.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>01<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    20. 

  20.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>02<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    21. 

  21.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>03<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    22. 

  22. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>acticle</span><span class="token punctuation">&gt;</span></span>
    23. 

  23. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">acticle</span><span class="token punctuation">{</span>
    24. 

  24.   <span class="token property">display</span><span class="token punctuation">:</span> box<span class="token punctuation">;</span>
    25. 

  25.   <span class="token property">display</span><span class="token punctuation">:</span> -moz-box<span class="token punctuation">;</span>
    26. 

  26.   <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span>
    27. 

  27. 

  28.   <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    29. 

  29.   <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
    30. 

  30. <span class="token punctuation">}</span>
    31. 

  31. <span class="token selector">acticle section</span><span class="token punctuation">{</span>
    32. 

  32.   <span class="token property">line-height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
    33. 

  33.   <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    34. 

  34.   <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>
    35. 

  35.   <span class="token property">text-shadow</span><span class="token punctuation">:</span> 1px 1px 1px <span class="token function">rgb</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span>
    36. 

  36. <span class="token punctuation">}</span>
    37. 

  37. <span class="token selector">acticle section:nth-child(1)</span><span class="token punctuation">{</span>
    38. 

  38.   <span class="token property">background</span><span class="token punctuation">:</span>orange<span class="token punctuation">;</span>
    39. 

  39.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    40. 

  40.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    41. 

  41.   <span class="token property">box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    42. 

  42. <span class="token punctuation">}</span>
    43. 

  43. <span class="token selector">acticle section:nth-child(2)</span><span class="token punctuation">{</span>
    44. 

  44.   <span class="token property">background</span><span class="token punctuation">:</span>purple<span class="token punctuation">;</span>
    45. 

  45.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    46. 

  46.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    47. 

  47.   <span class="token property">box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    48. 

  48. <span class="token punctuation">}</span>
    49. 

  49. <span class="token selector">acticle section:nth-child(3)</span><span class="token punctuation">{</span>
    50. 

  50.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    51. 

  51.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    52. 

  52.   <span class="token property">box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    53. 

  53.   <span class="token property">background</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
    54. 

  54. <span class="token punctuation">}</span>
    55. 

  55. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><div class="acticle_1"><section>01</section> <section>02</section> <section>03</section></div> <p>    必须给父容器wrap定义css属性<code>display:box</code>其子容器才可以进行划分(如果定了<code>display:box</code>则该容器则定义为了内联元素，使用<code>margin:0px auto</code>让其居中是无效的，要想使其居中只能通过它的父容器的<code>text-align:center</code>);</p> <p>    分别给<code>sectionOne</code>、<code>sectionTwo</code>、<code>sectionThree</code>的<code>box-flex</code>设置了3、2、1，也就是说这三个子容器将父容器wrap的宽度600px分为6份，<code>sectionOne</code>占居父结构宽度的3/6即300px，<code>sectionOne</code>占居父结构宽度的2/6即200px，<code>sectionThree</code>占居父结构宽度的1/6即100px。</p> <p>    以上是按比例数进行划分分配的，如果其中一个子容器或多个子容器设置了固定宽度又会怎样划分那？</p> <p>    如果其中一个子容器或多个子容器设置了固定宽度，其它子容器没有设置，其计算方式是这样的：子容器如果设置了固定宽度值，该子容器则直接应用设置的宽度值，其它没有设置的则再父容器的宽度基础上减去子容器设置的固定宽度，在剩下的宽度基础上按一定比例进行划分分配。</p> <p>    请看下面代码:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>acticle</span><span class="token punctuation">&gt;</span></span>
    56. 

  56.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>01<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    57. 

  57.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>02<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    58. 

  58.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>03<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    59. 

  59. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>acticle</span><span class="token punctuation">&gt;</span></span>
    60. 

  60. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">acticle</span><span class="token punctuation">{</span>
    61. 

  61.   <span class="token property">display</span><span class="token punctuation">:</span> box<span class="token punctuation">;</span>
    62. 

  62.   <span class="token property">display</span><span class="token punctuation">:</span> -moz-box<span class="token punctuation">;</span>
    63. 

  63.   <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span>
    64. 

  64. 

  65.   <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    66. 

  66.   <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
    67. 

  67. <span class="token punctuation">}</span>
    68. 

  68. <span class="token selector">acticle section</span><span class="token punctuation">{</span>
    69. 

  69.   <span class="token property">line-height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
    70. 

  70.   <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    71. 

  71.   <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>
    72. 

  72.   <span class="token property">text-shadow</span><span class="token punctuation">:</span> 1px 1px 1px <span class="token function">rgb</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span>
    73. 

  73. <span class="token punctuation">}</span>
    74. 

  74. <span class="token selector">acticle section:nth-child(1)</span><span class="token punctuation">{</span>
    75. 

  75.   <span class="token property">background</span><span class="token punctuation">:</span>orange<span class="token punctuation">;</span>
    76. 

  76.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    77. 

  77.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    78. 

  78.   <span class="token property">box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    79. 

  79. <span class="token punctuation">}</span>
    80. 

  80. <span class="token selector">acticle section:nth-child(2)</span><span class="token punctuation">{</span>
    81. 

  81.   <span class="token property">background</span><span class="token punctuation">:</span>purple<span class="token punctuation">;</span>
    82. 

  82.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    83. 

  83.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    84. 

  84.   <span class="token property">box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    85. 

  85. <span class="token punctuation">}</span>
    86. 

  86. <span class="token selector">acticle section:nth-child(3)</span><span class="token punctuation">{</span>
    87. 

  87.   <span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
    88. 

  88.   <span class="token property">background</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
    89. 

  89. <span class="token punctuation">}</span>
    90. 

  90. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><div class="acticle_2"><section>01</section> <section>02</section> <section>03</section></div> <p>    sectionThree设置了固定宽度为200px，父容器的宽度600px减去改子容器的200px还剩下400px，这400px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即300px,sectionTwo占居1/4即100px。</p> <p>    在以上代码的基础上给sectionTwo子容器添加margin:0px 50px使子容器之间产生一定的间隔其宽度又如何进行分配划分的那？接着看</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>acticle</span><span class="token punctuation">&gt;</span></span>
    91. 

  91.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>01<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    92. 

  92.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>02<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    93. 

  93.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>03<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    94. 

  94. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>acticle</span><span class="token punctuation">&gt;</span></span>
    95. 

  95. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">acticle</span><span class="token punctuation">{</span>
    96. 

  96.   <span class="token property">display</span><span class="token punctuation">:</span> box<span class="token punctuation">;</span>
    97. 

  97.   <span class="token property">display</span><span class="token punctuation">:</span> -moz-box<span class="token punctuation">;</span>
    98. 

  98.   <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span>
    99. 

  99. 

  100.   <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    101. 

  101.   <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
    102. 

  102. <span class="token punctuation">}</span>
    103. 

  103. <span class="token selector">acticle section</span><span class="token punctuation">{</span>
    104. 

  104.   <span class="token property">line-height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
    105. 

  105.   <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    106. 

  106.   <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>
    107. 

  107.   <span class="token property">text-shadow</span><span class="token punctuation">:</span> 1px 1px 1px <span class="token function">rgb</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span>
    108. 

  108. <span class="token punctuation">}</span>
    109. 

  109. <span class="token selector">acticle section:nth-child(1)</span><span class="token punctuation">{</span>
    110. 

  110.   <span class="token property">background</span><span class="token punctuation">:</span>orange<span class="token punctuation">;</span>
    111. 

  111.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    112. 

  112.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    113. 

  113.   <span class="token property">box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    114. 

  114. <span class="token punctuation">}</span>
    115. 

  115. <span class="token selector">acticle section:nth-child(2)</span><span class="token punctuation">{</span>
    116. 

  116.   <span class="token property">background</span><span class="token punctuation">:</span>purple<span class="token punctuation">;</span>
    117. 

  117.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    118. 

  118.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    119. 

  119.   <span class="token property">box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    120. 

  120.   <span class="token comment">/*添加margin属性*/</span>
    121. 

  121.   <span class="token property">margin</span><span class="token punctuation">:</span>0 50px<span class="token punctuation">;</span>
    122. 

  122. <span class="token punctuation">}</span>
    123. 

  123. <span class="token selector">acticle section:nth-child(3)</span><span class="token punctuation">{</span>
    124. 

  124.   <span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
    125. 

  125.   <span class="token property">background</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
    126. 

  126. <span class="token punctuation">}</span>
    127. 

  127. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><div class="acticle_3"><section>01</section> <section>02</section> <section>03</section></div> <p>父容器的宽度600px减去设置了子容器的200px基础上再减去100px(2×50)剩下300px，这300px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即225px,sectionTwo占居1/4即75px。</p> <h2 id="_2-box属性"><a href="#_2-box属性" class="header-anchor">#</a> 2.box属性</h2> <p>上面”css3弹性盒子模型之box-flex”将box-flex如何对父容器的宽度进行划分分配讲解完毕，下面在看一下父容器里面的box属性包括哪些box属性，具体属性如下代码所示：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>box<span class="token operator">-</span>orient <span class="token operator">|</span> box<span class="token operator">-</span>direction <span class="token operator">|</span> box<span class="token operator">-</span>align <span class="token operator">|</span> box<span class="token operator">-</span>pack <span class="token operator">|</span> box<span class="token operator">-</span>lines
    128. 

  128. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="a-box-orient"><a href="#a-box-orient" class="header-anchor">#</a> a.box-orient</h3> <p>box-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式，是水平还是垂直。可选属性如下所示：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>horizontal <span class="token operator">|</span> vertical <span class="token operator">|</span> inline<span class="token operator">-</span>axis <span class="token operator">|</span> block<span class="token operator">-</span>axis <span class="token operator">|</span> inherit
    129. 

  129. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="horizontal、inline-axis说明："><a href="#horizontal、inline-axis说明：" class="header-anchor">#</a> horizontal、inline-axis说明：</h4> <p>给box设置horizontal或inline-axis属性其效果似乎表现一致，都可将子容器水平排列，具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择horizontal或inline-axis属性对子容器进行水平排列，其是对父容器的宽度进行分配划分。此时如果父容器定义了高度值，其子容器的高度值设置则无效状态，所有子容器的高度等于父容器的高度值；如果父容器不设置高度值，其子容器的高度值才有效并且取最大高度值的子容器的高度。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span><span class="token punctuation">&gt;</span></span>
    130. 

  130.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>01<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    131. 

  131.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>02<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    132. 

  132.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>03<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    133. 

  133. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article</span><span class="token punctuation">&gt;</span></span>
    134. 

  134. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">acticle</span><span class="token punctuation">{</span>
    135. 

  135.   <span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
    136. 

  136.   <span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
    137. 

  137.   <span class="token property">display</span><span class="token punctuation">:</span>-moz-box<span class="token punctuation">;</span>
    138. 

  138.   <span class="token property">display</span><span class="token punctuation">:</span>-webkit-box<span class="token punctuation">;</span>
    139. 

  139.   <span class="token property">display</span><span class="token punctuation">:</span>box<span class="token punctuation">;</span>
    140. 

  140.   <span class="token property">-moz-box-orient</span><span class="token punctuation">:</span>horizontal<span class="token punctuation">;</span>
    141. 

  141.   <span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span>horizontal<span class="token punctuation">;</span>
    142. 

  142.   <span class="token comment">/*水平排列*/</span>
    143. 

  143.   <span class="token property">box-orient</span><span class="token punctuation">:</span>horizontal<span class="token punctuation">;</span>
    144. 

  144. <span class="token punctuation">}</span>
    145. 

  145. <span class="token selector">acticle section</span><span class="token punctuation">{</span>
    146. 

  146.   <span class="token property">line-height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    147. 

  147.   <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    148. 

  148.   <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>
    149. 

  149.   <span class="token property">text-shadow</span><span class="token punctuation">:</span> 1px 1px 1px <span class="token function">rgb</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span>
    150. 

  150. <span class="token punctuation">}</span>
    151. 

  151. <span class="token selector">acticle section:nth-child(1)</span><span class="token punctuation">{</span>
    152. 

  152.   <span class="token property">background</span><span class="token punctuation">:</span>orange<span class="token punctuation">;</span>
    153. 

  153.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    154. 

  154.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    155. 

  155.   <span class="token property">box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    156. 

  156. <span class="token punctuation">}</span>
    157. 

  157. <span class="token selector">acticle section:nth-child(2)</span><span class="token punctuation">{</span>
    158. 

  158.   <span class="token property">background</span><span class="token punctuation">:</span>purple<span class="token punctuation">;</span>
    159. 

  159.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    160. 

  160.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    161. 

  161.   <span class="token property">box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    162. 

  162. <span class="token punctuation">}</span>
    163. 

  163. <span class="token selector">acticle section:nth-child(3)</span><span class="token punctuation">{</span>
    164. 

  164.   <span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span>
    165. 

  165.   <span class="token property">background</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
    166. 

  166. <span class="token punctuation">}</span>
    167. 

  167. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><div class="box-orient1"><section>01</section> <section>02</section> <section>03</section></div> <p>vertical、block-axis说明：<br>
    168. 

  168. 给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，都可将子容器垂直排列，具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择vertical或block-axis属性对子容器进行垂直排列，其是对父容器的高度进行分配划分。</p> <p>此时如果父容器定义了宽度值，其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度值的子容器的宽度。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span><span class="token punctuation">&gt;</span></span>
    169. 

  169.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>01<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    170. 

  170.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>02<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    171. 

  171.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>03<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    172. 

  172. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article</span><span class="token punctuation">&gt;</span></span>
    173. 

  173. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">acticle</span><span class="token punctuation">{</span>
    174. 

  174.   <span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
    175. 

  175.   <span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
    176. 

  176.   <span class="token property">display</span><span class="token punctuation">:</span>-moz-box<span class="token punctuation">;</span>
    177. 

  177.   <span class="token property">display</span><span class="token punctuation">:</span>-webkit-box<span class="token punctuation">;</span>
    178. 

  178.   <span class="token property">display</span><span class="token punctuation">:</span>box<span class="token punctuation">;</span>
    179. 

  179.   <span class="token property">-moz-box-orient</span><span class="token punctuation">:</span>vertical<span class="token punctuation">;</span>
    180. 

  180.   <span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span>vertical<span class="token punctuation">;</span>
    181. 

  181.   <span class="token comment">/*垂直排列*/</span>
    182. 

  182.   <span class="token property">box-orient</span><span class="token punctuation">:</span>vertical<span class="token punctuation">;</span>
    183. 

  183. <span class="token punctuation">}</span>
    184. 

  184. <span class="token selector">acticle section</span><span class="token punctuation">{</span>
    185. 

  185.   <span class="token property">line-height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    186. 

  186.   <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    187. 

  187.   <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>
    188. 

  188.   <span class="token property">text-shadow</span><span class="token punctuation">:</span> 1px 1px 1px <span class="token function">rgb</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span>
    189. 

  189. <span class="token punctuation">}</span>
    190. 

  190. <span class="token selector">acticle section:nth-child(1)</span><span class="token punctuation">{</span>
    191. 

  191.   <span class="token property">background</span><span class="token punctuation">:</span>orange<span class="token punctuation">;</span>
    192. 

  192.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    193. 

  193.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    194. 

  194.   <span class="token property">box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    195. 

  195. <span class="token punctuation">}</span>
    196. 

  196. <span class="token selector">acticle section:nth-child(2)</span><span class="token punctuation">{</span>
    197. 

  197.   <span class="token property">background</span><span class="token punctuation">:</span>purple<span class="token punctuation">;</span>
    198. 

  198.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    199. 

  199.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    200. 

  200.   <span class="token property">box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    201. 

  201. <span class="token punctuation">}</span>
    202. 

  202. <span class="token selector">acticle section:nth-child(3)</span><span class="token punctuation">{</span>
    203. 

  203.   <span class="token property">height</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span>
    204. 

  204.   <span class="token property">background</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
    205. 

  205. <span class="token punctuation">}</span>
    206. 

  206. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><div class="box-orient1"><section>01</section> <section>02</section> <section>03</section></div> <p>inherit说明：<br>
    207. 

  207. inherit属性则是让子容器继承父容器的相关属性。</p> <h3 id="b-box-direction"><a href="#b-box-direction" class="header-anchor">#</a> b.box-direction</h3> <p>box-direction用来确定父容器里的子容器排列顺序，具体属性如下代码所示：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>normal <span class="token operator">|</span> reverse <span class="token operator">|</span> inherit
    208. 

  208. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>normal是默认值<br>
    209. 

  209. 按照HTML文档里结构的先后顺序依次展示。如下代码，如果box-direction设置为normal，则结构依次展示sectionOne、sectionTwo、sectionThree.</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span><span class="token punctuation">&gt;</span></span>
    210. 

  210.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>01<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    211. 

  211.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>02<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    212. 

  212.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>03<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    213. 

  213. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article</span><span class="token punctuation">&gt;</span></span>
    214. 

  214. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">acticle</span><span class="token punctuation">{</span>
    215. 

  215.   <span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
    216. 

  216.   <span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
    217. 

  217.   <span class="token property">display</span><span class="token punctuation">:</span>-moz-box<span class="token punctuation">;</span>
    218. 

  218.   <span class="token property">display</span><span class="token punctuation">:</span>-webkit-box<span class="token punctuation">;</span>
    219. 

  219.   <span class="token property">display</span><span class="token punctuation">:</span>box<span class="token punctuation">;</span>
    220. 

  220.   <span class="token comment">/*设置mormal默认值*/</span>
    221. 

  221.   <span class="token property">-moz-box-direction</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span>
    222. 

  222.   <span class="token property">-webkit-box-direction</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span>
    223. 

  223.   <span class="token property">box-direction</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span>
    224. 

  224. <span class="token punctuation">}</span>
    225. 

  225. <span class="token selector">acticle section</span><span class="token punctuation">{</span>
    226. 

  226.   <span class="token property">line-height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    227. 

  227.   <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    228. 

  228.   <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>
    229. 

  229.   <span class="token property">text-shadow</span><span class="token punctuation">:</span> 1px 1px 1px <span class="token function">rgb</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span>
    230. 

  230. <span class="token punctuation">}</span>
    231. 

  231. <span class="token selector">acticle section:nth-child(1)</span><span class="token punctuation">{</span>
    232. 

  232.   <span class="token property">background</span><span class="token punctuation">:</span>orange<span class="token punctuation">;</span>
    233. 

  233.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    234. 

  234.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    235. 

  235.   <span class="token property">box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    236. 

  236. <span class="token punctuation">}</span>
    237. 

  237. <span class="token selector">acticle section:nth-child(2)</span><span class="token punctuation">{</span>
    238. 

  238.   <span class="token property">background</span><span class="token punctuation">:</span>purple<span class="token punctuation">;</span>
    239. 

  239.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    240. 

  240.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    241. 

  241.   <span class="token property">box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    242. 

  242. <span class="token punctuation">}</span>
    243. 

  243. <span class="token selector">acticle section:nth-child(3)</span><span class="token punctuation">{</span>
    244. 

  244.   <span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span>
    245. 

  245.   <span class="token property">background</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
    246. 

  246. <span class="token punctuation">}</span>
    247. 

  247. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><div class="box-orient2"><section>01</section> <section>02</section> <section>03</section></div> <p>reverse表示反转:<br>
    248. 

  248. 如上面所示设置nomal其结构的排列顺序为sectionOne、sectionTwo、sectionThree；如果设置reverse反转，其结构的排列顺序为sectionThree、sectionTwo、sectionOne.</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span><span class="token punctuation">&gt;</span></span>
    249. 

  249.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>01<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    250. 

  250.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>02<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    251. 

  251.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>03<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    252. 

  252. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article</span><span class="token punctuation">&gt;</span></span>
    253. 

  253. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">acticle</span><span class="token punctuation">{</span>
    254. 

  254.   <span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
    255. 

  255.   <span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
    256. 

  256.   <span class="token property">display</span><span class="token punctuation">:</span>-moz-box<span class="token punctuation">;</span>
    257. 

  257.   <span class="token property">display</span><span class="token punctuation">:</span>-webkit-box<span class="token punctuation">;</span>
    258. 

  258.   <span class="token property">display</span><span class="token punctuation">:</span>box<span class="token punctuation">;</span>
    259. 

  259.   <span class="token comment">/*设置mormal默认值*/</span>
    260. 

  260.   <span class="token property">-moz-box-direction</span><span class="token punctuation">:</span>reverse<span class="token punctuation">;</span>
    261. 

  261.   <span class="token property">-webkit-box-direction</span><span class="token punctuation">:</span>reverse<span class="token punctuation">;</span>
    262. 

  262.   <span class="token property">box-direction</span><span class="token punctuation">:</span>reverse<span class="token punctuation">;</span>
    263. 

  263. <span class="token punctuation">}</span>
    264. 

  264. <span class="token selector">acticle section</span><span class="token punctuation">{</span>
    265. 

  265.   <span class="token property">line-height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    266. 

  266.   <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    267. 

  267.   <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>
    268. 

  268.   <span class="token property">text-shadow</span><span class="token punctuation">:</span> 1px 1px 1px <span class="token function">rgb</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span>
    269. 

  269. <span class="token punctuation">}</span>
    270. 

  270. <span class="token selector">acticle section:nth-child(1)</span><span class="token punctuation">{</span>
    271. 

  271.   <span class="token property">background</span><span class="token punctuation">:</span>orange<span class="token punctuation">;</span>
    272. 

  272.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    273. 

  273.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    274. 

  274.   <span class="token property">box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    275. 

  275. <span class="token punctuation">}</span>
    276. 

  276. <span class="token selector">acticle section:nth-child(2)</span><span class="token punctuation">{</span>
    277. 

  277.   <span class="token property">background</span><span class="token punctuation">:</span>purple<span class="token punctuation">;</span>
    278. 

  278.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    279. 

  279.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    280. 

  280.   <span class="token property">box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    281. 

  281. <span class="token punctuation">}</span>
    282. 

  282. <span class="token selector">acticle section:nth-child(3)</span><span class="token punctuation">{</span>
    283. 

  283.   <span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span>
    284. 

  284.   <span class="token property">background</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
    285. 

  285. <span class="token punctuation">}</span>
    286. 

  286. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><div class="box-orient3"><section>01</section> <section>02</section> <section>03</section></div> <h3 id="c-box-align"><a href="#c-box-align" class="header-anchor">#</a> c.box-align</h3> <blockquote><p>box-align表示父容器里面子容器的垂直对齐方式，可选参数如下所示：</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code>start <span class="token operator">|</span> end <span class="token operator">|</span> center <span class="token operator">|</span> baseline <span class="token operator">|</span> stretch
    287. 

  287. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span><span class="token punctuation">&gt;</span></span>
    288. 

  288.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>01<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    289. 

  289.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>02<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    290. 

  290.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>03<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    291. 

  291. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article</span><span class="token punctuation">&gt;</span></span>
    292. 

  292. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">acticle</span><span class="token punctuation">{</span>
    293. 

  293.   <span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
    294. 

  294.   <span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
    295. 

  295.   <span class="token property">display</span><span class="token punctuation">:</span>-moz-box<span class="token punctuation">;</span>
    296. 

  296.   <span class="token property">display</span><span class="token punctuation">:</span>-webkit-box<span class="token punctuation">;</span>
    297. 

  297.   <span class="token property">display</span><span class="token punctuation">:</span>box<span class="token punctuation">;</span>
    298. 

  298.   <span class="token comment">/*设置mormal默认值*/</span>
    299. 

  299.   <span class="token property">-moz-box-direction</span><span class="token punctuation">:</span>stretch<span class="token punctuation">;</span>
    300. 

  300.   <span class="token property">-webkit-box-direction</span><span class="token punctuation">:</span>stretch<span class="token punctuation">;</span>
    301. 

  301.   <span class="token property">box-direction</span><span class="token punctuation">:</span>stretch<span class="token punctuation">;</span>
    302. 

  302. <span class="token punctuation">}</span>
    303. 

  303. <span class="token selector">acticle section</span><span class="token punctuation">{</span>
    304. 

  304.   <span class="token property">line-height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    305. 

  305.   <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    306. 

  306.   <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>
    307. 

  307.   <span class="token property">text-shadow</span><span class="token punctuation">:</span> 1px 1px 1px <span class="token function">rgb</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span>
    308. 

  308. <span class="token punctuation">}</span>
    309. 

  309. <span class="token selector">acticle section:nth-child(1)</span><span class="token punctuation">{</span>
    310. 

  310.   <span class="token property">background</span><span class="token punctuation">:</span>orange<span class="token punctuation">;</span>
    311. 

  311.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    312. 

  312.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    313. 

  313.   <span class="token property">box-flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
    314. 

  314. <span class="token punctuation">}</span>
    315. 

  315. <span class="token selector">acticle section:nth-child(2)</span><span class="token punctuation">{</span>
    316. 

  316.   <span class="token property">background</span><span class="token punctuation">:</span>purple<span class="token punctuation">;</span>
    317. 

  317.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    318. 

  318.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    319. 

  319.   <span class="token property">box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    320. 

  320. <span class="token punctuation">}</span>
    321. 

  321. <span class="token selector">acticle section:nth-child(3)</span><span class="token punctuation">{</span>
    322. 

  322.   <span class="token property">width</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span>
    323. 

  323.   <span class="token property">background</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
    324. 

  324. <span class="token punctuation">}</span>
    325. 

  325. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><div class="box-orient4"><section>01</section> <section>02</section> <section>03</section></div> <table><thead><tr><th style="text-align:left;">属性</th> <th style="text-align:left;">说明</th></tr></thead> <tbody><tr><td style="text-align:left;">start</td> <td style="text-align:left;">居顶对齐</td></tr> <tr><td style="text-align:left;">end</td> <td style="text-align:left;">居底对齐</td></tr> <tr><td style="text-align:left;">center</td> <td style="text-align:left;">居中对齐</td></tr> <tr><td style="text-align:left;">stretch</td> <td style="text-align:left;">拉伸，拉伸到与父容器等高</td></tr></tbody></table> <h3 id="d-box-pack"><a href="#d-box-pack" class="header-anchor">#</a> d.box-pack</h3> <p>box-pack表示父容器里面子容器的水平对齐方式，可选参数如下所示：<br></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>start <span class="token operator">|</span> end <span class="token operator">|</span> center <span class="token operator">|</span> justify
    326. 

  326. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span><span class="token punctuation">&gt;</span></span>
    327. 

  327.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>01<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    328. 

  328.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>02<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    329. 

  329.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span>03<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
    330. 

  330. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article</span><span class="token punctuation">&gt;</span></span>
    331. 

  331. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">acticle</span><span class="token punctuation">{</span>
    332. 

  332.   <span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
    333. 

  333.   <span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
    334. 

  334.   <span class="token property">background</span><span class="token punctuation">:</span> aquamarine<span class="token punctuation">;</span>
    335. 

  335. 

  336.   <span class="token property">display</span><span class="token punctuation">:</span>-moz-box<span class="token punctuation">;</span>
    337. 

  337.   <span class="token property">display</span><span class="token punctuation">:</span>-webkit-box<span class="token punctuation">;</span>
    338. 

  338.   <span class="token property">display</span><span class="token punctuation">:</span>box<span class="token punctuation">;</span>
    339. 

  339.   
    340. 

  340.   <span class="token property">-moz-box-pack</span><span class="token punctuation">:</span>end<span class="token punctuation">;</span>
    341. 

  341.   <span class="token property">-webkit-box-pack</span><span class="token punctuation">:</span>end<span class="token punctuation">;</span>
    342. 

  342.   <span class="token property">-o-box-pack</span><span class="token punctuation">:</span>end<span class="token punctuation">;</span>
    343. 

  343.   <span class="token property">box-pack</span><span class="token punctuation">:</span>end<span class="token punctuation">;</span>
    344. 

  344. <span class="token punctuation">}</span>
    345. 

  345. 

  346. <span class="token selector">acticle section</span><span class="token punctuation">{</span>
    347. 

  347.   <span class="token property">line-height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    348. 

  348.   <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    349. 

  349.   <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    350. 

  350.   <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>
    351. 

  351.   <span class="token property">text-shadow</span><span class="token punctuation">:</span> 1px 1px 1px <span class="token function">rgb</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span>
    352. 

  352. <span class="token punctuation">}</span>
    353. 

  353. <span class="token selector">acticle section:nth-child(1)</span><span class="token punctuation">{</span>
    354. 

  354.   <span class="token property">background</span><span class="token punctuation">:</span>orange<span class="token punctuation">;</span>
    355. 

  355. <span class="token punctuation">}</span>
    356. 

  356. <span class="token selector">acticle section:nth-child(2)</span><span class="token punctuation">{</span>
    357. 

  357.   <span class="token property">background</span><span class="token punctuation">:</span>purple<span class="token punctuation">;</span>
    358. 

  358. <span class="token punctuation">}</span>
    359. 

  359. <span class="token selector">acticle section:nth-child(3)</span><span class="token punctuation">{</span>
    360. 

  360.   <span class="token property">background</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
    361. 

  361. <span class="token punctuation">}</span>
    362. 

  362. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><div class="box-orient5"><section>01</section> <section>02</section> <section>03</section></div> <table><thead><tr><th style="text-align:left;">属性</th> <th style="text-align:left;">说明</th></tr></thead> <tbody><tr><td style="text-align:left;">start</td> <td style="text-align:left;">水平居左对齐</td></tr> <tr><td style="text-align:left;">end</td> <td style="text-align:left;">水平居右对齐</td></tr> <tr><td style="text-align:left;">center</td> <td style="text-align:left;">水平居中对齐</td></tr> <tr><td style="text-align:left;">justify</td> <td style="text-align:left;">水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）</td></tr></tbody></table> <h2 id="box-flex小结"><a href="#box-flex小结" class="header-anchor">#</a> box-flex小结</h2> <h3 id="用法"><a href="#用法" class="header-anchor">#</a> 用法</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code> // 父元素
    363. 

  363.  <span class="token property">display</span><span class="token punctuation">:</span> box<span class="token punctuation">;</span>
    364. 

  364.   <span class="token property">display</span><span class="token punctuation">:</span> -moz-box<span class="token punctuation">;</span>
    365. 

  365.   <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span>
    366. 

  366.   
    367. 

  367.   // 子元素
    368. 

  368.   <span class="token property">-moz-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    369. 

  369.   <span class="token property">-webkit-box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    370. 

  370.   <span class="token property">box-flex</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
    371. 

  371. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="box"><a href="#box" class="header-anchor">#</a> box</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>box<span class="token operator">-</span>orient <span class="token operator">|</span> box<span class="token operator">-</span>direction <span class="token operator">|</span> box<span class="token operator">-</span>align <span class="token operator">|</span> box<span class="token operator">-</span>pack <span class="token operator">|</span> box<span class="token operator">-</span>lines
    372. 

  372. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="box-orient"><a href="#box-orient" class="header-anchor">#</a> box-orient</h3> <table><thead><tr><th style="text-align:left;">属性</th> <th style="text-align:left;">说明</th></tr></thead> <tbody><tr><td style="text-align:left;">horizontal</td> <td style="text-align:left;">水平排列</td></tr> <tr><td style="text-align:left;">vertical</td> <td style="text-align:left;">垂直排列</td></tr> <tr><td style="text-align:left;">inline-axis</td> <td style="text-align:left;">水平排列</td></tr> <tr><td style="text-align:left;">block-axis</td> <td style="text-align:left;">垂直排列</td></tr> <tr><td style="text-align:left;">inherit</td> <td style="text-align:left;">继承父元素相关属性</td></tr></tbody></table> <h3 id="box-direction"><a href="#box-direction" class="header-anchor">#</a> box-direction</h3> <p>说明：用来确定父容器里的子容器排列顺序<br></p> <table><thead><tr><th style="text-align:left;">属性</th> <th style="text-align:left;">说明</th></tr></thead> <tbody><tr><td style="text-align:left;">normal</td> <td style="text-align:left;">默认值</td></tr> <tr><td style="text-align:left;">reverse</td> <td style="text-align:left;">表示反转</td></tr></tbody></table> <p>用法：<br></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>// 父元素
    373. 

  373. <span class="token property">-moz-box-direction</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span>
    374. 

  374. <span class="token property">-webkit-box-direction</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span>
    375. 

  375. <span class="token property">box-direction</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span>
    376. 

  376. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="box-align"><a href="#box-align" class="header-anchor">#</a> box-align</h3> <p>说明：表示父容器里面子容器的垂直对齐方式<br></p> <table><thead><tr><th style="text-align:left;">属性</th> <th style="text-align:left;">说明</th></tr></thead> <tbody><tr><td style="text-align:left;">start</td> <td style="text-align:left;">默认值</td></tr> <tr><td style="text-align:left;">reverse</td> <td style="text-align:left;">居顶对齐</td></tr> <tr><td style="text-align:left;">end</td> <td style="text-align:left;">居底对齐</td></tr> <tr><td style="text-align:left;">center</td> <td style="text-align:left;">居中对齐</td></tr> <tr><td style="text-align:left;">stretch</td> <td style="text-align:left;">拉伸，拉伸到与父容器等高</td></tr></tbody></table> <p>用法：<br></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>// 父元素
    377. 

  377. <span class="token property">-moz-box-direction</span><span class="token punctuation">:</span>stretch<span class="token punctuation">;</span>
    378. 

  378. <span class="token property">-webkit-box-direction</span><span class="token punctuation">:</span>stretch<span class="token punctuation">;</span>
    379. 

  379. <span class="token property">box-direction</span><span class="token punctuation">:</span>stretch<span class="token punctuation">;</span>
    380. 

  380. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="box-pack"><a href="#box-pack" class="header-anchor">#</a> box-pack</h3> <p>说明：box-pack表示父容器里面子容器的水平对齐方式<br></p> <table><thead><tr><th style="text-align:left;">属性</th> <th style="text-align:left;">说明</th></tr></thead> <tbody><tr><td style="text-align:left;">start</td> <td style="text-align:left;">水平居左对齐</td></tr> <tr><td style="text-align:left;">end</td> <td style="text-align:left;">水平居右对齐</td></tr> <tr><td style="text-align:left;">center</td> <td style="text-align:left;">水平居中对齐</td></tr> <tr><td style="text-align:left;">justify</td> <td style="text-align:left;">水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）</td></tr></tbody></table> <p>用法：<br></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* 父元素 */</span>
    381. 

  381. <span class="token property">-moz-box-pack</span><span class="token punctuation">:</span>end<span class="token punctuation">;</span>
    382. 

  382. <span class="token property">-webkit-box-pack</span><span class="token punctuation">:</span>end<span class="token punctuation">;</span>
    383. 

  383. <span class="token property">-o-box-pack</span><span class="token punctuation">:</span>end<span class="token punctuation">;</span>
    384. 

  384. <span class="token property">box-pack</span><span class="token punctuation">:</span>end<span class="token punctuation">;</span>
    385. 

  385. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">11/4/2019, 12:48:37 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
    386. 

  386.       ←
    387. 

  387.       <a href="/CSS/2018_10_21_02.html" class="prev">border-style</a></span> <span class="next"><a href="/CSS/2018_10_21_04.html">css动画</a>
    388. 

  388.       →
    389. 

  389.     </span></p></div> </main></div><div class="global-ui"></div></div>
    390. 

  390.     <script src="/assets/js/app.9558671e.js" defer></script><script src="/assets/js/3.515b53d6.js" defer></script><script src="/assets/js/66.a56465a2.js" defer></script><script src="/assets/js/13.ff4ae139.js" defer></script><script src="/assets/js/14.836a5132.js" defer></script><script src="/assets/js/15.6f048cfc.js" defer></script><script src="/assets/js/8.be3a48f4.js" defer></script><script src="/assets/js/9.db31af68.js" defer></script><script src="/assets/js/10.f724d0ba.js" defer></script><script src="/assets/js/11.8006ec70.js" defer></script><script src="/assets/js/12.005e0dbb.js" defer></script>
    391. 

  391.   </body>
    392. 

  392. </html>
    393.