课程咨询 :0571-56020837 QQ:162157806

南昌达内UI名师

南昌UI培训 > 达内新闻 > 网页制作必备,CSS3的Flexbox布局方法
  • 网页制作必备,CSS3的Flexbox布局方法

    发布:南昌UI培训      来源:优设网      时间:2016-04-19


  •     HTML和CSS是一个强大的内容发布机制,具有易学、灵活和强大等优点。如果你想制作一个复杂的多列布局,CSS3的 Flexbox布局模块是一个最佳的选择。

        Flexbox 布局是CSS3中最值得期待也是最实用的功能之一。强大的Flexbox 不仅让平板和手机上的小规模布局更加轻松自如,它还足以应对各种类型的大型项目的复杂布局设计。

        南昌达内UI培训专家整理了20个基于Flexbox的布局方案,代码、框架应有尽有,你可以根据需要来使用。

    Flex Box Editor

        你可以在 Flex Box Editor 上测试你的Flexbox 布局,你可以轻松添加、删除、选取子元素,并控制它们的布局、方向、对齐方式和换行规则。

    cssPlus

        cssPlus 是一款标准的Web脚手架工具,它能够生成轻量级、健壮的、能同现代浏览器完美兼容的响应式布局。整个UI布局非常人性化,即使是新手也相当容易上手。

    Bulma

        Bulma 有着安全和灵活的特色,这使得它可以很好的在项目开发上帮到你。使用方法很简单:添加新的列,系统会帮你自动为不同的浏览器做好适配的。

        它还配备了灵活的导航栏、多功能的媒体控件、可以轻松管控的内容、多种多样的类和各种基础的核心组件。

    Flexbox Grid

        Flexbox Grid 是一款轻量级但足够强健的栅格系统,它可以帮你精细地管控内容。这意味着你可以使用嵌套的栅格,并且能够针对列的尺寸、偏移、可视宽度、对齐和其他的属性进行响应式的调整。

    Kube

        Kube 是一个基于CSS的框架,用来快速搭建现代的、轻量级界面的工具。它能够制作清晰准确的排版布局,非常适合用来制作栅格系统,并且支持目前流行的桌面端和移动端浏览器。

    Flexbox Responsive Grid Playground

        Marco Lago 拿Flexbox 来做了一些响应式设计的测试,虽然结果看起来并不是特别理想,但是你可有将他的经验视作为一个可靠的起点。以此为基础来进行嵌套式栅格、间距可变的流态式分栏布局等等。

    CSS Flexbox Grid

        CSS Flexbox Grid 是在时下流行的卡片式布局的启发下的产物,这个模板包含了图库区、侧边栏导航和顶部导航栏,整体显得整洁而时尚。这种和谐的结构适用于众多不同的项目。

    Flexbox Equal Height Columns

        这种布局非常适合于图片展示、作品展示和博客类的网站,每个区块都可以用来承载图片、内容甚至更复杂的展现形式。其中的栅格系统足够灵活,可以匹配不同尺寸的屏幕。

    Flexbox Cards

        顾名思义,Flexbox Cards 是一个基于Flexbox 和卡片式设计的解决方案,它看起来干净而平衡。不同类型的信息被整齐地排列起来,并精心地被卡片承载起来,虽然看起来略简单。尽管如此,它确实使用而有效。

    Feather Flex

        Feather Flex 是一款简单、极简且极其轻量的、基于Flaxbox 的模板。它有着清晰的边界,合理而审慎的间距设定,虽然结构看起来略显乏味,但是它使用范畴相当广泛。

    Flexbox Cards Layout + Fallback

        这个代码片段同样实现了卡片式设计,充分调用了CSS罪行的特性,并且借助检测工具来解决浏览器兼容性问题。此外,在类的使用上还充分调用了BEM语法。

    Flexbox Off Canvas Menu

        Flexbox Off Canvas Menu 的设计是围绕着触摸屏设备来做的,隐藏的侧边栏收纳了几乎所有的选项,当用户点击汉堡菜单的时候,侧边栏会顺滑地展开。设计的样式并不算新颖,但是总体兼容性良好,紧凑且对移动端友好。

    Navigation menus using CSS flexbox

        这也是一个使用Flexbox来设计导航的项目。这个导航有着令人愉悦的外观,典型的线性结构和优化过的功能。

    Flexbox grid layout w/ Mobile Menu

        Lindsey 为大家分享的这个模板有着良好的组织性和现代的设计,高度一致的页头、精简的导航栏,大面积的展示图片、内容块和页脚。这个模板有很强的一致性。

    Flexbox Grid

        Flexbox Grid 是在Flex的基础上建立起来的,而整个栅格的设计则是基于Bootstrap 的规则,这样使得它可以针对不同的屏幕良好的响应,即使作为单独的模块来使用或者同Topcoat协同联动,也相当的不错。

    A Better Responsive Image Gallery With Flexbox

        仔细看这个图库的设计和其他的并没有什么差异,但是它其实经过有趣的调整,在大型的桌面显示器上,你很难发现这些有趣的属性。然而当你使用平板和手机开始浏览的时候,所有的项目都会按照栅格来布局,最后单独占一排的图片会被放大,宽度与整个布局相同,营造出顺滑而一致的体验。

    Angular Resizable

        Angular Resizable 是一个用来创造尺寸可调容器的解决方案,CSS 在其中起到了决定性的作用。

    Flexibility

        Flexibility 是一款在Flexbox布局模块基础上研发的增强型布局框架,这款工具旨在让老旧IE之类的浏览器也可以用上更优秀的布局。

    Cyanotype

        Cyanotype 是一款布局框架,它适用于SASS驱动下的界面,轻量级、快速和高效是它的特色。

    Ginger

        Ginger 是一款拥有12个分栏的响应式栅格系统,它是栅格系统中最极简的可行版本。






    译文链接:http://www.uisdc.com/webdesign-flexbox-snippets-tools
    优设译文:@陈子木
    原文地址:designmodo
    原文作者:Nataly Birch
    推荐文章

上一篇:25款小巧灵活的SKETCH插件

下一篇:9个新人常见的表单设计问题

最新开班日期  |  更多

UI设计培训免费训练营

UI设计培训免费训练营

开班日期:每周一

UI设计培训高级班

UI设计培训高级班

开班日期:每周一

UI设计培训全日制班

UI设计培训全日制班

开班日期:每周一

UI设计培训周末班

UI设计培训周末班

开班日期:每周一

  • 地址:南昌市北京西路156号洪城大厦10楼
  • 课程培训电话:0571-56020837 QQ:162157806     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.com.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56