Search notes:

CSS: flex-* properties

flex container and flex items

The flex container is the area in which the elements are laid out using flexbox. These items are referred to as flex items.
A container becomes a flex container by setting the display property to flex.

flex-* properties

The flex-* properties are
flex-basis … . The default is auto.
flex-direction Defines the main axis (of which the so-called cross axis is perpendicular). Possible values are row, row-reverse, column or column-reverse (default is row).
flex-grow
flex-shrink
flex-wrap Specifies if flex items are forced onto one line or can be spread across multiple lines. Possible values are (nowrap, wrap and wrap-reverse). The default is nowrap.

Shorthand properties

flex Combines the values for flex-grow, flex-shrink and flex-basis.
flex-flow Combines flex-direction and flex-wrap

Simple example

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>First flext text</title>

  <style>

    #container {
      display: flex;
      flex-wrap: wrap;
/*    flex-direction: row-reverse; */
/*    flex-direction: column; */
    }

    #container .item {
      font-size: 250%;
      border: 1px solid black;
      padding: 0.3em;
      margin: 0.2em;
      }

    .desc {
       font-size: 40%;
       color: green;
    }

  </style>

</head>
<body>

  <div id=container>

     <div class=item>A<div class='desc'>one         </div></div>
     <div class=item>B<div class='desc'>two         </div></div>
     <div class=item>C<div class='desc'>three       </div></div>
     <div class=item>D<div class='desc'>four        </div></div>
     <div class=item>E<div class='desc'>five        </div></div>
     <div class=item>F<div class='desc'>six         </div></div>
     <div class=item>G<div class='desc'>seven       </div></div>
     <div class=item>H<div class='desc'>eight       </div></div>
     <div class=item>I<div class='desc'>nine        </div></div>
     <div class=item>J<div class='desc'>ten         </div></div>
     <div class=item>K<div class='desc'>eleven      </div></div>
     <div class=item>L<div class='desc'>twelve      </div></div>
     <div class=item>M<div class='desc'>thirteen    </div></div>
     <div class=item>N<div class='desc'>fourteen    </div></div>
     <div class=item>O<div class='desc'>fifteen     </div></div>
     <div class=item>P<div class='desc'>sixteen     </div></div>
     <div class=item>Q<div class='desc'>seventeen   </div></div>
     <div class=item>R<div class='desc'>eighteen    </div></div>
     <div class=item>S<div class='desc'>nineteen    </div></div>
     <div class=item>T<div class='desc'>twenty      </div></div>
     <div class=item>U<div class='desc'>twenty-one  </div></div>
     <div class=item>V<div class='desc'>twenty-two  </div></div>
     <div class=item>W<div class='desc'>twenty-three</div></div>
     <div class=item>X<div class='desc'>twenty-four </div></div>
     <div class=item>Y<div class='desc'>twenty-five </div></div>
     <div class=item>Z<div class='desc'>twenty-six  </div></div>

  </div>

</body>
</html>
Github repository about-CSS, path: /properties/flex/first.html

See also

The display property flex.
A similar effect as shown in this page can also be achieved by using display: inline-block for the .item selector while removing the flex related properties from the #container.
CSS properties

Index

Fatal error: Uncaught PDOException: SQLSTATE[HY000]: General error: 8 attempt to write a readonly database in /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php:78 Stack trace: #0 /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php(78): PDOStatement->execute(Array) #1 /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php(30): insert_webrequest_('/notes/developm...', 1788551585, '216.73.217.21', 'Mozilla/5.0 App...', NULL) #2 /home/httpd/vhosts/renenyffenegger.ch/httpsdocs/notes/development/web/CSS/properties/flex/index(145): insert_webrequest() #3 {main} thrown in /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php on line 78