设计内在的布局

设计内在的布局 2021-05-26 @⼤漠 . #中国.杭州

⼤漠伪前端 F(x) TEAM

Web布局前世与今⽣

Web布局前世与今⽣ https://www.w3cplus.com/css/web-layout-the-evolution-of-web-layouts.html

Web现代主流布局

设计内在的布局（⽬标）

语义化HTML模板

Flow Layout (NO Layout)

Basic CSS

Float Layout

Float Layout https://codepen.io/airen/full/qBrmVyQ

Float Layout 浮动容器塌陷 https://codepen.io/airen/full/qBrmVyQ

Clear Float Header {display: ow-root;} fl https://codepen.io/airen/full/yLMbpjR

浮动容器可⽤空间不⾜ Header {display: ow-root;} fl https://codepen.io/airen/full/yLMbpjR

Float Layout CSS 浮动很糟糕

Flexbox Layout

CSS Grid Layout

CSS Grid Layout https://codepen.io/airen/full/OJpmqGM

CSS Grid Layout 百分⽐会让⽹格项⽬撑破⽹格容器(示例中有 gap: 14px) https://codepen.io/airen/full/JjWNVMg

CSS Grid Layout https://codepen.io/airen/full/WNpjWgz

CSS Grid Layout https://codepen.io/airen/full/dyvWBoe

CSS Grid Layout 如何更合理的处理空间（⽹格轨道根据内容来决定） https://codepen.io/airen/full/dyvWBoe

CSS Grid Layout ? https://codepen.io/airen/full/VwpbJMV

CSS Grid Layout https://codepen.io/airen/full/QWpvXzG

CSS Grid Layout https://codepen.io/airen/full/dyvWBoe https://codepen.io/airen/full/QWpvXzG

外在尺⼨ vs 内在尺⼨

外在尺⼨ vs 内在尺⼨由元素内部内容来决定: ① min-content ② max-content ③ fit-content

外在尺⼨ vs 内在尺⼨ https://codepen.io/airen/full/zYZvGrY

外在尺⼨ vs 内在尺⼨ https://codepen.io/airen/full/zYZvNaP

外在尺⼨ vs 内在尺⼨ fit-content 相当于mincontent 和 max-content,其取值: ① 如果元素的可⽤空间（Available）充⾜，fitcontent 将使⽤ max-content ② 如果元素的可⽤空间（Available）不够充⾜，比 max-content ⼩点，那就是⽤可⽤空间的值，不会导致内容溢出 ③ 如果元素的可⽤空间（Available）很⼩，比 min-content还⼩,那就使⽤ min-content https://ishadeed.com/article/intrinsic-sizing-in-css/

外在尺⼨ vs 内在尺⼨ https://www.w3cplus.com/css/grid-layout-part-4.html

外在尺⼨ vs 内在尺⼨ min/max/fit-content使⽤: ① min/max/fit-content ⽤于 flex-basis ⽆效 ② fit-content ⽤于设置⽹格轨道尺⼨的属性上⽆效 ③ ⽹格项⽬或Flex项⽬上显式设置width:fit-content也⽆效,因为它们的默认宽度是mincontent ④ 最好不要在 min-width 或 max-width 上使⽤ fit-content，易造成混乱，建议在 width 上使⽤fit-content

t-content != t-content() ① fit-content 相当于min-content 和 max-content ② fit-content(<length-percentage>) = max(minimum, min(limit, maxcontent)) ③ fit-content(<length-percentage>) = min(min(max-content, vaailablesize), max(min-content, <length-percentage>)) fi fi 外在尺⼨ vs 内在尺⼨

外在尺⼨ vs 内在尺⼨ header {grid-template-columns: max-content t-content(480px) auto;} fi https://codepen.io/airen/full/MWpogJM

fi 外在尺⼨ vs 内在尺⼨ t-content(480px): ① ⽹格第2列（h1）宽度不会超过 480px，即使字号调⼤，内容宽⼤于 480px时，内容会换⾏ ② ⽹格第2列（h1）在内容较短时，可以缩减到⽐ 480px，⽐如字号调⼩，该列宽度也会调⼩ ③ ⽹格容器⽆可⽤空间时，⽹格第2列宽度会⼩到 min-content https://codepen.io/airen/full/MWpogJM

fi 外在尺⼨ vs 内在尺⼨ t-content(480px) = min(max-content, max(min-content, 480px)) ① max(min-content, 480px) 函数会返回两个参数中较⼤的值 ② min() 函数返回参数中较⼩的值，max()返回的值放到 min()函数中，变成其第⼆个参数 https://www.w3cplus.com/css/grid-layout-part-4.html

CSS Grid Layout

Grid & Flexbox Layout https://codepen.io/airen/full/ZEeyEZa

Grid & Flexbox Layout 虽然在Flexbox容器上显式设置了 ex-wrap: wrap, 但Flexbox容器⽆⾜够空间也不会断⾏。这是⽹格轨道（max-content）引起的。 fl https://codepen.io/airen/full/ZEeyEZa

CSS Grid Layout 第三列⽹格轨道是 auto 时， Flex项⽬在没有⾜够空间时会换⾏显式，但有空间时右侧会有较多空间多出，菜单项未右对⻬ https://codepen.io/airen/full/bGqRNza

CSS Grid Layout 请记住 Flexbox 容器和 Flex 项⽬的变化 https://codepen.io/airen/full/eYvRNYa

CSS Grid Layout https://codepen.io/airen/full/BaWZjqd

CSS Grid Layout https://codepen.io/airen/full/LYWLGwG

CSS Grid Layout https://codepen.io/airen/full/WNpOwPB

CSS Grid Layout Flexbox https://codepen.io/airen/full/eYvRNYa Grid https://codepen.io/airen/full/WNpOwPB

CSS Grid Layout https://codepen.io/airen/full/bGqReZp

杂乱⽆章⽂字（disjointed text）

CSS Grid Layout https://codepen.io/airen/full/KKWqgbe

CSS Grid Layout https://codepen.io/airen/full/JjWJbaE

CSS Grid Layout

CSS Grid Layout https://codepen.io/andybarefoot/full/PBPrex

CSS Grid Layout https://www.w3cplus.com/css/highlights-from-building-a-magazine-layout.html

CSS Grid Layout https://www.smashingmagazine.com/2019/04/art-direction-for-the-web-using-css-shapes/ https://www.w3cplus.com/css/highlights-from-building-a-magazine-layout.html

CSS Grid Layout https://codepen.io/andybarefoot/full/oNjxYYG https://codepen.io/andybarefoot/full/wvKJweJ https://www.w3cplus.com/css/responsive-grid-layout.html

CSS Grid Layout https://labs.jensimmons.com/

CSS Layout Patterns https://csslayout.io/

New Responsive Layout https://youtu.be/jUQ2-C5ZNRc https://web.dev/new-responsive/

New Responsive Layout https://codepen.io/una/full/mdOgyVL https://web.dev/new-responsive/

Design To Code: imgcook.com

THANK YOU