• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

jonathantneal/flexibility: A JavaScript polyfill for Flexbox

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

jonathantneal/flexibility

开源软件地址:

https://github.com/jonathantneal/flexibility

开源编程语言:

JavaScript 65.6%

开源软件介绍:

flexibility

Flexibility Logo

A JavaScript polyfill for Flexbox

npm bower ci gitter

Flexibility is a polyfill for the Flexible Box Layout, commonly known as Flexbox. With Flexibility, you get to design beautiful, flexible layouts on the web without sacrificing the experience in older browsers.

Flexbox lays out, aligns, and distributes elements in a container, even when their size is unknown or dynamic. To better understand Flexbox, read Chris Coyier’s excellent Complete Guide to Flexbox.

To start using Flexbox in Internet Explorer 8 & 9 or any older browser, download the flexibility.js script and include it anywhere on your page.

<script src="flexibility.js"></script>

If you’re only targeting Internet Explorer 10 and lower, add a -js-display: flex declaration before any display: flex declarations in your CSS, or use PostCSS Flexibility to automate this during your build process.

.container {
	-js-display: flex;
	display: flex;
}

If you’re targeting other browsers, use the data-style attribute to alert these browsers to your changes.

<div data-style="display: flex;"></div>

When you’re ready to polyfill flexbox with JavaScript, use the flexibility method on the outermost element you would like to polyfill.

flexibility(document.documentElement);

API

The global flexibility method contains child functions for use within your own framework.

flexibility.read

Argument: Element

Return flexbox related styles from an element.

flexibility.readAll

Argument: Element

Return a list of flexbox details from a matching element or its descendants.

flexibility.write

Argument: Details

Writes flexbox details back to their respective elements.

flexibility.writeAll

Argument: Array

Writes a list of flexbox details back to their respective elements.


To learn more about Flexibility, read the support section.

If you experience an issue, read the contributing section before creating an issue.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap