Flex ​

ZDS provides a flex tooling that can be configured directly from the HTML attribute z-flex. This eases the configuration of a layout then the developer in coding and makes the hole implementation of flex-box consistent, removing also the need of using CSS selector every time that wants to be used and reducing the necessary code in the long term.

If you're not really familiar with the flex-box CSS feature, we recommend you to have a look to this guide.

The z-flex attribute has three components following the <?direction>:<?wrap>:<?gap> pattern where:

  • direction: can take the values row or column (also col as short) the reversed form of both with row-rev (or rev) or column-rev (or col-rev), where if no specification is done: row is assumed. This will manage the flex-direction CSS property.

  • wrap: a middle modifier that allows flex to wrap. Requires to use :wrap after the direction or just wrap if the direction was not specified. The value wrap-revcan be used to modify the wrapping direction. This will manage the flex-wrap CSS property.

  • gap: will be the value of gap between elements. The default value is 0, but you can specified the values 50, 75, 100, 150, 200 or 300 based on the spacing gutters. This will manage the gap CSS property.

z-flex examples ​

Here are some examples for the general use of z-flex:

html
<section z-flex>
  <!-- 4 elements -->
</section>
1
2
3
4
html
<section z-flex="100">
  <!-- 4 elements -->
</section>
1
2
3
4
html
<section z-flex="100">
  <!-- 6 elements -->
</section>
1
2
3
4
5
6
html
<section z-flex="wrap:200">
  <!-- 6 elements -->
</section>
1
2
3
4
5
6
html
<section z-flex="col-rev:wrap:50">
  <!-- 6 elements -->
</section>
1
2
3
4
5
6
html
<section z-flex="col:wrap-rev:50">
  <!-- 6 elements -->
</section>
1
2
3
4
5
6

Align ​

If we require to change the alignment if flex-box, we can use the z-align HTML attribute in addition to z-flex. This last one, has the align-items center set to center to align everything vertically as the default behavior.

The z-align attribute has three components following the <justify>:<?align>:<?content> pattern where:

  • justify: the horizontal justification. It can have the values of center, right, left, even, between or around. Modifies the flex-direction CSS property.

  • align: the vertical justification. It can have the values: center, top, bottom, stretch or baseline. Modifies the align-items CSS property.

  • content: the vertical positioning. It can have the values: join, start, end, fill, disperse or uniform Modifies the align-content CSS property.

z-align examples ​

html
<section z-flex="50" z-align="center">
  <!-- 4 elements -->
</section>
1
2
3
4
html
<section z-flex="50" z-align="right">
  <!-- 4 elements -->
</section>
1
2
3
4
html
<section 
  z-flex="50" 
  z-align="right:bottom" 
  style="height: 100px;"
>
  <!-- 4 elements -->
</section>
1
2
3
4
html
<section 
  z-flex="50" 
  z-align="even:even" 
  style="height: 100px;"
>
  <!-- 4 elements -->
</section>
1
2
3
4
html
<section 
  z-flex="wrap" 
  z-align="center:join" 
  style="height: 200px;"
>
  <!-- 6 elements -->
</section>
1
2
3
4
5
6
html
<section 
  z-flex="50" 
  z-align="right:bottom:end" 
  style="height: 200px;"
>
  <!-- 6 elements -->
</section>
1
2
3
4
5
6