文章目录
首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

Css Grid fr单位

2019年02月28日 发布 阅读(309) 作者:懒炖

随着CSS Grid的所有兴起,我没有看到关于 fr新单位( CSS长度单元)(这里是 规范 )的讨论。 现在浏览器支持正在迅速改进这个功能,我认为现在是时候探索它如何与我们花哨的新布局引擎一起使用,因为使用它时有很多好处; 更易读和可维护的代码是进行切换的主要原因。

首先,让我们来看看我们通常如何考虑在CSS中构建网格。 在下面的示例中,我们创建了一个四列网格,其中每列的宽度相等:

  1. <div class="grid">
  2. <div class="column"></div>
  3. <div class="column"></div>
  4. <div class="column"></div>
  5. <div class="column"></div>
  6. </div>
  1. .grid {
  2. display: grid;
  3. grid-template-columns: repeat(4, 25%);
  4. grid-column-gap: 10px;
  5. }

如果您从未 repeat() 在该 grid-template-columns 属性之后 看过该 函数, 那么让我向您介绍CSS Grid的最新功能之一! 它本质上是一种简写,允许我们更简洁地描述重复值。 我们本来可以编写 grid-template-columns: 25% 25% 25% 25%; ,但它使用更清晰 repeat() ,特别是当你有更冗长的宽度(如 minmax() 表达式)时。

语法基本上是这样的:

repeat(number of columns/rows, the column width we want);

然而,到目前为止我们所做的事实上存在一些问题。

首先,为了使用这个简洁的CSS函数,我们不得不做一点点数学运算。 我们必须自己思考 网格的总宽度(100%)除以我们想要的列数(4) ,这使我们达到25%。 在这种情况下,数学非常简单,所以我们不必担心它,但在更复杂的例子中,我们可以完全避免进行数学计算,让浏览器为我们解决这个问题。 我们确实可以 calc() 使用,所以我们可以做到 repeat(4, calc(100% / 4) ,但即使这有点奇​​怪,无论如何还有另一个问题……

第二个问题是溢出问题。 因为我们将每列设置为25%和10 grid-column-gap 到10px,然后将网格元素推 到100%以上 。 通过查看上面的代码,你不希望事情发生,但这就是百分比的工作方式。 我们在上面的代码中真正说的是“将每列设置为视口宽度的25%, 并且 它们之间有10px的间隙。” 这是一个微妙的差异,但它导致布局的一个大问题。

我们无意中在这里引起了一些水平滚动:

这是该 fr 单位可以帮助我们的地方。

所述 fr 单元(一个“部分”)可以定义网格像任何其他时使用 CSS长度%pxem 。 让我们快速重构上面的代码来使用这个特殊的新值:

  1. .grid {
  2. display: grid;
  3. grid-template-columns: repeat(4, 1fr);
  4. grid-column-gap: 10px;
  5. }

这看起来与上面的示例完全相同,因为在这个例子中我们将四列中的每一列设置为一个分数(恰好是1/4或25%)。 但! x轴上没有溢出因为将每列设置为1fr会自动考虑该10px并从每列可用的总宽度中减去它。

为什么我应该学习如何使用这个花哨的新CSS长度,如果我可以大多坚持百分比或像素的单位,你想知道吗? 好吧,让我们深入研究一个更复杂的CSS Grid示例来解释为什么 fr 它是更好的选择。 在一个新的例子中,假设我们想要在左侧导航,然后是十二列网格,它应该如下所示:

对于许多UI而言,这是一个非常典型的场景,因此使用该 fr 单元可以防止我们制作单独的网格div或者使用calc来摸索。 因为如果我们没有 fr 在上面的例子中 使用 ,那么我们必须弄清楚以下内容:

the width of each column = ((width of viewport - width of nav) / number of columns) * 1%

这是可能的,这是非常痛苦的阅读,如果我们改变导航的宽度,那么我们必须重新做那个愚蠢的计算。 相反,该 fr 单元将所有这些整理成一个超级可读的代码行:

  1. .grid {
  2. display: grid;
  3. grid-template-columns: 250px repeat(12, 1fr);
  4. grid-column-gap: 10px;
  5. }

我们在这里做的是为第一列设置一个固定的宽度(以像素为单位),然后创建十二个单独的列,这些列设置在一个“自由空间的一小部分”(字面意思是spec的短语)。 但是没有疯狂的计算或任何东西! 它是超级可读的,如果左侧导航的宽度发生变化,那么右侧列的宽度将自动调整。

通过一些小小的工作,我们已经使我们的界面在未来更加可维护,并且我们确保我们的代码对于即将到来的下一代开发人员更加清晰。


原文:https://css-tricks.com/introduction-fr-css-unit

参考

https://alligator.io/css/css-grid-layout-fr-unit/
https://www.w3cplus.com/css/css-grid-fr-unit.html

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • 关于JS和CSS的两个调查网站

    javascript年度调查已经执行了两三年,css调查刚刚才开始。通过这些调查, 我们可以了解到现在关注度最高的js\css是什么

    发布:2019-03-05 阅读(245)

  • CSS Grid网格布局指南(学习)

    CSS网格布局是CSS中最强大的布局系统。它是一个二维系统,这意味着它可以处理列和行,不像flexbox主要是一维系统。CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小、位置和图层之间的关系。像表格一样,网格布局让我们能够按行或列来对齐元素。 但是,使用CSS网格可能还是比CSS表格更容易布局。 例如,网格容器的子元素可以自己定位,以便它们像CSS定位的元素一样,真正的有重叠和层次。

    发布:2019-02-28 阅读(303)

  • 什么是Sass,SCSS与它是什么关系?

    什么是Sass,SCSS与它是什么关系?

    发布:2019-02-26 阅读(288)

  • css3 自定义浏览器滚动条(scrollbar)

    通过-webkit-scrollbar自定义浏览器滚动条,支持webkit的浏览器可正常显示(如chrome,safari,QQ浏览器,360极速等)

    发布:2019-01-28 阅读(288)

  • CSS中伪类和伪元素总结

    css伪类和伪元素有什么区别?

    发布:2019-01-14 阅读(243)

  • 视窗单位vm,vh,vmin,vmax

    记录下响应式布局单位(视窗单位:viewport units)的应用,最近用electron开发桌面应用,用到vh,vw还是蛮方便的.

    发布:2019-01-09 阅读(51)

  • 妙法攻略:渐变虚框及边框滚动动画的纯CSS实现

    CSS3实现滚动边框,渐变边框

    发布:2018-12-07 来源:张鑫旭

  • CSS3 手册

    CSS3 是层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。它带来了许多期待已久的新特性, 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式,如 multi-columns 、 flexible box 与 grid layouts。实验性特性以浏览器引擎为前缀(vendor-prefixed),应避免在生产环境中使用,或极其谨慎地使用,因为将来它们的语法和语义都有可能被更改。

    发布:2018-11-06 来源:mozilla

  • 利用iframe实现跨域访问

    利用iframe实现跨域

    发布:2014-03-19 阅读(113)

  • 利用rgba和filter设置CSS背景颜色半透明且不影响子元素,兼容IE6-8

    css设置子元素半透明,兼容IE6-8

    发布:2013-05-28 阅读(319)