• 前端各种布局

    一行css现代布局

    超级居中

    1. <div class="parent" >
    2.     <div class="box coral" contenteditable>
    3.      测试
    4.     div>
    5.   div>
    1. .parent {
    2.     display: grid;
    3.     /*等价于align-items和justify-items都设置为center*/
    4.     place-items: center;
    5.   }

    可解构的自适应布局（The Deconstructed Pancake）

    关于flex，前置知识有一定的介绍。

    1. <div class="parent white">
    2.     <div class="box green">1div>
    3.     <div class="box green">2div>
    4.     <div class="box green">3div>
    5.  div>
    1. .parent {
    2.     display: flex;
    3.     flex-wrap: wrap;
    4.     justify-content: center;
    5.   }
    6.  
    7.   .box {
    8.     flex: 1 1 150px; /*  Stretching: */
    9.     flex: 0 1 150px; /*  No stretching: */
    10.     margin: 5px;
    11.   }

    经典的侧边栏

    同样使用 grid layout，可以结合 minmax() 实现弹性的 sidebar（这在你要适应大屏幕的时候很有用）。minmax(,) 就是字面意思。结合单位，非常优雅，避免了数学计算宽度等不灵活的手段（比如我们设置 gap 的时候）。

    1.  <div class="parent">
    2.     <div class="section yellow" contenteditable>
    3.       Min: 150px / Max: 25%
    4.     div>
    5.     <div class="section purple" contenteditable>
    6.       This element takes the second grid position (1fr), meaning
    7.       it takes up the rest of the remaining space.
    8.     div>
    9.   div>
    1. .parent {
    2.     display: grid;
    3.     /分两列，一列最小150px,最大占比25%， 一列自适应*/
    4.     grid-template-columns: minmax(150px, 25%) 1fr;
    5.   }

    固定的header 和 footer

    固定高度的 header 和 footer，占据剩余空间的 body 是经常使用的布局，我们可以利用 grid 和 fr 单位完美实现。

    1. <div class="parent">
    2.     <header class="blue section" contenteditable>Headerheader>
    3.     <main class="coral section" contenteditable>Mainmain>
    4.     <footer class="purple section" contenteditable>Footer Contentfooter>
    5.   div>
    1. .parent {
    2.     display: grid;
    3.     /* 分三行，1，3行auto，2行自适应 */
    4.     grid-template-rows: auto 1fr auto;
    5.   }

    经典的圣杯布局（古典圣杯布局）

    可以轻松地使用 Grid 布局来实现圣杯布局，并且是弹性的。

    1. <div class="parent">
    2.     <header class="pink section">Headerheader>
    3.     <div class="left-side blue section" contenteditable>Left Sidebardiv>
    4.     <main class="section coral" contenteditable> Main Contentmain>
    5.     <div class="right-side yellow section" contenteditable>Right Sidebardiv>
    6.     <footer class="green section">Footerfooter>
    7.   div>
    1. .parent {
    2.     display: grid;
    3.     grid-template: auto 1fr auto / auto 1fr auto;
    4.   }
    5.   
    6.   header {
    7.     padding: 2rem;
    8.     grid-column: 1 / 4;
    9.   }
    10.  
    11.   .left-side {
    12.     grid-column: 1 / 2;
    13.   }
    14.  
    15.   main {
    16.     grid-column: 2 / 3;
    17.   }
    18.  
    19.   .right-side {
    20.     grid-column: 3 / 4;
    21.   }
    22.  
    23.   footer {
    24.     grid-column: 1 / 4;
    25.   }

    有意思的叠块

    可以使用该repeat()功能在 CSS 中快速编写网格。使用：repeat(12, 1fr),对于网格模板，将会为你提供 12 列1fr

    使用span关键字。你可以设置起始线，然后设置从该起点跨越的列数。在这种情况下，grid-column: 1 / span 12将等价于grid-column: 1 / 13，grid-column: 2 / span 6将等价于grid-column: 2 / 8

    1. <div class="parent white">
    2.     <div class="span-12 green section">Span 12div>
    3.     <div class="span-6 coral section">Span 6div>
    4.     <div class="span-4 blue section">Span 4div>
    5.     <div class="span-2 yellow section">Span 2div>
    6.   div>
    1. .parent {
    2.     display: grid;
    3.     grid-template-columns: repeat(12, 1fr);
    4.   }
    5.   
    6.   .span-12 {
    7.     grid-column: 1 / span 12;
    8.   }
    9.  
    10.   .span-6 {
    11.     grid-column: 1 / span 6;
    12.   }
    13.  
    14.   .span-4 {
    15.     grid-column: 4 / span 4;
    16.   }
    17.  
    18.   .span-2 {
    19.     grid-column: 3 / span 2;
    20.   }
    21.  
    22.   /* centering text */
    23.   .section {
    24.     display: grid;
    25.     place-items: center;
    26.     text-align: center
    27.   }

    RAM技巧

    前端各种布局

    2022-03-02 09:08·前端开发

    一行css现代布局

    超级居中（Super Centered）

    1. <div class="parent" >
    2.     <div class="box coral" contenteditable>
    3.      测试
    4.     div>
    5.   div>
    1. .parent {
    2.     display: grid;
    3.     /*等价于align-items和justify-items都设置为center*/
    4.     place-items: center;
    5.   }

    可解构的自适应布局（The Deconstructed Pancake）

    关于flex，前置知识有一定的介绍。

    1. <div class="parent white">
    2.     <div class="box green">1div>
    3.     <div class="box green">2div>
    4.     <div class="box green">3div>
    5.  div>
    1. .parent {
    2.     display: flex;
    3.     flex-wrap: wrap;
    4.     justify-content: center;
    5.   }
    6.  
    7.   .box {
    8.     flex: 1 1 150px; /*  Stretching: */
    9.     flex: 0 1 150px; /*  No stretching: */
    10.     margin: 5px;
    11.   }

    经典的侧边栏

    同样使用 grid layout，可以结合 minmax() 实现弹性的 sidebar（这在你要适应大屏幕的时候很有用）。minmax(,) 就是字面意思。结合单位，非常优雅，避免了数学计算宽度等不灵活的手段（比如我们设置 gap 的时候）。

    1.  <div class="parent">
    2.     <div class="section yellow" contenteditable>
    3.       Min: 150px / Max: 25%
    4.     div>
    5.     <div class="section purple" contenteditable>
    6.       This element takes the second grid position (1fr), meaning
    7.       it takes up the rest of the remaining space.
    8.     div>
    9.   div>
    1. .parent {
    2.     display: grid;
    3.     /分两列，一列最小150px,最大占比25%， 一列自适应*/
    4.     grid-template-columns: minmax(150px, 25%) 1fr;
    5.   }

    固定的header 和 footer

    固定高度的 header 和 footer，占据剩余空间的 body 是经常使用的布局，我们可以利用 grid 和 fr 单位完美实现。

    1. <div class="parent">
    2.     <header class="blue section" contenteditable>Headerheader>
    3.     <main class="coral section" contenteditable>Mainmain>
    4.     <footer class="purple section" contenteditable>Footer Contentfooter>
    5.   div>
    1.  .parent {
    2.     display: grid;
    3.     /* 分三行，1，3行auto，2行自适应 */
    4.     grid-template-rows: auto 1fr auto;
    5.   }

    经典的圣杯布局（古典圣杯布局）

    可以轻松地使用 Grid 布局来实现圣杯布局，并且是弹性的。

    1. <div class="parent">
    2.     <header class="pink section">Headerheader>
    3.     <div class="left-side blue section" contenteditable>Left Sidebardiv>
    4.     <main class="section coral" contenteditable> Main Contentmain>
    5.     <div class="right-side yellow section" contenteditable>Right Sidebardiv>
    6.     <footer class="green section">Footerfooter>
    7.   div>
    1. .parent {
    2.     display: grid;
    3.     grid-template: auto 1fr auto / auto 1fr auto;
    4.   }
    5.   
    6.   header {
    7.     padding: 2rem;
    8.     grid-column: 1 / 4;
    9.   }
    10.  
    11.   .left-side {
    12.     grid-column: 1 / 2;
    13.   }
    14.  
    15.   main {
    16.     grid-column: 2 / 3;
    17.   }
    18.  
    19.   .right-side {
    20.     grid-column: 3 / 4;
    21.   }
    22.  
    23.   footer {
    24.     grid-column: 1 / 4;
    25.   }

    有意思的叠块

    可以使用该repeat()功能在 CSS 中快速编写网格。使用：repeat(12, 1fr),对于网格模板，将会为你提供 12 列1fr

    使用span关键字。你可以设置起始线，然后设置从该起点跨越的列数。在这种情况下，grid-column: 1 / span 12将等价于grid-column: 1 / 13，grid-column: 2 / span 6将等价于grid-column: 2 / 8

    1. <div class="parent white">
    2.     <div class="span-12 green section">Span 12div>
    3.     <div class="span-6 coral section">Span 6div>
    4.     <div class="span-4 blue section">Span 4div>
    5.     <div class="span-2 yellow section">Span 2div>
    6.   div>
    1. .parent {
    2.     display: grid;
    3.     grid-template-columns: repeat(12, 1fr);
    4.   }
    5.   
    6.   .span-12 {
    7.     grid-column: 1 / span 12;
    8.   }
    9.  
    10.   .span-6 {
    11.     grid-column: 1 / span 6;
    12.   }
    13.  
    14.   .span-4 {
    15.     grid-column: 4 / span 4;
    16.   }
    17.  
    18.   .span-2 {
    19.     grid-column: 3 / span 2;
    20.   }
    21.  
    22.   /* centering text */
    23.   .section {
    24.     display: grid;
    25.     place-items: center;
    26.     text-align: center
    27.   }

    RAM技巧

    RAM，`repeat、auto-(fit|fill)和minmax()三个的简写，这在弹性布局 图片/box 这类非常有用(一行可以排放的卡片数量自动适应)。

    1. <div class="parent white">
    2.     <div class="box pink">1div>
    3.     <div class="box purple">2div>
    4.     <div class="box blue">3div>
    5.     <div class="box green">4div>
    6.   div>
    1. .parent {
    2.     display: grid;
    3.     grid-gap: 1rem;
    4.     /*核心*/
    5.     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    6.   }

    当前宽度是 160px（不考虑 gap），那么上面四个 box 的宽度会自适应为 160px,并且分为 4 行
    当前宽度是 310px （不考虑 gap），上面四个 box 分成两行，两个 box 平分宽度
    当满足一行放下 3 个box 时，第三个 box 自动到第一行
    当满足一行放下 4 个 box 时，第四个 box 自动到第一行

    卡片弹性适应

    无论是宽度或高度的收缩还是延展，都可以完美地展现 card 的布局。

    1. <div class="parent white">
    2.     <div class="card yellow">
    3.       <h3>Title - Card 1h3>
    4.       <p contenteditable>Medium length description with a few more words here.p>
    5.       <div class="visual pink">div>
    6.     div>
    7.     <div class="card yellow">
    8.       <h3>Title - Card 2h3>
    9.       <p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.p>
    10.       <div class="visual blue">div>
    11.     div>
    12.     <div class="card yellow">
    13.       <h3>Title - Card 3h3>
    14.       <p contenteditable>Short Description.p>
    15.       <div class="visual green">div>
    16.     div>
    17.   div>
    1. .parent {
    2.     height: auto;
    3.     display: grid;
    4.     grid-gap: 1rem;
    5.    /*核心*/
    6.     grid-template-columns: repeat(3, 1fr);
    7.   }
    8.  
    9.   .visual {
    10.     height: 100px;
    11.     width: 100%;
    12.   }
    13.  
    14.   .card {
    15.     display: flex;
    16.     flex-direction: column;
    17.     padding: 1rem;
    18.     justify-content: space-between;
    19.   }
    20.  
    21.   h3 {
    22.     margin: 0
    23.   }

    使用 clamp 实现 fluid typography

    使用最新的 clamp() 方法可以一行实现 fluid typography。提高 UX，非常适合包含阅读内容的 card，因为我们不希望一行字太短或太长。

    1. <div class="parent white">
    2.     <div class="card purple">
    3.       <h1>Title Hereh1>
    4.       <div class="visual yellow">div>
    5.       <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.p>
    6.     div>
    7.   div>
    1. .parent {
    2.     display: grid;
    3.     place-items: center;
    4.   }
    5.  
    6.   .card {
    7.     /*核心*/
    8.     width: clamp(23ch, 50%, 46ch);
    9.     display: flex;
    10.     flex-direction: column;
    11.     padding: 1rem;
    12.   }
    13.  
    14.   .visual {
    15.       height: 125px;
    16.       width: 100%;
    17.     }

    完美实现比例

    aspect-ratio属性，当我调整卡片的大小时，绿色的视觉块会保持这个 16 x 9 的纵横比。长宽比由于aspect-ratio属性而固定设置为: 16 / 9。

    1. <div class="parent white">
    2.     <div class="card blue">
    3.       <h1>Video Titleh1>
    4.       <div class="visual green">div>
    5.       <p>Descriptive text for aspect ratio card demo.p>
    6.     div>
    7.   div>
    1. .parent {
    2.     display: grid;
    3.     place-items: center;
    4.   }
    5.  
    6.   .visual {
    7.     /*核心*/
    8.     aspect-ratio: 16 / 9;
    9.   }
    10.  
    11.   .card {
    12.     width: 50%;
    13.     display: flex;
    14.     flex-direction: column;
    15.     padding: 1rem;
    16.   }

    在展现 CMS 或其他设计内容时，我们会期望图片、video、卡片能够按照固定的比例进行布局。而最新的 aspect-ratio 就能优雅地实现该功能(使用 chrome 84+)

  • 相关阅读:
    RK3588开发笔记（二）：基于方案商提供sdk搭建引入mpp和sdk的宿主机交叉编译Qt5.12.10环境
    Linux 下 chmod 777 修改权限
    写在冬日的第一天--一个女程序员第十八年工作总结
    探索如何将html和svg导出为图片
    PicPick工具
    字节跳动Dev Better技术沙龙来啦！参与活动赢好礼，限时免费报名中！
    09.06app端自动化
    【k8s】【网络】网络连通性问题排查
    【Github开源项目体验】- ZFile 基于 Java 的在线网盘
    力扣刷题day42|121买卖股票的最佳时机、122买卖股票的最佳时机II
  • 原文地址：https://blog.csdn.net/qq_35350009/article/details/126512742