Layout 相关的文章

  • 5分钟学会 CSS Grid 布局

    Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工具。CSS Grid 今年也获得了主流浏览器(Safari,Chrome,Firefox,Edge)的原生支持,所以我相信所有的前端开发人员都必须在不久的将来学习这项技术。

    2018-01-15 923 0 0
  • CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素(成为 Grid Items 网格项),你就可以轻松使用 Grid(网格) 布局。

    2018-01-14 533 0 0
  • 如何使用 CSS Grid 快速而又灵活的布局

    CSS Grid(网格) 模块是创建网站布局一个非常棒的工具。它能使你快速地进行布局尝试,比你尝试过的任何其他布局系统都快。

    2018-01-13 859 0 0
  • 使用CSS Grid和Flexbox制作Card

    “Card”这样的UI组件在现在的Web中经常可见,但我们制作这方面的UI组件方式仍然受到一定的限制。直到现在,通过CSS Grid和Flexbox的组合,可以使卡整齐对齐,响应性更好,并适应其中的内容。接下来看看我们是如何制作的。

    2017-12-19 646 0 0
  • Flexbox布局是如何工作的2

    Flexbox 布局将我们从CSS的邪恶(如垂直对齐)中拯救了出来。很好,Flexbox 确实实现了这个目标。 但掌握新的弹性模型可能还是具有一点挑战性的。所以,让我们以动图的形式来看看 Flexbox 的工作原理,这样我们可以使用它来构建更好的布局。

    2017-12-18 525 0 0
  • Flexbox布局是如何工作的1

    Flexbox 布局将我们从CSS的邪恶(如垂直对齐)中拯救了出来。很好,Flexbox 确实实现了这个目标。 但掌握新的弹性模型可能还是具有一点挑战性的。所以,让我们以动图的形式来看看 Flexbox 的工作原理,这样我们可以使用它来构建更好的布局。
    Flexbox 的基本原理是让布局变得灵活和直观。

    2017-12-17 708 0 0
  • Flexbox制作CSS布局易如反掌

    伸缩盒模型(flexbox)是一个新的盒子模型,主要优化了UI布局。作为实际布局的第一个CSS模块(浮动真的应该主要用来制作文本围绕图片这样的效果),它使很多任务容易多。Flexbox的功能主要包手:简单使用一个元素居中(包括水平垂直居中),可以让扩大和收缩元素来填充容器的可利用空间,可以改变源码顺序独立布局,以及还有其他的一些功能。

    2017-11-27 799 0 0
  • 使用Flexbox:新旧语法混用实现最佳浏览器兼容

    Flexbox非常的棒,肯定是未来布局的一种主流。在过去的几年这之中,语法改变了不少。但是,如果我们把Flexbox新语法、旧语法和中间过渡语法混合在一起使用,我们就可以让浏览器得到完美的展示。尤其是对一个简单的和最可能常见的实例:控制网格顺序。

    2017-11-21 688 0 0
  • Responsive列布局

    布局在前端技能说的也比较多了,但Responsive的列布局还是第一回说,(如果你是第一次听说Responsive这个词,建议你点击这和先了解Responsive)。今天看到一篇有关于Responsive的列布局教程,觉得值得一读,将其译成中文,希望对有需要的同学有所帮助。

    2017-11-19 780 0 0