设计内在的布局 2021-05-26 @⼤漠 . #中国.杭州
⼤漠 伪前端 F(x) TEAM
Web布局前世与今⽣
Web布局前世与今⽣
Web布局前世与今⽣ https://www.w3cplus.com/css/web-layout-the-evolution-of-web-layouts.html
Web现代主流布局
设计内在的布局（⽬标）
语义化HTML模板
语义化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
Flexbox Layout
Flexbox Layout
CSS Grid Layout
CSS Grid Layout https://codepen.io/airen/full/OJpmqGM
CSS Grid Layout https://codepen.io/airen/full/OJpmqGM
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/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/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/zYZvGrY
外在尺⼨ 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
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/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 https://codepen.io/airen/full/JjWJbaE
CSS Grid Layout
CSS Grid Layout
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
设计内在的布局
for free. You
can too.