About

flex is a layout model that lays out object in a single axis focused on space distribution and content alignment.

flex means:

  • flexible layout
  • as flexible size

Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as:

A flex container is the box generated by an element with a computed display of:

  • flex:
    • items have equal height
    • auto margin are working to push item to top or bottom
    • vertical-align has no effect on a flex item.
  • or inline-flex.

In-flow children of a flex container are called flex items and are laid out using the flex layout model.

flex is good choice to achieve uniform sizing across several element. Example Card groups

Axis:

  • main-(axis|dimension|wise) - determined by the flex-direction (default to horizontal (ie row) and not vertical (ie column))
  • cross-(axis|dimension|wise) / 90 degree from the main-axis

Feature

  • columns without a specified width automatically layout as equal width columns
Features Description Property
Flow direction (leftwards, rightwards, downwards, or even upwards!) The flex-direction property
Display order reversed or rearranged at the style layer (i.e., visual order can be independent of source and speech order) order
Single line (main) or wrapped into multiple lines along a secondary (cross) axis Flex - flex-wrap (Single Line or Multi-Line)
“flex” sizes (respond to the available space, either growing to fill unused space or shrinking to avoid overflowing the parent) the flex property
Alignment with respect to their container or each other on the secondary (cross) align
Collapse or uncollapse dynamically along the main axis while preserving the container’s cross size margin and justify-content

Property

flex-flow = flex-direction (row, column) + flex-wrap (Single or multi-line)

CSS flex-flow property

Order

The CSS order property specifies the visual order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code. 

/* Numerical value including negative numbers */
order: 5;
order: -5; 

/* Global values */
order: inherit;
order: initial;
order: unset;

Example 

<div id='main'>
   <article>1 - Article</article>
   <nav>2 - Nav</nav>
   <aside>3 - Aside</aside>
</div>

#main { display: flex;  text-align:center; padding: 2rem; width: 100%; box-sizing: border-box; background-color: #aedcef;}
#main > article { order: 2; background-color: DeepSkyBlue; padding: inherit; flex:1; }
#main > nav     { order: 1; background-color: AliceBlue; padding: inherit; }
#main > aside   { order: 3; background-color: CadetBlue; padding:inherit; }
Rendered by WebCode

Flex Property - Length definition (flex-grow, flex-shrink, flex-basis)

CSS Flex - Flex Property (Length definition)

justify-content (horizontal distribution)

justify-content will distribute the object along the main axis

flex-start flex-end center space-between space-around

align-items (vertically)

An illustration of the five align-items keywords and their effects on a flex container with four colored items.

To apply align-items, height should be applied to the container.

flex-start flex-end center stretch foo foo foo foo foo foo foo foo foo foo foo foo foo foo baseline

align-content

An illustration of the align-content keywords and their effects on a multi-line flex container See flex-wrap (Svg source)

Css Flex Align Content

Documentation / Reference