Flexbox Wrapping

Another Flexbox property that is available is flex-wrap, this gives us the ability to set whether flex items inside the container are forced into one line or can wrap around to multiple lines, and allows us to set the direction of the items.

flex-wrap: nowrap; (Default Value) // wrap; //wrap-reverse;

Wrapped Examples

Flex Properties

Flex items within a flexbox layout have their own properties that allow us to target them directly and usually rely on the spacing in between the box. These properties work along the main axis of the container so for rows it would be horizontally and for columns it would be vertically. These three properties are flex-grow, flex-shrink and flex-basis.

The flex-grow and flex-shrink concepts rely on the space distribution of the container and the flex items inside.
container

For three flex items with a width of 100 pixels in a 500 pixels container, there is 200 pixels of available space for it to “grow” into. Without specifying flex properties the space will be added to the end of the last item.

overflow

Conversely if there is an overflow within the container there is “negative” space for the flex items to shrink if it is defined.

The flex-basis property defines the initial sizing of each item before any space distribution takes place, by default this property is set to auto and is determined by the main size of the item if it is defined. If your item is defined with a 100 pixel width/height, flex-basis becomes 100px. If there is no explicitly set size then flexbox utilizes min/max-content9 to determine the flex-basis.

All of this can be represented by the short hand flex property within an item:

// Sets the grow factor, shrink factor, and flex-basis respectively.
flex: 1, 1, auto

Min-content / Max-Content

min/max-content Min-content size refers to the smallest size a box can be without overflowing, and max-content is usually determined by the “ideal” size a box should take to fit its content given infinite space.

Float

The CSS Float property allows us to place an element on either side of a container allowing text and other inline elements to wrap around it giving us a away to put an element in the flow of a container as opposed to absolute positioning which can overlay elements over each other.

float: none; (default) \\ left; \\ right;

CSS Shapes

As we’ve discussed previously CSS can be used to control layouts, fonts, colors, backgrounds, scaling, positions, creating shapes, and more.
In this tutorial there are great examples and code snippets that describe how simple geometric shapes can be created by adjusting width/height, and border (radius, left, right, top, bottom). Codepen

A square can be defined as an object with the same height and width measurements:

#square {
  width: 100px;
  height: 100px;
  background: red;
}

A circle is the same with the exception of a border-radius2 (rounds the edges) of 50%.

#circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%
}

A triangle can be made and oriented in any cardinal direction by adjusting the border properties:

#triangle-right {
      //By defining the height and width we keep all properties within scope of the largest borders 
      width: 0;
      height:0;

      //Fills top corner with a transparent block that covers half of the height, but does not override the border-left
      border-top: 50px solid transparent;
      
      //Our triangle faces right so the left border is the "base" 
      border-left: 100px solid red;

      //Fills the bottom corner with a transparent block that covers half of the height, but does not override the border-left
      border-bottom: 50px solid transparent;
    }