| 1 |
- (window.webpackJsonp=window.webpackJsonp||[]).push([[35],{364:function(t,r,e){"use strict";e.r(r);var n=e(3),a=Object(n.a)({},(function(){var t=this,r=t._self._c;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h2",{attrs:{id:"flex-布局教程-语法篇"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#flex-布局教程-语法篇"}},[t._v("#")]),t._v(" Flex 布局教程：语法篇")]),t._v(" "),r("p",[r("a",{attrs:{href:"http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html"),r("OutboundLink")],1)]),t._v(" "),r("h2",{attrs:{id:"css-grid-网格布局教程"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#css-grid-网格布局教程"}},[t._v("#")]),t._v(" CSS Grid 网格布局教程")]),t._v(" "),r("p",[r("a",{attrs:{href:"http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html"),r("OutboundLink")],1)]),t._v(" "),r("h2",{attrs:{id:"只要一行代码-实现五种-css-经典布局"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#只要一行代码-实现五种-css-经典布局"}},[t._v("#")]),t._v(" 只要一行代码，实现五种 CSS 经典布局")]),t._v(" "),r("p",[r("a",{attrs:{href:"http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html"),r("OutboundLink")],1)]),t._v(" "),r("ul",[r("li",[t._v("空间居中布局\n"),r("blockquote",[r("p",[t._v("不管容器的大小，项目总是占据中心点")])])]),t._v(" "),r("li",[t._v("并列式布局\n"),r("blockquote",[r("p",[t._v("多个项目并列，如果宽度不够，放不下的项目就自动折行")])])]),t._v(" "),r("li",[t._v("两栏式布局\n"),r("blockquote",[r("p",[t._v("一个边栏，一个主栏。边栏始终存在，主栏根据设备宽度，变宽或者变窄")])])]),t._v(" "),r("li",[t._v("三明治布局\n"),r("blockquote",[r("p",[t._v("页面在垂直方向上，分成三部分：页眉、内容区、页脚。")])])]),t._v(" "),r("li",[t._v("圣杯布局\n"),r("blockquote",[r("p",[t._v("最常用的布局，所以被比喻为圣杯。它将页面分成五个部分，除了页眉和页脚，内容区分成左边栏、主栏、右边栏。")])])])])])}),[],!1,null,null,null);r.default=a.exports}}]);
|
