CSS■ 完成 10 种当代合理布局的编码_公众号抽奖怎么弄_如何建微信公众号_如何建立公众号微信_公众号制作模板

序言

星期日在家里看 web.dev 的 2020 三天 live，发觉很多有趣的物品，在其中有一项是有关 CSS 的，网络主播是 Una Kravets（chrome team 组员）。尽管我早已很多月沒有深层次科学研究 CSS 的物品了，但是之前的功底仍在（有兴趣爱好的能看我一年以前公布的有关 CSS 的物品，尽管因为太过最底层没啥人想要看, sad）。

留意：下边大部分分编码早已由各种流行全新访问器完成，谨记不必应用在 production 之中假如是微信公众号的阅读者，因为外部链接缘故，能够点一下阅读文章全文，github page 里边有更为详尽的 demo

文章正文

01. 非常垂直居中

在沒有 flex 和 grid 以前，竖直垂直居中一直不可以很雅致的完成。而如今，大家能够融合 grid 和 place-items 雅致的同时完成 水准垂直居中 和 竖直垂直居中 。

<div class="parent blue" >
  <div class="box coral" contenteditable>
    :)
  </div>

.ex1 .parent {
    display: grid;
    place-items: center;
  }

MDN, place-items 特性详细说明

codepen 详细地址

02. 能解构的响应式合理布局(The Deconstructed Pancake)

flex: 0 1 <baseWidth>

这类合理布局常常出現在电子商务网站：

在 viewport 充足的情况下，三个 box 固定不动总宽横放

在 viewport 不足的情况下（例如在 mobile 上边），总宽依然固定不动，可是全自动结构（谅解我的汉语水准），没有同一水准表面

<div class="parent white">
    <div class="box green">1</div>
    <div class="box green">2</div>
    <div class="box green">3</div>
  </div>

.ex2 .parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ex2 .box {
    flex: 1 1 150px; /*  flex-grow: 1 ，表明全自动延伸到较大总宽 */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
  }

当我们们设定 flex: 1 1 150px;

情况下：

codepen 详细地址

03. 經典的 sidebar

grid-template-columns: minmax(<min>, <max>) ...

一样应用 grid layout，能够融合 minmax() 完成延展性的 sidebar（这在你需要适应大屏幕幕的情况下很有效）。 minmax(<min>, <max>) 便是字面上含意。融合 <flex> 企业，十分雅致，防止了数学课测算总宽等不灵便的方式（例如大家设定 gap 的情况下）。

<div class="parent">
    <div class="section yellow" contenteditable>
    Min: 150px / Max: 25%
    </div>
    <div class="section purple" contenteditable>
      This element takes the second grid position (1fr), meaning
      it takes up the rest of the remaining space.
    </div>
  </div>

.ex3 .parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
  }

codepen 详细地址

04. 固定不动的 header 和 footer

grid-template-rows: auto 1fr auto

固定不动高宽比的 header 和 footer，占有剩下室内空间的 body 是常常应用的合理布局，大家能够运用 grid 和 fr 企业极致完成。

<div class="parent">
    <header class="blue section" contenteditable>Header</header>
    <main class="coral section" contenteditable>Main</main>
    <footer class="purple section" contenteditable>Footer Content</footer>
  </div>

.ex4 .parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

codepen 详细地址

05. 經典的圣杯合理布局(classical holy Grail layout)

grid-template: auto 1fr auto / auto 1fr auto

大家能够轻轻松松的应用 Grid 合理布局来完成圣杯合理布局，而且是延展性的。

<div class="parent">
    <header class="pink section">Header</header>
    <div class="left-side blue section" contenteditable>Left Sidebar</div>
    <main class="section coral" contenteditable> Main Content</main>
    <div class="right-side yellow section" contenteditable>Right Sidebar</div>
    <footer class="green section">Footer</footer>
  </div>

.ex5 .parent {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
  }
  
  .ex5 header {
    padding: 2rem;
    grid-column: 1 / 4;
  }

  .ex5 .left-side {
    grid-column: 1 / 2;
  }

  .ex5 main {
    grid-column: 2 / 3;
  }

  .ex5 .right-side {
    grid-column: 3 / 4;
  }

  .ex5 footer {
    grid-column: 1 / 4;
  }

