您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > CSS

一行 CSS 实现 10 种现代布局

时间:2021-12-21 09:36:56  来源:  作者:前端晚间课

这篇文章重点介绍一些强大的 css 代码片段,用它们可以执行一些繁重的布局编程工作,还能帮助我们构建强大的新式CSS布局。

这里我们会介绍10 种新式 CSS 布局和大小调整技术,突出了单行CSS样式代码的强大和影响力。如果你在自己项目里面会使用Grid/Flexbox进行网站布局的话,相信这10个一行 CSS 代码的新式布局对你应该很有用,建议收藏呢!

知识回顾

flexbox布局

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

grid布局

作用在"容器"(container)

grid-template-columns属性定义每一列的列宽
grid-template-rows属性定义每一行的行高

repeat()简化重复的值,如下:

  grid-template-columns: 33.33% 33.33% 33.33%;
  
  /**等价于**/

  grid-template-columns: repeat(3, 33.33%);

repeat()接受两个参数,第一个参数是重复的次数(上例是3),第二个参数是所要重复的值。

repeat()重复某种模式也是可以的。

/*定义了6列,第一列和第四列的宽度为100px,第二列和第五列为20px,第三列和第六列为80px*/
grid-template-columns: repeat(2, 100px 20px 80px);

auto-fill与auto-fit

auto-fill单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充。

grid-template-columns: repeat(auto-fill, 100px);

fr表示比例关系,

/*二等分等宽的两列*/
grid-template-columns: 1fr 1fr;
/*第一列的宽度为150像素,第二列的宽度是第三列的一半*/
grid-template-columns: 150px 1fr 2fr;

minmax()函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。

/*表示列宽不小于100px,不大于1fr*/
grid-template-columns: 1fr 1fr minmax(100px, 1fr);

auto浏览器自己决定宽度

grid-template-columns: 100px auto 100px;

作用在"项目"(item)

justify-items属性设置单元格内容的水平位置(左中右),align-items属性设置单元格内容的垂直位置(上中下)place-items属性是align-items属性和justify-items属性的合并简写。

span表示"跨越",即左右边框(上下边框)之间跨越多少个网格

/*项目的左边框距离右边框跨越2个网格*/
grid-column-start: span 2;
grid-column-end: span 2;

.item-1 {
  background: #b03532;
  /*1~3个网格*/
  grid-column: 1 / 3; 
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  /*1开始,跨越2个网格*/
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

更多相关Grid布局,可以学习CSS Grid 网格布局教程

一行css现代布局

1、超级居中(Super Centered)


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

  .parent {
    display: grid;
    /*等价于align-items和justify-items都设置为center*/
    place-items: center;
  }

 

 

2、可解构的自适应布局(The Deconstructed Pancake)

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

 <div class="parent white">
    <div class="box green">1</div>
    <div class="box green">2</div>
    <div class="box green">3</div>
 </div>
 .parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
  }

 

 

 

 

3、经典的侧边栏

