神刀安全网

Flex Layout Attribute

03. Documentation

Download latest release from GitHub and include flex-layout-attribute.min.css in your HTML document:

<!-- 1) insert FLA css in document HEAD --> <link href="css/flex-layout-attribute.min.css" rel="stylesheet">  <!-- 2) now you are ready to use layout & self attributes --> <div layout="row center-justify">     ... </div> 

SASS files are provided in ‘sass’ directory (see project on GitHub ) for further customization. FLA is built with Gulp but you can download and include ‘sass’ folder in your preferable build setup (grunt, webpack etc.)

FLA is defined with two custom HTML attributes:

  • layout — use it on container(parent) element to set layout of its children elements
  • self — use it on container/child element to set size or align for element itself

Overview of FLA syntax with available values:

<div layout="direction vertically-horizontally reverse">     <div self="size align order display">         ...     </div> </div> 

NOTE: Vertical and horizontal distribution values MUST be conected with single dash "-".

row horizontal flow of items forced into single row
rows horizontal flow of items and can be wrapped in multiple rows
column vertical flow of items forced into single column
columns vertical flow of items and can be wrapped in multiple columns
Responsive prefixes Conditionally switch FLA direction based on viewport width. Example:
<div layout="row md-column">...</div>
No prefix by default. Direction not scoped.
sm- Scoped, (max-width: 40em)
md- Scoped, (max-width: 52em)
lg- Scoped, (max-width: 64em)
top items are placed toward the top of the container
center items are placed toward the vertical center of the container
bottom items are placed toward the bottom of the container
justify items are vertically evenly distributed.
spread space between vertical items is evenly distributed.
stretch items are stretched evenly (to the sam height) to occupy whole height of the container
left items are placed toward the left side of the container
center items are placed toward the horizontal center of the container
right items are placed toward the right side of the container
justify items are horizontally evenly distributed.
spread space between horizontal items is evenly distributed.
stretch items are stretched evenly (to the same width) to occupy whole width of the container
reverse appearance order of items is reversed
Item proportional size Amount of the available space inside the container the item should take up regard to smallest sibling
size-x1 equal or maximum space
size-x2 2 times larger
size-x3 3 times larger
size-x4 4 times larger
size-x5 5 times larger
size-x6 6 times larger
size-x7 7 times larger
size-x8 8 times larger
size-x9 8 times larger
Item width in percents Item width relative to container width
size-1of5 width: 20%
size-1of4 width: 25%
size-1of3 width: 33.33%
size-2of5 width: 40%
size-1of2 width: 50%
size-3of5 width: 60%
size-2of3 width: 66.66%
size-3of4 width: 75%
size-4of5 width: 80%
size-1of1 width: 100%
Item width in pixels Fixed maximum width
size-xxsmall max-width: 240px
size-xsmall max-width: 360px
size-small max-width: 480px
size-smaller max-width: 600px
size-medium max-width: 720px
size-larger max-width: 840px
size-large max-width: 960px
size-xlarge max-width: 1200px
size-xxlarge max-width: 1440px
Two responsive sizes Set item size to match viewport full width (100%) or half width (50%). Media-query prefixes ** :
  • sm- (max-width: 40em)
  • md- (max-width: 52em)
  • lg- (max-width: 64em)

Examples:

<div self="size-x1 sm-full">...</div> <div self="size-1of3 lg-half">...</div> <div self="md-full">...</div> 
**-full {width: 100%; max-width: 100%; flex: 1 1 100%;}
**-half {width: 50%; max-width: 50%; flex: 1 1 50%;}
top Aligned toward the top of the container.
left Aligned toward the left side of the container.
center Aligned to the center of container.
right Aligned toward the right side of the container.
bottom Aligned toward the bottom of the container.
stretch Stretch item in opposite direction across whole container.
first First in the stack
order-1 Order position 1
order-2 Order position 2
order-3 Order position 3
last Last in the stack
Responsive order Item order based on viewport width. Media-query prefixes ** :
  • sm- (max-width: 40em)
  • md- (max-width: 52em)
  • lg- (max-width: 64em)

Examples:

<div self="size-x1 sm-last">...</div> <div self="md-first">...</div> 
**-first
**-last
show display : inherit;
hide display : none;
Responsive display Item display based on viewport width. Media-query prefixes ** :
  • sm- (max-width: 40em)
  • md- (max-width: 52em)
  • lg- (max-width: 64em)

Example:

<div self="sm-hide">...</div>
**-show
**-hide

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Flex Layout Attribute

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址