CSS - Flex Box

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin > CSS - Flex Box

1 - About

The Css Flexible layout model

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 floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need.

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 wrap
“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

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

  • flex
  • 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

Advertising

3 - Property

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

Flex Flow Property

A flex container can be either single-line or multi-line, depending on the flex-wrap property.

  • flex-wrap: nowrap: A single-line flex container lays out all of its children in a single line, even if that would cause its contents to overflow.
  • flex-wrap: wrap or flex-wrap: wrap-reverse A multi-line flex container breaks its flex items across multiple lines, similar to how text is broken onto a new line when it gets too wide to fit on the existing line.

Example of multi-line container:

.flex {
  display: flex;
  width: 300px;
  margin:2rem;
}
#flex-row-wrap {
  flex-flow: row wrap;
}
#flex-reverse {
  flex-flow: row-reverse wrap-reverse;
}
#flex-column {
  flex-flow: column wrap;
  width: 160px;
  height: 60px; 
  box-sizing: border-box;
}
.item {
  width: 80px;
  background-color: SkyBlue;
  border: 1px solid #e7e7e7;
  text-align: center;
  box-sizing: border-box;
  height: 20px;
}
<b>flex-flow: row wrap</b>
<div id="flex-row-wrap" class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<b>flex-flow: row-reverse wrap-reverse</b>
<div id="flex-reverse" class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<b>flex-flow: column wrap</b>
<div id="flex-column" class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

3.2 - 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;}
#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; }

Advertising

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

The flex property is a shorthand property that specifies the components of a flexible length:

  • flex-grow (Default to 1) factor that determines how much the item will grow relative to the rest.
  • flex-shrink (Default to 1) factor that determines how much the item will shrink relative to the rest
  • flex-basis. The initial main size of the item, before free space is distributed according to the factors. Possible values:
    • auto. Generally same as content.
    • content. The sizing is based on the content.
    • other evaluated as the width and height properties

Basic Shorthand Values

  • Initial Makes the flex item inflexible when there is positive free space, but allows it to shrink to its minimum size when there is insufficient space.
/* Default (initial or 0 1 auto)*/
flex: initial; 
flex: 0 1 auto;
  • none makes the flex item fully inflexible.
/* None = 0 0 auto. */
flex: none;
flex: 0 0 auto;
  • Auto: The flex box will absorb any free space
/* Auto = 1 1 auto. */
flex: none;
flex: 1 1 auto;
  • <positive-number> The box receives the specified proportion of the free space in the flex container.
/* positive-number = <positive-number> 1 0 */
flex: <positive-number>;
flex: <positive-number> 1 0 ;
Advertising

3.3.1 - Absolute

Absolute flex starting from a flex basis of zero. Notice that the item with a flex factor of 2 grows twice as fast as the others.

<div id='main'>
   <article>Short</article>
   <nav>loooooonggg</nav>
   <aside>short</aside>
</div>
#main { display: flex;  text-align:center; padding: 1rem; width: 70%; box-sizing: border-box;}
#main > article { background-color: DeepSkyBlue; padding: inherit; flex:1 1 0; }
#main > nav     { background-color: AliceBlue; padding: inherit; flex:1 1 0;}
#main > aside   { background-color: CadetBlue; padding:inherit; flex:2 1 0;}

3.3.2 - Relative

Relative flex starting from a flex basis of the item’s content size (auto). Notice that the item with a flex factor of 2 grows twice as fast as the others.

<div id='main'>
   <article>Short</article>
   <nav>loooooonggg</nav>
   <aside>short</aside>
</div>
#main { display: flex;  text-align:center; padding: 1rem; width: 70%; box-sizing: border-box;}
#main > article { background-color: DeepSkyBlue; padding: inherit; flex:1 1 auto; }
#main > nav     { background-color: AliceBlue; padding: inherit; flex:1 1 auto;}
#main > aside   { background-color: CadetBlue; padding:inherit; flex:2 1 auto;}

3.4 - justify-content

An illustration of the five justify-content keywords and their effects on a flex container with three colored items.

3.5 - align-items

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

3.6 - align-content

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

4 - Documentation / Reference

web/css/flex/flex.txt · Last modified: 2019/02/17 11:30 by gerardnico