flex-layout-attribute

2018-07-14 admin

flex-layout-attribute是什么

什么是flex-layout-attribute,HTML layout helper based on CSS flexbox specification.

flex-layout-attribute介绍、flex-layout-attribute使用

<div>1</div>
<div>2</div>
<div>3</div>

</div>


[![View demo](https://camo.githubusercontent.com/9afd322e0004246f57e1923a36e2edee863dc988/687474703a2f2f70726f67726573736976657265642e636f6d2f6173736574732f696d672f666c612f666c612d6769746875622e706e67)](http://progressivered.com/fla/?d=0&v=1&h=1&s=0&i=000&a=000#playground)

### [](#benefits)Benefits

*   **Dedicated HTML attribute** — separated layout markup, semantic & concise syntax.
*   **Beyond grids** — ratio relationships, element sizes based on a scale.
*   **Rapid prototyping** — design in browser, quick iterations, no need to write CSS for layout.
*   **Solid base** — ease to extend and customize.

### [](#quick-start)Quick start

Several quick start options are available:

*   [Download the latest release](https://github.com/StefanKovac/flex-layout-attribute/releases)
*   Clone the repo: `git clone https://github.com/StefanKovac/flex-layout-attribute.git`.
*   Install with npm: `npm install flex-layout-attribute`.

### [](#usage)Usage

1.  Insert flex-layout-attribute.min.css in document HEAD:

```text-html-basic
<link href="path/to/css/flex-layout-attribute.min.css" rel="stylesheet">
  1. Add layout attribute to html elements:
<div layout="row center-justify">
    ...

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35970.html

文章标题:flex-layout-attribute

回到顶部