https://everfind.github.io/assets/js/v-57d2f725.7db4bcf8.js

1"use strict";(self.webpackChunkeverfind_website=self.webpackChunkeverfind_website||[]).push([[9849],{7668:(n,s,e)=>{e.r(s),e.d(s,{data:()=>a});const a={key:"v-57d2f725",path:"/posts/2016/05/20/flexbox.html",title:"Flexbox 布局完全指南",lang:"zh-CN",frontmatter:{title:"Flexbox 布局完全指南",description:"css flexbox 布局",keywords:["css layout","css 布局","flexbox"],date:"2016-05-20T00:00:00.000Z",permalinkPattern:"posts/:year/:month/:day/:slug.html",tags:["通用知识"]},excerpt:'<div style="display:flex;align-items:center;justify-content:center;"><p style="text-align: center;margin-top:10px;color:#999;"><img src="/qrcode-c.jpg" style="width:200px;height:200px;display:block;margin:10px auto;opacity:0.8;" />关注微信公众号，获取最新推送~</p><p style="text-align: center;margin-top:10px;color:#999;"><img src="/card-c.jpeg" style="width:200px;height:200px;display:block;margin:10px auto;opacity:0.8;" />加微信，深入交流~</p></div>',headers:[{level:2,title:"应用于 flex container 的属性",slug:"应用于-flex-container-的属性",children:[]},{level:2,title:"应用于 flex item 的属性",slug:"应用于-flex-item-的属性",children:[]},{level:2,title:"参考链接",slug:"参考链接",children:[]}],filePathRelative:"posts/flexbox.md"}},1657:(n,s,e)=>{e.r(s),e.d(s,{default:()=>g});var a=e(6252);const l=(0,a.uE)('<h2 id="应用于-flex-container-的属性" tabindex="-1"><a class="header-anchor" href="#应用于-flex-container-的属性" aria-hidden="true">#</a> 应用于 flex container 的属性</h2><p><img src="/posts/images/flex/flex-container-c.png" alt="flex-container"></p><p><strong>display</strong> 该属性定义一个 flex container，根据不同取值定义为 inline 或 block 的 flex container。应用了该属性的元素为它的所有子元素创建了一个 flex context。</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>\n  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token comment">/* or inline-flex */</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote><p>注意，CSS3 的多列布局对 flex 容器没有任何影响。</p></blockquote><p><strong>flex-direction</strong></p><p><img src="/posts/images/flex/flex-direction-c.png" alt="flex-direction1"></p><p>该属性建立主轴，规定了 flex container 中的 flex item 的排布方向。Flexbox 是一种单向布局概念，可以认为 flex item 都优先沿着水平行或竖直列布局。</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>\n  <span class="token property">flex-direction</span><span class="token punctuation">:</span> row | row-reverse | column | column-reverse<span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>row （默认值）： 在 ltr 上下文中为由左到右；在 rtl 上下文中为由右到左。</li><li>row-reverse ： 在 ltr 上下文中为由右到左；在 rtl 上下文中为由左到右。</li><li>column ： 与 row 类似，只不过是由上到下。</li><li>column-reverse ： 与 row-reverse 类似，只不过是由下到上。</li></ul><p><strong>flex-wrap</strong></p><p><img src="/posts/images/flex/flex-wrap-c.png" alt="flex-wrap"></p><p>默认情况下，所有的 flex item 都将尽量保持在一个 line （行或者列，下同）之内。可以通过这个属性让 flex item 在需要的情况下换行或者换列。这里，新行或新列从哪里开始由 flex-direction 决定。</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>\n  <span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap | wrap | wrap-reverse<span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>nowrap （默认值）： 单 line。在 ltr 上下文中为由左到右；在 rtl 上下文中为由右到左。</li><li>wrap ： 多 line。在 ltr 上下文中为由左到右；在 rtl 上下文中为由右到左。</li><li>wrap-reverse ： 多 line。在 ltr 上下文中为由右到左；在 rtl 上下文中为由左到右。</li></ul><p><strong>flex-flow</strong> 该属性为 flex-direction 和 flex-wrap 的简写属性，同时定义了 flex container 的主轴和交叉轴。默认值为 row nowrap。</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token property">flex-flow</span><span class="token punctuation">:</span> &lt;‘flex-direction’&gt; || &lt;‘flex-wrap’&gt;<span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p><strong>justify-content</strong></p><p><img src="/posts/images/flex/justify-content-c.png" alt="justify-content"></p><p>

1该属性定义了沿着主轴的对齐方式。它被用来处理当所有 flex item 都已经放置完毕后的剩余空白空间。</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>\n  <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start | flex-end | center | space-between | space-around<span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>flex-start （默认值）： 所有的 flex item 都向 line 的开始位置对齐。</li><li>flex-end ： 所有的 flex item 都向 line 结束位置对齐。</li><li>center ： 所有的 flex item 都沿着 line 的中间位置对齐。</li><li>space-between ： 所有的 flex item 都均匀的沿着 line 分布，第一个 item 排在 line 的开始位置，最后一个 item 排在 line 的结束位置。</li><li>space-around ： 所有的 flex item 都均匀的沿着 line 分布，每个 item 周围的空白空间相等。注意，看上去每个 item 周围的空白空间不一定完全相等，因为所有的 item 的两边都拥有大小完全相同的空白空间。</li></ul><p><strong>align-items</strong></p><p><img src="/posts/images/flex/align-items-c.png" alt="align-items"></p><p>该属性定义了在当前 line 中 flex item 沿着交叉轴布局的默认行为。可以认为它是针对交叉轴的 justify-content。</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>\n  <span class="token property">align-items</span><span class="token punctuation">:</span> flex-start | flex-end | center | baseline | stretch<span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>flex-start ： 沿着交叉轴方向的 margin 边缘将会沿着交叉轴的开始位置对齐。</li><li>flex-end ： 沿着交叉轴方向的 margin 边缘将会沿着交叉轴的结束位置对齐。</li><li>center ： 所有的 flex item 将沿着交叉轴的中央对齐。</li><li>baseline ： 所有的 flex item 将会沿着他们的 baseline 对齐。</li><li>stretch （默认值）： 拉伸以填满容器（依然受 min-width/max-width 限制）。</li></ul><p><strong>align-content</strong></p><p><img src="/posts/images/flex/align-content-c.png" alt="align-content"></p><p>该属性用来在交叉轴还有空白空间的情况下控制 flex container 内的所有 line 的对齐方式。与 justify-content 控制 flex item 如何沿着主轴方向对齐的方式类似。 注意： 单 line 情况下，该属性不生效。</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>\n  <span class="token property">align-content</span><span class="token punctuation">:</span> flex-start | flex-end | center | space-between | space-around |\n    stretch<span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><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><ul><li>flex-start ： 所有的 line 都向 container 的开始位置对齐。</li><li>flex-end ： 所有的 line 都向 container 的结束位置对齐。</li><li>center ： 所有的 line 都沿着 container 的中央对齐。</li><li>space-between ： 所有的 line 均匀分布，第一个 line 在 container 的开始位置，最后一个 line 在 container 的结束位置。</li><li>space-around ： 所有的 line 均匀分布，每个 line 周围的空白空间相等。</li><li>stretch （默认值）： 所有的 line 拉伸以填满剩余空间。</li></ul><h2 id="应用于-flex-item-的属性" tabindex="-1"><a class="header-anchor" href="#应用于-flex-item-的属性" aria-hidden="true">

1#</a> 应用于 flex item 的属性</h2><p><img src="/posts/images/flex/flex-items-c.png" alt="flex-items"></p><p><strong>order</strong></p><p><img src="/posts/images/flex/order-c.png" alt="order"></p><p>在默认情况下，所有的 flex items 按照源代码中定义的顺序布局。但是， order 属性控制了 flex item 在 flex container 中显示的优先级。</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item</span> <span class="token punctuation">{</span>\n  <span class="token property">order</span><span class="token punctuation">:</span> &lt;integer&gt;<span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>flex-grow</strong></p><p><img src="/posts/images/flex/flex-grow-c.png" alt="flex-grow"></p><p>该属性赋予 flex item 生长（grow）的能力。它接受一个无单位的值，并将其作为比例值，表示在 flex container 中，这个 flex item 能够占有多大比例的可用空间。 如果所有的 flex item 的 flex-grow 属性都设置为 1，那么 container 的剩余空间将被均匀的分配给所有 flex item。如果当中有一个 item 的 flex-grow 属性设置为 2，那么 这个 item 将占有 2 倍于其他 item 占有的可用空间。</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item</span> <span class="token punctuation">{</span>\n  <span class="token property">flex-grow</span><span class="token punctuation">:</span> &lt;number&gt;<span class="token punctuation">;</span> <span class="token comment">/* default 0 */</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>负值是非法取值。</p><p><strong>flex-shrink</strong> 该属性赋予 flex item 在必要的情况下收缩的能力。</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item</span> <span class="token punctuation">{</span>\n  <span class="token property">flex-shrink</span><span class="token punctuation">:</span> &lt;number&gt;<span class="token punctuation">;</span> <span class="token comment">/* default 1 */</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>负值是非法取值。</p><p><strong>flex-basis</strong> 该属性用于在分配剩余空间之前定义 flex item 的默认尺寸大小。它的取值可以为一个绝对长度值（比如 20%，5rem，等）或者是一个关键字。auto 关键字表示根据 flex item 自身的 width 和 height 属性取值确定。 content 关键字表示根据 flex item 的 content 来确定，但是目前并没有得到很

1好的支持。</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item</span> <span class="token punctuation">{</span>\n  <span class="token property">flex-basis</span><span class="token punctuation">:</span> &lt;length&gt; | auto<span class="token punctuation">;</span> <span class="token comment">/* default auto */</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>',48),t=(0,a.Uk)("如果该属性取值为 0，那么在该 flex item 的 content 周围的额外空间将不被计算在内。如果取值为 auto，那么 flex item 的大小将根据 flex-grow 的取值来确定。可以参考"),p={href:"https://www.w3.org/TR/css-flexbox-1/images/rel-vs-abs-flex.svg",target:"_blank",rel:"noopener noreferrer"},i=(0,a.Uk)("这张图"),c=(0,a.Uk)("。"),r=(0,a.uE)('<p><strong>flex</strong> 该属性为 flex-grow, flex-shrink 和 flex-basis 的混合简写方式。 其中第二个和第三个参数（flex-shrink 和 flex-basis）为可选参数。该属性的默认值为 0 1 auto。</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item</span> <span class="token punctuation">{</span>\n  <span class="token property">flex</span><span class="token punctuation">:</span> none | [ &lt; <span class="token string">&quot;flex-grow&quot;</span> &gt; &lt; <span class="token string">&quot;flex-shrink&quot;</span> &gt;? || &lt; <span class="token string">&quot;flex-basis&quot;</span> &gt; ]<span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>align-self</strong></p><p><img src="/posts/images/flex/align-self-c.png" alt="align-self"></p><p>该属性可以为每个 flex item 指定对齐方式。我们可以通过该属性修改 flex item 默认的或者由 align-items 指定的对齐方式。它的取值说明参考 align-items 的取值说明。</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.item</span> <span class="token punctuation">{</span>\n  <span class="token property">align-self</span><span class="token punctuation">:</span> auto | flex-start | flex-end | center | baseline | stretch<span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>注意，float，clear 和 vertical-align 对 flex item 无任何影响。</p><h2 id="参考链接" tabindex="-1"><a class="header-anchor" href="#参考链接" aria-hidden="true">#</a> 参考链接</h2>',8),o={href:"https://css-tricks.com/snippets/css/a-guide-to-flexbox/",target:"_blank",rel:"noopener noreferrer"},u=(0,a.Uk)("A Complete Guide to Flexbox"),m=(0,a.uE)('<div style="display:flex;align-items:center;justify-content:center;"><p style="text-align:center;margin-top:10px;color:#999;"><img src="/qrcode-c.jpg" style="width:200px;height:200px;display:block;margin:10px auto;opacity:0.8;">关注微信公众号，获取最新推送~</p><p style="text-align:center;margin-top:10px;color:#999;"><img src="/card-c.jpeg" style="width:200px;height:200px;display:block;margin:10px auto;opacity:0.8;">加微信，深入交流~</p></div>',1),g={render:function(n,s){const e=(0,a.up)("OutboundLink");return(0,a.wg)(),(0,a.j4)(a.HY,null,[l,(0,a.Wm)("p",null,[t,(0,a.Wm)("a",p,[i,(0,a.Wm)(e)]),c]),r,(0,a.Wm)("ul",null,[(0,a.Wm)("li",null,[(0,a.Wm)("a",o,[u,(0,a.Wm)(e)])])]),m],64)}}}}]);