同样使用 grid layout,可以结合 minmax() 实现弹性的 sidebar(这在你要适应大屏幕的时候很有用)。minmax(,) 就是字面意思。结合单位,非常优雅,避免了数学计算宽度等不灵活的手段(比如我们设置 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>
.parent {
    display: grid;
    /分两列,一列最小150px,最大占比25%, 一列自适应*/
    grid-template-columns: minmax(150px, 25%) 1fr;
  }

 

 

 

 

4、固定的header 和 footer

固定高度的 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>
  .parent {
    display: grid;
    /* 分三行,1,3行auto,2行自适应 */
    grid-template-rows: auto 1fr auto;
  }

 

 

 

5、经典的圣杯布局(古典圣杯布局)

可以轻松的使用 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>


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

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

  main {
    grid-column: 2 / 3;
  }

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

  footer {
    grid-column: 1 / 4;
  }

 

 

 

6、有意思的叠块

<div class="parent white">
    <div class="span-12 green section">Span 12</div>
    <div class="span-6 coral section">Span 6</div>
    <div class="span-4 blue section">Span 4</div>
    <div class="span-2 yellow section">Span 2</div>
  </div>
  
.parent {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  
  .span-12 {
    grid-column: 1 / span 12;
  }

  .span-6 {
    grid-column: 1 / span 6;
  }

  .span-4 {
    grid-column: 4 / span 4;
  }

  .span-2 {
    grid-column: 3 / span 2;
  }

  /* centering text */
  .section {
    display: grid;
    place-items: center;
    text-align: center
  }

可以使用该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

 

 

 

 

7、RAM技巧

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

<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>
.parent {
    display: grid;
    grid-gap: 1rem;
    /*核心*/
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

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

 

 

当我们将 auto-fit 改为 auto-fill:

 

 

8、卡片弹性适应

<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>
 .parent {
    height: auto;
    display: grid;
    grid-gap: 1rem;
   /*核心*/
    grid-template-columns: repeat(3, 1fr);
  }

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

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

  h3 {
    margin: 0
  }

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

一行 CSS 实现 10 种现代布局

 

9、使用 clamp 实现 fluid typography

<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>
 .parent {
    display: grid;
    place-items: center;
  }

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

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

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

一行 CSS 实现 10 种现代布局

 

10、完美实现比例

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


  <div class="parent white">
    <div class="card blue">
      <h1>Video Title</h1>
      <div class="visual green"></div>
      <p>Descriptive text for aspect ratio card demo.</p>
    </div>
  </div>
  .parent {
    display: grid;
    place-items: center;
  }

  .visual {
    /*核心*/
    aspect-ratio: 16 / 9;
  }

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

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

一行 CSS 实现 10 种现代布局

 

参考资料

Flex 布局教程:语法篇
CSS Grid 网格布局教程
Ten modern layouts in one line of CSS



Tags:CSS   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
这篇文章重点介绍一些强大的 CSS 代码片段,用它们可以执行一些繁重的布局编程工作,还能帮助我们构建强大的新式CSS布局。这里我们会介绍10 种新式 CSS 布局和大小调整技术,突出...【详细内容】
2021-12-21  Tags: CSS  点击:(7)  评论:(0)  加入收藏
其实文章原名叫做 “碰到不支持 flex 的项目怎么办?”现在差不多已经是 flex 的天下了,简单灵活,但有时还是不可避免地会接触到 IE 浏览器,比如我最近接触的 阅文作家专区 (qq....【详细内容】
2021-06-17  Tags: CSS  点击:(157)  评论:(0)  加入收藏
在 mac 文件管理中有这样一个小细节。 当文件名不超过一行时,完整显示,此时鼠标放上去无任何提示 当文件名超过一行时,出现省略号,此时鼠标放上去提示显示完整文件名 一个很微...【详细内容】
2021-05-25  Tags: CSS  点击:(186)  评论:(0)  加入收藏
多行文本展开收起是一个很常见的交互, 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当...【详细内容】
2021-05-21  Tags: CSS  点击:(183)  评论:(0)  加入收藏
前言在写过一段时间 CSS 之后,大家对于常见的属性应该都很熟悉,例如最基本的 display、position、padding、margin、border、background 等等,在写 CSS 的时候不需要特别查什...【详细内容】
2021-04-27  Tags: CSS  点击:(258)  评论:(0)  加入收藏
在浏览器开始实现它们之前,CSS 新的功能通常需要经过长时间讨论之后,才在W3联盟的规范中定义。有许多值得一提的 CSS 新功能,但是在本文中,我们重点介绍可以浏览器的稳定版中进...【详细内容】
2020-11-11  Tags: CSS  点击:(80)  评论:(0)  加入收藏
简介CSS 包含了许多函数,而且它能够完成许多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加进来,这让我们的开发更加轻松,也减少了对JavaScript的依赖。CSS 函...【详细内容】
2020-09-07  Tags: CSS  点击:(74)  评论:(0)  加入收藏
当我们非常专注写代码时候,我们往往会无意识的写出一些无效CSS代码。 我把这种称为 “潜意识错误”。 导致这种错误后,我们经常会反问自己:“为什么我写出这样低级错误?” 不过,...【详细内容】
2020-08-26  Tags: CSS  点击:(71)  评论:(0)  加入收藏
这是Chrome浏览器中的一个新的实验性功能!现在,我们可以了解一个网站上使用的CSS的概况,从颜色的数量到未使用的声明数量......甚至是定义的媒体查询的总数。同样,这是一个实验...【详细内容】
2020-07-21  Tags: CSS  点击:(94)  评论:(0)  加入收藏
前文中我们对CSS超炫加载动画设计、实现与实例进行了讲解与说明,通过学习可知使用CSS提供的animation属性及伪元素等可以实现精美的CSS动画效果的设计与开发。本文我们将继续...【详细内容】
2020-07-09  Tags: CSS  点击:(56)  评论:(0)  加入收藏
▌简易百科推荐
Chrome 正在试验 CSS @container 查询器功能,这是由 Oddbird 的 Miriam Suzanne 和一群网络平台开发者支持的 CSS 工作组 Containment Level 3 规范。@container 查询器使我...【详细内容】
2021-12-23  前端晚间课    Tags: CSS   点击:(8)  评论:(0)  加入收藏
CSS选择器很强大下面是我在工作中使用最多的一些选择器:相邻元素, 英文称为sibling, 也就是兄弟姐妹的意思.其实很形象, 比喻两个dom是相邻的.但是邻居很多, 紧密相邻的, 还...【详细内容】
2021-12-23  不只是个小前端    Tags:CSS选择器   点击:(6)  评论:(0)  加入收藏
这篇文章重点介绍一些强大的 CSS 代码片段,用它们可以执行一些繁重的布局编程工作,还能帮助我们构建强大的新式CSS布局。这里我们会介绍10 种新式 CSS 布局和大小调整技术,突出...【详细内容】
2021-12-21  前端晚间课    Tags:CSS   点击:(7)  评论:(0)  加入收藏
CSS框架提供了设计一致解决方案的基本结构,以解决前端web开发中的常见问题。它们提供了通用功能,可以针对特定场景和应用程序进行覆盖。这大大减少了开始创建应用程序和网站所...【详细内容】
2021-12-06  粤嵌教育    Tags:v   点击:(15)  评论:(0)  加入收藏
作者:前端进阶者来源:前端进阶学习交流一、前言 我们经常在网页上 ,游戏界面加载时会看到加载进度条的效果,我们往往会以为这些加载进度条的效果,很难实现。今天教大家JS+CSS结合...【详细内容】
2021-11-05  Nodejs开发    Tags:CSS   点击:(45)  评论:(0)  加入收藏
<template> <div> <div class="triangle"></div> </div></template><style scoped> .triangle { width: 0; height: 0; border-width: 20px; border-styl...【详细内容】
2021-11-04  荣邦小伙917    Tags:css   点击:(39)  评论:(0)  加入收藏
一提起图标,大家可能第一个会想到PS、美工等词语,但很多小图标现在根本都不需要再打开PS了。1、常见的括号( 前进或后退“>” ).arrow{ width:12rpx; height:12rpx; border-...【详细内容】
2021-10-12  滇東小贰锅    Tags:css   点击:(54)  评论:(0)  加入收藏
在过去的几年里,Web开发已经变得非常流行。每年都会发布许多前端框架,Bootstrap一直是最受欢迎的一个,但是,还有许多其他的框架,你可能没有听说过,但绝对值得一试。想学的同学可以...【详细内容】
2021-09-27  粤嵌教育    Tags:CSS框架   点击:(73)  评论:(0)  加入收藏
水平和垂直对齐第一种方式 : grid + place-items .parent { display: grid; place-items: center; } /*注: place-items 是 justify-items 和 align-items 的简写属性 */...【详细内容】
2021-09-02  又菜又爱学习的程序员    Tags:CSS   点击:(84)  评论:(0)  加入收藏
5个有用的 CSS 布局生成器1、 cssgr.id如果你是前端开发人员,这是一个非常有用的网站。你可以首先指定所需的行数和列数,或者在给定的选项中进行选择,然后为其生成代码。这使你...【详细内容】
2021-08-26  程序员文周    Tags:css布局   点击:(144)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条