Template:Flex/doc

From Project: Gorgon Wiki
Jump to: navigation, search
CC
BY
This template and it's documentation are licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 license.


Attribution details: By wikipedia:User:TriMoon
Created originally for Project Gorgon Wiki in May 2016.
See Original and it's sub-pages.

Description

This collection of templates is designed to ease the cration and use of CSS3 Flexbox'es.
A Flexbox consists of flex containers and flex items.
Quoting: CSS3 Flexbox@w3schools

CSS3 Flexbox
Flexible boxes, or flexbox, is a new layout mode in CSS3.
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

CSS3 Flexbox Concepts
Flexbox consists of flex containers and flex items.
A flex container is declared by setting the display property of an element to either flex (rendered as a block) or inline-flex (rendered as inline).
Inside a flex container there is one or more flex items.

Note:
Everything outside a flex container and inside a flex item is rendered as usual. Flexbox defines how flex items are laid out inside a flex container.

Flex items are positioned inside a flex container along a flex line. By default there is only one flex line per flex container.

Dependencies

Syntax

Type Template:T somewhere.

Parameters

  • Recommended: |paramX=
    Your explanation here.
    Default: |value

Flex/Container

This is the main container to contain Flex-Item's.
It needs to be populated with 2 or more Template:T's to be of any use.
It needs to be followed by a terminating Template:T.

Syntax

Type Template:TFlex-Item'sTemplate:T somewhere.

Parameters

  1. Optional: |bgColor=
    Sets the background color of the container.
    Default: |bgColor=lightgrey
  2. Optional: |direction=

    The flex-direction property specifies the direction of the flexible items.
    Possible value is one of: row, row-reverse, column, column-reverse, initial or inherit.
    Default: |direction=row
  3. Optional: |justify=

    The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).
    Possible value is one of: flex-start, flex-end, center, space-between, space-around, initial or inherit.
    Default: |justify=flex-start
  4. Optional: |alignItems=

    The align-items property specifies the default alignment for items inside the flexible container.
    Possible value is one of: stretch, center, flex-start, flex-end, baseline, initial or inherit.
    Default: |alignItems=stretch
  5. Optional: |wrap=

    The flex-wrap property specifies whether the flexible items should wrap or not.
    Possible value is one of: nowrap, wrap, wrap-reverse, initial or inherit.
    Default: |wrap=nowrap
  6. Optional: |alignContent=

    The align-content property modifies the behavior of the flex-wrap property.
    It is similar to align-items, but instead of aligning flex items, it aligns flex lines.
    Possible value is one of: stretch, center, flex-start, flex-end, space-between, space-around, initial or inherit.
    Default: |alignContent=stretch
  7. Optional: |overflow=

    The overflow property specifies what happens if content overflows an element's box.
    Possible value is one of: visible, hidden, scroll, auto, initial or inherit.
    Default: |overflow=auto
  8. Height:

    1. Optional: |h=
      Sets the height of the container.
      Only applied when neither |hMin= nor |hMax= is used.
      Default: |h=250
      • Optional: |hUnit=
        Sets the unit for the used value.
        Default: |hUnit=px
    2. Optional: |hMin=

      Sets the min-height of the container.
      Default: empty
      (A value is required when used!)
      • Optional: |hMinUnit=
        Sets the unit for the used value.
        Default: |hMinUnit=px
    3. Optional: |hMax=

      Sets the max-height of the container.
      Default: empty
      (A value is required when used!)
      • Optional: |hMaxUnit=
        Sets the unit for the used value.
        Default: |hMaxUnit=px
  9. Width:

    1. Optional: |w=
      Sets the width of the container.
      Only applied when neither |wMin= nor |wMax= is used.
      Default: |w=400
      • Optional: |wUnit=
        Sets the unit for the used value.
        Default: |wUnit=px
    2. Optional: |wMin=

      Sets the min-width of the container.
      Default: empty
      (A value is required when used!)
      • Optional: |wMinUnit=
        Sets the unit for the used value.
        Default: |wMinUnit=px
    3. Optional: |wMax=

      Sets the max-width of the container.
      Default: empty
      (A value is required when used!)
      • Optional: |wMaxUnit=
        Sets the unit for the used value.
        Default: |wMaxUnit=px
  10. Flow:

    1. Optional: |flow=
      Only applied when neither |flowDirection= nor |flowWrap= is used.
      The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties combined.
      Possible value is one of: flex-direction flex-wrap, initial or inherit.
      The flex-direction property specifies the direction of the flexible items.
      The flex-wrap property specifies whether the flexible items should wrap or not.
      Default: |flow=row nowrap eg. "{{flowDirection}} {{flowWrap}}".
    2. Optional: |flowDirection=

      Same functionality and values as |direction=.
      Default: |flowDirection=row
    3. Optional: |flowWrap=

      Same functionality and values as |wrap=.
      Default: |flowWrap=nowrap

Flex/Item

Syntax

Type Template:TContentsTemplate:T somewhere.

Parameters

  1. Recommended | Required | Optional: |namedparameter=
    Your explanation here.
    Default: |namedparameter=value

Flex/End

Used to terminate a Template:T or Template:T.
Type Template:T somewhere.

Sample output

Sample:1

{{Flex}}
gives...

Sample:2

{{Flex/Container}}
{{Flex/Item}}{{Lorem ipsum|2}}{{Flex/End}}
{{Flex/Item}}{{Lorem ipsum|2}}{{Flex/End}}
{{Flex/Item}}{{Lorem ipsum|2}}{{Flex/End}}
{{Flex/End}}
gives...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.

Sample:3

{{Flex/Container|w=100|wUnit=%}}
{{Flex/Item|w=100|wUnit=%}}{{Lorem ipsum|2}}{{Flex/End}}
{{Flex/Item|w=100|wUnit=%|hMax=100|hMaxUnit=%}}{{Lorem ipsum|2}}{{Flex/End}}
{{Flex/Item|w=100|wUnit=%}}{{Lorem ipsum|2}}{{Flex/End}}
{{Flex/End}}
gives...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.

See also