CSS Layouts
Flexbox
Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.
To start with, we need to select which elements are to be laid out as flexible boxes. To do this, we set a special value of display on the parent element of the elements you want to affect.
section { display: flex;}
This causes the <section> element to become a flex container and its children become flex items.
- The main axis is the axis running in the direction the flex items are laid out in (for example, as a row across the page, or a column down the page.)
- The cross axis is the axis running perpendicular to the direction the flex items are laid out in.
- The parent element that has display: flex set on it (the <section> in our example) is called the flex container.
- The items laid out as flexible boxes inside the flex container are called flex items.
Flexbox provides a property called flex-direction that specifies which direction the main axis runs (which direction the flexbox children are laid out in). By default this is set to row, which causes them to be laid out in a row.
Horizontal and vertical alignment
You can also use flexbox features to align flex items along the main or cross axis.
align-items controls where the flex items sit on the cross axis. By default, the value is stretch, which stretches all flex items to fill the parent in the direction of the cross axis. If the parent doesn't have a fixed height in the cross axis direction, then all flex items will become as tall as the tallest flex item.
justify-content controls where the flex items sit on the main axis. The default value is flex-start, which makes all the items sit at the start of the main axis.
Grids
CSS grid layout is a two-dimensional layout system for the web. It lets you organize content into rows and columns and offers many features to simplify the creation of complex layouts.
A grid will typically have columns, rows, and then gaps between each row and column. The gaps are commonly referred to as gutters.
Similar to how you define flexbox, you define a grid layout by setting the value of the display property to grid. As in the case of flexbox, the display: grid property transforms all the direct children of the container into grid items.
.container { display: grid;}
To see something that looks more grid-like, we'll need to add some columns to the grid.
Positioning
Positioning allows you to take elements out of normal document flow and make them behave differently, for example, by sitting on top of one another or by always remaining in the same place inside the browser viewport.
Static positioning
Static positioning is the default that every element gets.
Relative positioning
This is very similar to static positioning, except that once the positioned element has taken its place in the normal flow, you can then modify its final position, including making it overlap other elements on the page.
top, bottom, left, and right are used alongside position to specify exactly where to move the positioned element to.
Absolute positioning
An absolutely positioned element no longer exists in the normal document flow. Instead, it sits on its own layer separate from everything else. This is very useful: it means that we can create isolated UI features that don't interfere with the layout of other elements on the page. For example, popup information boxes, control menus, rollover panels, UI features that can be dragged and dropped anywhere on the page, and so on.
Rather than positioning the element based on its relative position within the normal document flow, they specify the distance the element should be from each of the containing element's sides.
Fixed positioning
This works in exactly the same way as absolute positioning, with one key difference: whereas absolute positioning fixes an element in place relative to its nearest positioned ancestor, fixed positioning fixes an element in place relative to the visible portion of the viewport.
Sticky positioning
This is basically a hybrid between relative and fixed position. It allows a positioned element to act like it's relatively positioned until it's scrolled to a certain threshold (e.g., 10px from the top of the viewport), after which it becomes fixed.