codepen 详细地址

06. 有趣的叠块

应用 grid-template-columns 和 grid-column 能够完成以下图所显示的合理布局。进一步表明了 repeat 和 fr 的方便快捷性。

codepen 详细地址

07. RAM 方法

grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))

Una Kravets 称作 repeat, auto, minmax 方法。这在延展性合理布局 照片/box 这种十分有效(一行能够排污的卡牌总数全自动适应)。

.ex7 .parent {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

<div class="parent white">
    <div class="box pink">1</div>
    <div class="box purple">2</div>
    <div class="box blue">3</div>
    <div class="box green">4</div>
  </div>

其实际效果是假如可以考虑好几个 box 的最少总宽（例如上边的 150px ），全自动延展性适应放到几行。举个案子:

当今总宽是 160px （不考虑到 gap），那麼上边四个 box 的总宽会响应式为 160px ,而且分成 4 行
当今总宽是 310px （不考虑到 gap），上边四个 box 分为二行，2个 box 均分总宽
当考虑一行学会放下 3 个box 时，第三个 box 全自动到第一行
当考虑一行学会放下 4 个 box 时，第四个 box 全自动到第一行

假如大家将 auto-fit 改成 auto-fill :

08. 卡牌延展性响应式

justify-content: space-between ，融合 grid 和 flex 完成极致的卡牌合理布局。

<div class="parent white">
    <div class="card yellow">
      <h3>Title - Card 1</h3>
      <p contenteditable>Medium length description with a few more words here.</p>
      <div class="visual pink"></div>
    </div>
    <div class="card yellow">
      <h3>Title - Card 2</h3>
      <p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
      <div class="visual blue"></div>
    </div>
    <div class="card yellow">
      <h3>Title - Card 3</h3>
      <p contenteditable>Short Description.</p>
      <div class="visual green"></div>
    </div>
  </div>

.ex8 .parent {
    height: auto;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
  }

  .ex8 .visual {
    height: 100px;
    width: 100%;
  }

  .ex8 .card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    justify-content: space-between;
  }

  .ex8 h3 {
    margin: 0
  }

不管是总宽或高宽比的收拢還是延伸，都可以以极致的呈现 card 的合理布局。

codepen 详细地址

09. 应用 clamp 完成 fluid typography

clamp(<min>, <actual>, <max>)

应用全新的 clamp() 方式能够一行完成 fluid typography。提升 UX，十分合适包括阅读文章內容的 card，由于大家不期待一行字过短或过长。

<div class="parent white">
    <div class="card purple">
      <h1>Title Here</h1>
      <div class="visual yellow"></div>
      <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
    </div>
  </div>

.ex9 .parent {
    display: grid;
    place-items: center;
  }

  .ex9 .card {
    width: clamp(23ch, 50%, 46ch);
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }

  .ex9 .visual {
      height: 125px;
      width: 100%;
    }

MDN, clamp() 详细说明

10. 极致完成占比

aspect-ratio: <width> / <height>

在呈现 CMS 或别的设计方案內容时，大家会期待照片、video、卡牌可以依照固定不动的占比开展合理布局。而全新的 aspect-ratio 就可以雅致的完成该作用(应用 chrome 84+)

<div class="parent white">
    <div class="card blue">
      <h1>Video Title</h1>
      <div class="visual green"></div>
      <p>Descriptive Text. This demo works in Chromium 84+.</p>
    </div>
  </div>

.ex10 .parent {
    display: grid;
    place-items: center;
  }

  .ex10 .visual {
    aspect-ratio: 16 / 9;
  }

  .ex10 .card {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }

codepen 详细地址

到此这篇有关CSS 完成 10 种当代合理布局的编码的文章内容就详细介绍到这了,大量有关css 当代合理布局內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

技术知识

CSS■ 完成 10 种当代合理布局的编码

新闻资讯

在线客服