-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathflex速查手册.html
35 lines (33 loc) · 20.7 KB
/
flex速查手册.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Flex速查手册 | 小蜜蜂前端周刊</title>
<meta name="generator" content="VuePress 1.8.2">
<meta name="description" content="好好学习，天天向上。">
<link rel="preload" href="/FE-Weekly/assets/css/0.styles.a908ec75.css" as="style"><link rel="preload" href="/FE-Weekly/assets/js/app.44c279c7.js" as="script"><link rel="preload" href="/FE-Weekly/assets/js/2.946cf503.js" as="script"><link rel="preload" href="/FE-Weekly/assets/js/62.43bc49af.js" as="script"><link rel="preload" href="/FE-Weekly/assets/js/6.de6a323c.js" as="script"><link rel="prefetch" href="/FE-Weekly/assets/js/10.5352507b.js"><link rel="prefetch" href="/FE-Weekly/assets/js/11.83a72ade.js"><link rel="prefetch" href="/FE-Weekly/assets/js/12.00b61850.js"><link rel="prefetch" href="/FE-Weekly/assets/js/13.d79373a6.js"><link rel="prefetch" href="/FE-Weekly/assets/js/14.462af9ef.js"><link rel="prefetch" href="/FE-Weekly/assets/js/15.8441e7fa.js"><link rel="prefetch" href="/FE-Weekly/assets/js/16.7f190713.js"><link rel="prefetch" href="/FE-Weekly/assets/js/17.d836d8bc.js"><link rel="prefetch" href="/FE-Weekly/assets/js/18.636e69cb.js"><link rel="prefetch" href="/FE-Weekly/assets/js/19.9b122cc9.js"><link rel="prefetch" href="/FE-Weekly/assets/js/20.413f7eec.js"><link rel="prefetch" href="/FE-Weekly/assets/js/21.c65a8de1.js"><link rel="prefetch" href="/FE-Weekly/assets/js/22.97da2382.js"><link rel="prefetch" href="/FE-Weekly/assets/js/23.26864382.js"><link rel="prefetch" href="/FE-Weekly/assets/js/24.3a360530.js"><link rel="prefetch" href="/FE-Weekly/assets/js/25.d971b269.js"><link rel="prefetch" href="/FE-Weekly/assets/js/26.23721e08.js"><link rel="prefetch" href="/FE-Weekly/assets/js/27.0cf07053.js"><link rel="prefetch" href="/FE-Weekly/assets/js/28.ece7a01d.js"><link rel="prefetch" href="/FE-Weekly/assets/js/29.e7a224ad.js"><link rel="prefetch" href="/FE-Weekly/assets/js/3.e8932c61.js"><link rel="prefetch" href="/FE-Weekly/assets/js/30.a70521fc.js"><link rel="prefetch" href="/FE-Weekly/assets/js/31.c82acf82.js"><link rel="prefetch" href="/FE-Weekly/assets/js/32.e092bf1f.js"><link rel="prefetch" href="/FE-Weekly/assets/js/33.a2b31d8a.js"><link rel="prefetch" href="/FE-Weekly/assets/js/34.f332a696.js"><link rel="prefetch" href="/FE-Weekly/assets/js/35.1a57f590.js"><link rel="prefetch" href="/FE-Weekly/assets/js/36.d502f847.js"><link rel="prefetch" href="/FE-Weekly/assets/js/37.0a25424b.js"><link rel="prefetch" href="/FE-Weekly/assets/js/38.7ea8abc4.js"><link rel="prefetch" href="/FE-Weekly/assets/js/39.c31b2e25.js"><link rel="prefetch" href="/FE-Weekly/assets/js/4.e6e8c85d.js"><link rel="prefetch" href="/FE-Weekly/assets/js/40.998d7921.js"><link rel="prefetch" href="/FE-Weekly/assets/js/41.0badd321.js"><link rel="prefetch" href="/FE-Weekly/assets/js/42.3c31a06f.js"><link rel="prefetch" href="/FE-Weekly/assets/js/43.86f810a9.js"><link rel="prefetch" href="/FE-Weekly/assets/js/44.75e0f4c4.js"><link rel="prefetch" href="/FE-Weekly/assets/js/45.cc392e03.js"><link rel="prefetch" href="/FE-Weekly/assets/js/46.6278f709.js"><link rel="prefetch" href="/FE-Weekly/assets/js/47.e4eaf2a2.js"><link rel="prefetch" href="/FE-Weekly/assets/js/48.313a7005.js"><link rel="prefetch" href="/FE-Weekly/assets/js/49.3bb92779.js"><link rel="prefetch" href="/FE-Weekly/assets/js/5.f9b108dd.js"><link rel="prefetch" href="/FE-Weekly/assets/js/50.7f55cbb3.js"><link rel="prefetch" href="/FE-Weekly/assets/js/51.c323b810.js"><link rel="prefetch" href="/FE-Weekly/assets/js/52.12606e67.js"><link rel="prefetch" href="/FE-Weekly/assets/js/53.2d7b3e69.js"><link rel="prefetch" href="/FE-Weekly/assets/js/54.92e08cca.js"><link rel="prefetch" href="/FE-Weekly/assets/js/55.012f73b8.js"><link rel="prefetch" href="/FE-Weekly/assets/js/56.03073a43.js"><link rel="prefetch" href="/FE-Weekly/assets/js/57.e3439957.js"><link rel="prefetch" href="/FE-Weekly/assets/js/58.baa6fd74.js"><link rel="prefetch" href="/FE-Weekly/assets/js/59.a4ed02f6.js"><link rel="prefetch" href="/FE-Weekly/assets/js/60.42e7e9e5.js"><link rel="prefetch" href="/FE-Weekly/assets/js/61.48f6b23c.js"><link rel="prefetch" href="/FE-Weekly/assets/js/7.eefe6189.js"><link rel="prefetch" href="/FE-Weekly/assets/js/8.02d5fb3e.js"><link rel="prefetch" href="/FE-Weekly/assets/js/9.473470b2.js">
<link rel="stylesheet" href="/FE-Weekly/assets/css/0.styles.a908ec75.css">
</head>
<body>
<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="/FE-Weekly/" class="home-link router-link-active"><!----> <span class="site-name">小蜜蜂前端周刊</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/FE-Weekly/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="https://github.com/bee-fe/FE-Weekly" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/FE-Weekly/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="https://github.com/bee-fe/FE-Weekly" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Flex速查手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/FE-Weekly/flex%E9%80%9F%E6%9F%A5%E6%89%8B%E5%86%8C.html#_1-flex容器属性" class="sidebar-link">1. Flex容器属性</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/FE-Weekly/flex%E9%80%9F%E6%9F%A5%E6%89%8B%E5%86%8C.html#_2-flex项目属性" class="sidebar-link">2. Flex项目属性</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/FE-Weekly/flex%E9%80%9F%E6%9F%A5%E6%89%8B%E5%86%8C.html#_3-auto-margin-对齐" class="sidebar-link">3. Auto-margin 对齐</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/FE-Weekly/flex%E9%80%9F%E6%9F%A5%E6%89%8B%E5%86%8C.html#_4-ffc-flex-formatting-context" class="sidebar-link">4. FFC (flex formatting context)</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/FE-Weekly/flex%E9%80%9F%E6%9F%A5%E6%89%8B%E5%86%8C.html#与bfc的细微区别" class="sidebar-link">与BFC的细微区别</a></li><li class="sidebar-sub-header"><a href="/FE-Weekly/flex%E9%80%9F%E6%9F%A5%E6%89%8B%E5%86%8C.html#flex-item-flex项目" class="sidebar-link">flex item（flex项目）</a></li></ul></li><li><a href="/FE-Weekly/flex%E9%80%9F%E6%9F%A5%E6%89%8B%E5%86%8C.html#_5-flex-item-size-如何计算的" class="sidebar-link">5. flex-item-size 如何计算的</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/FE-Weekly/flex%E9%80%9F%E6%9F%A5%E6%89%8B%E5%86%8C.html#_1-子元素没有内容和默认固定宽高" class="sidebar-link">1. 子元素没有内容和默认固定宽高</a></li><li class="sidebar-sub-header"><a href="/FE-Weekly/flex%E9%80%9F%E6%9F%A5%E6%89%8B%E5%86%8C.html#_2-元素存在默认宽高" class="sidebar-link">2. 元素存在默认宽高</a></li><li class="sidebar-sub-header"><a href="/FE-Weekly/flex%E9%80%9F%E6%9F%A5%E6%89%8B%E5%86%8C.html#_3-元素存在-min-width-height-或者-max-width-height" class="sidebar-link">3.元素存在 min-width[height] 或者 max-width[height]</a></li><li class="sidebar-sub-header"><a href="/FE-Weekly/flex%E9%80%9F%E6%9F%A5%E6%89%8B%E5%86%8C.html#_4-width-height-auto-优先级等于-flex-basis。" class="sidebar-link">4. width[height]: auto; 优先级等于 flex-basis。</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="flex速查手册"><a href="#flex速查手册" class="header-anchor">#</a> Flex速查手册</h1> <blockquote><p>本文由 高峰 投稿</p></blockquote> <p><img src="https://www.w3cplus.com/sites/default/files/blogs/2017/1703/flexbox1.png" alt="flex"></p> <h2 id="_1-flex容器属性"><a href="#_1-flex容器属性" class="header-anchor">#</a> <strong>1. Flex容器属性</strong></h2> <ul><li><strong><code>flex-direction</code></strong> 控制Flex项目在<code>Main-Axis</code>上的排列方向。
<ul><li><code>row</code> ：沿着<code>Main-Axis</code><strong>从左向右，水平排列</strong>。(另<code>row-reverse</code> )</li> <li><code>column</code> ：沿着<code>Cross-Axis</code>从<strong>上到下垂直排列</strong>。(另<code>column-reverse</code>)</li></ul></li> <li><strong><code>flex-wrap</code></strong> 换行。
<ul><li><code>wrap</code> ：Flex项目在Flex容器内<strong>换行</strong>排列</li> <li><code>nowrap</code> ：Flex项目在Flex容器内<strong>不换行</strong>排列。</li> <li>wrap-reverse</li></ul></li> <li><strong><code>flex-flow</code></strong>: <code>flex-direction</code> + <code>flex-wrap</code></li> <li><strong><code>justify-content</code></strong> 控制Flex项目在<code>Main-Axis</code>上的对齐方式。
<ul><li><code>flex-start</code> : 所有Flex项目靠Main-Axis开始边缘（<strong>左对齐</strong>）。</li> <li><code>flex-end</code> ： ~~~~~~~~~~~~~~~~~~~~~~~~结束边缘（<strong>右对齐</strong>）。</li> <li><code>center</code> ： 让所有Flex项目排~~~~~~~~~~中间（<strong>居中对齐</strong>）。</li> <li><code>space-between</code> ： 让除了第一个和最一个Flex项目的两者间间距相同（<strong>两端对齐</strong>）。</li> <li><code>space-around</code> ： 让每个Flex项目<strong>具有相同的空间。</strong></li></ul></li> <li><strong><code>align-items</code></strong> 控制Flex项目在<code>Cross-Axis</code>上的对齐方式。
<ul><li><code>stretch</code> : 让所有的Flex项目高度和Flex容器高度一样。</li> <li><code>flex-start</code></li> <li><code>flex-end</code></li> <li><code>center</code>: 所有Flex项目在Cross-Axis上沿着他们自己的<strong>基线对齐</strong>。</li> <li><code>baseline</code></li></ul></li> <li><strong><code>align-content</code></strong> 用于多行的Flex容器。
<ul><li><code>flex-start || flex-end || center || stretch</code>。</li></ul></li></ul> <h2 id="_2-flex项目属性"><a href="#_2-flex项目属性" class="header-anchor">#</a> <strong>2. Flex项目属性</strong></h2> <ul><li><strong><code>flex-grow</code></strong> 默认为 <code>0</code> 有额外空间保持自身宽度； <code>1</code>: 有额外空间会撑开（<em>grow</em>了）。</li> <li><strong><code>flex-shrink</code></strong> 默认为 <code>1</code> , 没有额外空间保持自身宽度; <code>0</code>: 维持<strong>被压缩平均</strong>的宽度。</li> <li><strong><code>flex-basis</code></strong> 可以指定Flex项目的初始大小。也就是 <code>flex-grow</code> 和 <code>flex-shrink</code> 属性调整它的大小以适应Flex容器之前。默认为 <code>auto</code>。</li> <li><strong><code>flex</code></strong> （<strong>速记</strong>) => <code>flex-grow</code> 第一，然后是 <code>flex-shrink</code>，最后是 <code>flex-basis</code>。缩写成<code>GSB</code>。
<ul><li>默认： <code>flex: 0 1 auto;</code></li> <li><code>flex: none</code> => <code>flex: 0 0 auto;</code> , 宽度被自动计算，不过弹性项目<strong>始终</strong>不会伸展或者收缩。</li> <li><strong>相对flex项目</strong><code>flex: auto</code> => <code>flex: 1 1 auto</code> , 宽度被自动计算，不过<strong>如果有必要</strong>，<strong>会</strong>伸展或者收缩以适应整个可用宽度。</li> <li><strong>绝对flex项目</strong><code>flex: "positive number"</code> => <code>flex: “正数” 1 0</code> 。
<ul><li>将弹性项目的初始宽度设置为零，伸展项目以填满可用空间，并且最后只要有可能就收缩项目。</li> <li>当<strong>有多个弹性项目</strong>，并且其初始宽度 flex-basis 被设置为基于零的任何值时，弹性项目的宽度被根据 flex-grow 值的<strong>比例</strong>来计算。</li></ul></li></ul></li> <li><strong><code>align-self</code></strong> 改变<strong>一个</strong>弹性项目沿着侧轴的位置, 不影响相邻的弹性项目。
<ul><li><code>auto || flex-start || flex-end || center || baseline || stretch</code>。</li> <li><strong><code>order</code></strong> ，Flex项目会根据order值<strong>从底到高</strong>重新排序。</li></ul></li></ul> <h2 id="_3-auto-margin-对齐"><a href="#_3-auto-margin-对齐" class="header-anchor">#</a> <strong>3. Auto-margin 对齐</strong></h2> <p>当在Flex项目上使用 <code>margin: auto</code> 时，值为<code>auto</code> 的方向（左、右或者二者都是）会占据所有剩余空间。</p> <h2 id="_4-ffc-flex-formatting-context"><a href="#_4-ffc-flex-formatting-context" class="header-anchor">#</a> <strong>4. FFC (flex formatting context)</strong></h2> <p>Flexbox 布局新定义了格式化上下文，类似 BFC（block formatting context）。除了布局和一些细节不同以外的一切规则都和 BFC 是相同的。</p> <h3 id="与bfc的细微区别"><a href="#与bfc的细微区别" class="header-anchor">#</a> <strong>与BFC的细微区别</strong></h3> <ul><li><code>vertical-align</code>、<code>float</code> 和 <code>clear</code>对<code>Flexbox</code>中的子元素是没有效果的。</li> <li>Flexbox 下的子元素不会继承父级容器的宽</li></ul> <h3 id="flex-item-flex项目"><a href="#flex-item-flex项目" class="header-anchor">#</a> <strong>flex item（flex项目）</strong></h3> <p>CSS解析器会把子元素外部装进一个看不见的盒子里，我们通过排列这些盒子来达到排序、布局、 伸缩的目的。</p> <p>子元素中包括了 标签节点 以及 文本节点。标签节点很容易理解，需要注意的是文本节点。</p> <p>默认情况下，<code>flex</code> 会将 <strong>连续的文本节点</strong> 装进 flex-item 之中，使文本可以和标签节点一起排序和定位。</p> <p>空格也是文本节点，所以 white-space 会影响Flexbox 中的布局：
<img src="https://www.w3cplus.com/sites/default/files/blogs/2017/1703/flexbox3.png" alt="此处输入图片的描述"></p> <h2 id="_5-flex-item-size-如何计算的"><a href="#_5-flex-item-size-如何计算的" class="header-anchor">#</a> <strong>5. flex-item-size 如何计算的</strong></h2> <p><code>item-size</code>（尺寸）为主轴方向<code>上item</code>的 <code>content</code> 再加上自身的<code>margin</code>、 <code>border</code> 和 <code>padding</code> 就是这个 item 的尺寸。</p> <p>规则：</p> <h3 id="_1-子元素没有内容和默认固定宽高"><a href="#_1-子元素没有内容和默认固定宽高" class="header-anchor">#</a> <em>1. 子元素没有内容和默认固定宽高</em></h3> <p><code>flex-basis</code> > <code>width[height]: 非auto</code>;</p> <h3 id="_2-元素存在默认宽高"><a href="#_2-元素存在默认宽高" class="header-anchor">#</a> <em>2. 元素存在默认宽高</em></h3> <p>如果子元素有默认固定宽高、并且设置了 <code>flex-basis</code>，那么它的 <code>content</code> 取 <code>flex-basis</code> 和 <code>固定宽高</code>中较大的, 且以<strong>固定宽高</strong>为<strong>下限</strong>。</p> <h3 id="_3-元素存在-min-width-height-或者-max-width-height"><a href="#_3-元素存在-min-width-height-或者-max-width-height" class="header-anchor">#</a> <em>3.元素存在 min-width[height] 或者 max-width[height]</em></h3> <p>如果子元素有min-width[min-height] 的限制，那么content取 <code>flex-basis</code> 和 <code>min-width[min-height]</code> 中较大的，且以**<code>min-width</code><strong>值为</strong>下限**。</p> <p>如果 min-width[min-height] 的值已经<strong>超出了容器的尺寸</strong>，那么即使设置了 <code>flex-shrink</code>, CSS解析器也不会用这个item的 content shrink，而是坚持保留它的<code>min-width[min-height]</code>。</p> <p>反之，如果设置了 <code>max-width[height]</code> 的值，那么设置 <code>flex-basis</code> 无法超过这个值，对于<code>flex-grow</code> 也仅仅只会增长到 <code>max-width[height]</code> 这个上限。</p> <h3 id="_4-width-height-auto-优先级等于-flex-basis。"><a href="#_4-width-height-auto-优先级等于-flex-basis。" class="header-anchor">#</a> <em>4. width[height]: auto; 优先级等于 flex-basis。</em></h3> <p><strong>两者谁大取谁</strong></p> <p>参考：</p> <ol><li><a href="https://yoksel.github.io/flex-cheatsheet/#display" target="_blank" rel="noopener noreferrer">flex-cheatsheet<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html" target="_blank" rel="noopener noreferrer">understanding-flexbox-everything-you-need-to-know<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.w3cplus.com/css3/flexbox-layout-and-calculation.html?from=groupmessage" target="_blank" rel="noopener noreferrer">flexbox-layout-and-calculation<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></li></ol> <blockquote><p>思维流图。</p></blockquote> <p><img src="http://static.zybuluo.com/gao1994/sr8vhlxwou6jg36pk55jjwvi/flexboxsheet.png" alt="Flex1"></p> <div class="gitalk-container"><div id="gitalk-container"></div></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新:</span> <span class="time">2021/12/10 上午10:52:50</span></div></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/FE-Weekly/assets/js/app.44c279c7.js" defer></script><script src="/FE-Weekly/assets/js/2.946cf503.js" defer></script><script src="/FE-Weekly/assets/js/62.43bc49af.js" defer></script><script src="/FE-Weekly/assets/js/6.de6a323c.js" defer></script>
</body>
</html>