资讯专栏INFORMATION COLUMN

给萌新的Flexbox简易入门教程

王晗 / 1539人阅读

摘要:年末促销葡萄城岁末福利火热放送中近几年,领域出现了一些复杂的专用布局工具,用以代替原有的诸如使用表格浮动和绝对定位之类的各种变通方案。重点推荐年末促销葡萄城岁末福利火热放送中灵活高效的前端开发工具包,可快速搭建企业应用程序

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

【年末促销】葡萄城 2018 岁末福利火热放送中

近几年,CSS领域出现了一些复杂的专用布局工具,用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox,或者说是弹性盒子布局模块(Flexible Box Layout Module)是这些新布局工具中的第一个,接着是CSS网格布局模块(CSS Grid Layout Module)。我们会在本文给出一个易于理解的flexbox入门介绍。

随着CSS网格布局的引入,你可能会问flexbox布局是否真的还有必要。虽然它们所能做的事情有一些重叠,但其各自在CSS布局中有着非常特别的目的。一般来说,flexbox在一维场景(比如,一串类似的元素)下有最佳应用,而网格是二维场景下理想的布局方案(例如整个页面的元素)。

即便如此,flexbox仍可以用于整个页面的布局,这样它能为那些还不支持网格布局的浏览器提供合适的兼容处理。(必须承认,网格布局正在大多数现代浏览器中快速得到支持,不过对flexbox的支持仍然更为广泛,所以如果你想让你的布局在稍微老旧的浏览器中也生效,使用flexbox作为网格布局的降级方案是很容易的)。

使用Flexbox的好处

flexbox的一些好处是:

页面元素能被任意方向地放置(靠左、靠右、从上往下甚至从下往上)

布局内容的可视顺序能够被反转或重排

元素大小能“弹性”适应可用空间,并根据容器或者兄弟元素进行相应地对齐

能轻松实现等列宽布局(与每一列里面的内容无关)

为了阐述其多样的属性和可能性,让我们假设下面有这样的布局用例:

header content here
main content here
footer content here

首先,是把元素一起放进.main里,比如,

相关文章

  • 给萌新的Flexbox简易入门教程

    摘要:我们会在本文给出一个易于理解的入门介绍。项的顺序的属性另外一个的能力,是能够轻松改变元素的显示顺序。她想让成为页面的第一个元素,显示在之前。可接受的值有,或者一个数字后面紧跟着,,或其他长度单位。 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://www.sitepoint.com/flexbox-css-flexible-...

    KavenFan 评论0 收藏0
  • 剖析简易计算器带你入门微信小程序开发

    摘要:源码分析这个简易计算器界面布局依然延续祖制,采用布局,貌似微信官方也是这么推荐的官方文档中就是使用。本计算器存在不完善和,因为重点不是实现全部功能,而是搞清楚微信小程序开发方法,所以非关注点不用在意。 写在前面,但是重点在后面 这是教程,也不是教程。 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCa...

    AaronYuan 评论0 收藏0
  • 剖析简易计算器带你入门微信小程序开发

    摘要:源码分析这个简易计算器界面布局依然延续祖制,采用布局,貌似微信官方也是这么推荐的官方文档中就是使用。本计算器存在不完善和,因为重点不是实现全部功能,而是搞清楚微信小程序开发方法,所以非关注点不用在意。 写在前面,但是重点在后面 这是教程,也不是教程。 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCa...

    Hanks10100 评论0 收藏0
  • 剖析简易计算器带你入门微信小程序开发

    摘要:源码分析这个简易计算器界面布局依然延续祖制,采用布局,貌似微信官方也是这么推荐的官方文档中就是使用。本计算器存在不完善和,因为重点不是实现全部功能,而是搞清楚微信小程序开发方法,所以非关注点不用在意。 写在前面,但是重点在后面 这是教程,也不是教程。 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCa...

    RichardXG 评论0 收藏0

发表评论

0条评论

王晗

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<