Sara's Notes - Flexbox

Introduction to CSS Layout

The display property

changes the behavior of a document’s flow of elements

  • display: block stacked vertically upon other boxes
  • display: inline flows with the document text, allows line breaks
  • display: inline-block combination, flows with text but maintains the integrity of a block

Flexbox (Flexible Box Layout Module)

allows us to easily lay out elements in one dimension, either a row or column

  • display: flex apply to the parent div element, the children then become flex items
  • flex-direction: row / column row to stack them horizontally, column to stack them vertically
  • align-items: stretch makes the flex items stretch to the height of the flex container
  • flex:1 makes the flex items grow and fill the container

Grid Layout

allows us to easily lay out elements in two dimensions, in rows and columns

  • display: grid apply to the parent div element, the children then become grid items
  • grid-column / grid-row unit less value that determines the start and end line of each item

Floats

  • float: left element floats left
  • float: right element floats left
  • float: none no float specified, default
  • float: inherit the value of the float property is inherited from the parent element

Positioning

  • position: static normal positioning, default that is applied to every element
  • position: relative relative to its position in normal flow, allows for the modification of the element’s position
  • position: absolute removes an element from a page’s normal flow, element becomes its own separate layer, can be fixed to a container or the edges of the pages <html> element
  • position: fixed removes an element from a page’s normal flow, fixes an element relative to the browser viewport, where the element stays in place while the rest of the document scrolls (good for navigation menus)
  • position: sticky newer method, combines static & fixed, will act static and go with the normal flow until it reaches a defined offset point where it begins to act fixed while the rest of the page scrolls
  • {position: (static / relative / absolute / fixed / sticky); top: _px; left:  _px}

 

Normal Flow

Normal flow

how a browser lays out an HTML page by default when there’s nothing controlling its layout or formatting.

The content is rendered in the same vertical stack as your code is stacked with elements. The direction that the elements are stacked is determined by the writing mode (English- horizontal, top to bottom)

Defaults of normal flow:

  • Block elements width: the width of its parent element and height= depends on the length of the content, both can be specified
  • Inline elements width/height: flows with the text, cannot be controlled
  • Inline-block elements: flows with the text with a width and height that can be manipulated like a block element

 

Flexbox

Flexbox a one-dimensional layout method using rows & columns, the only reliable cross-browser tool available to make CSS layouts

Flex container: the parent element with the CSS display: flex 

Flex items: the children elements within a flex container

Nest flex boxes by creating a flex item container elements within a flex item

Main axis: running in the direction of the layout (English- horizontal), the edges of the flex container or flex item that determine the height are called the main start and the main end

Cross axis: running perpendicular to the direction of the layout (English- vertical), the edges of the flex container or flex item that determine the width are called the cross start and the cross end

 

flex-direction: row /column / row-reverse; property that specifies the layout direction of the flex items

flex-wrap: wrap; moves the flex items that overflow the edges of the flex container to the next line

flex-flow: row / column; shorthand that replaces flex-direction & flex-wrap

flex: 1; unit less proportion that determines how much of the available space each item will take up on either side of the main axis, the value 1 gives an equal amount to each box

 

Advanced flex properties to look at: flex-grow, flex-shrink, flex-basis. Flex is shorthand while these are longhand and will require a great amount of extra code to be written but gives you greater detail precision.

 

align-items: sets the alignment of an element within its parent element, controlling the align-self value of all children elements of the group

  • align-items: center / start / end / flex-start / flex-end
  • align-self: sets the individual element’s alignment, overruling align-items
  • justify-content: controls where the flex items sit on the main axis
    • justify-content: space around; distributes the boxes evenly along the main axis with some padding on either end

 

Final note* Compatibility: flexbox is supported across most browsers (Firefox, Chrome, Edge, IE 11, new versions of iOS/Android, etc) but not all, so if you’re building a serious website make sure to test your code in order to ensure your user’s experience is acceptable across as many browsers as possible.