Flexify Example

Flexify Example 介绍

Flexify is a jQuery plugin which allows web authors to create fluid, full-
page, flexible layouts for their web applications. Overlaying the CSS Box
model, Flexify lets you specify flexible dimensions for content, margin,
padding, borders, or position, by taking up all available space on a page.
Additionally, Flexify can define whether an elements displays its children
vertically (the default) or horizontally, creating rows or columns of
elements.

Introduction

Flexify adds the flow and flex functions to jQuery. The former allows you
to specify whether an element has vertical or horizontal ‘flow’, changing the
orientation of how its children are displayed. The latter lets you specify
which CSS properties should ‘flex’ and take up all available space.

Example

Using the following page:

<body> <div style="background: red">This is some content.</div> <div style="background: blue">This is some content.</div> <div style="background: green">This is some content.</div> </body>

The following script would create three full-page rows:

$(function () { /* make the page full-height, and divide the height of each row evenly */ $('html, body, div').flex('height', 1); /* flexify the document */ $(document).flexify(); });

Similarly, we Could create three full-page columns with the following script:

$(function () { /* make the page and columns full-height */ $('html, body, div').flex('height', 1); /* split the widths of the three columns evenly */ $('div').flex('width', 1); /* three columns in a row */ $('body').flow('horizontal'); /* flexify the document */ $(document).flexify(); });

Usage

To use Flexify, include flexify.js in your page. In your document.ready
script, you can then add calls to the flow and flex methods of any
element. Finally, after specifying all flexible properties, add a call to
$(document).flexify().

The flow function takes one argument, either the string "vertical" or
"horizontal". This determines the ‘flow’ or orientation of its children.
Additionally, you can retrieve the flow of any object (if any) by calling this
function without arguments.

The flex function takes two arguments: the property to flexify, and the flex
ratio. The property can be a string of any of the margin-*, padding-*,
border-*, width, or height properties, as well as top, right,
bottom, or left for positioned elements. The flex ratio is any integer
greater than 0 (usually 1), which is calculated as a ratio with other
properties on the same axis to determine how free space is divided.

browser Support

Flexify is currently supported for Firefox 2.0+ , IE 6+ , and Opera
9.0+ , and Safari 3.

Demos

Flexify Example 官网

http://plugins.jquery.com/project/Flexify