Introduction to CSS Layout
The display property
changes the behavior of a document’s flow of elements
display: block
stacked vertically upon other boxesdisplay: inline
flows with the document text, allows line breaksdisplay: 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 itemsflex-direction: row / column
row to stack them horizontally, column to stack them verticallyalign-items: stretch
makes the flex items stretch to the height of the flex containerflex: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 itemsgrid-column / grid-row
unit less value that determines the start and end line of each item
Floats
float: left
element floats leftfloat: right
element floats leftfloat: none
no float specified, defaultfloat: 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 positionposition: 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> elementposition: 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.