Notes on CSS
Flexbox is great at aligning the content inside elements. It is used to position the smaller details of page. Flexbox works better in one direction only.
Flexbox can be applied to elements using display: flex;
justify-content
aligns items horizontally, and accepts the following values:
flex-start
: Items align to the left side of the container.flex-end
: Items align to the right side of the container.center
: Items align at the center of the container.space-between
: Items display with equal spacing between them (Space is not added to the left of the first element, and right side of last element)space-around
: Items display with equal spacing around them (Space is added to the left of the first element, and right side of last element)
align-items
aligns items vertically, and accepts the following values:
flex-start
: Items align to the top of the container.flex-end
: Items align to the bottom of the container.center
: Items align at the vertical center of the container.baseline
: Items display at the baseline of the container.stretch
: Items are stretched to fit the container.
flex-direction
defines the direction items are placed in the contained, and accepts the following values:
row
: Items are placed the same as text direction.row-reverse
: Items are placed opposite to the text direction.column
: Items are placed top to bottom.column-reverse
: Items are placed from bottom to top.
order
is applied to individual items inside a container. By default, items have a value of 0, but the property can be set to a positive of negative integer value. Setting the value to 1 means moving forward the order of items inside the container by 1. For the element 1, before, (1,2,3,4,5) After, (5,1,2,3,4)
align-self
does the exact same thing as align-items
, but it is applied to individual items inside a container instead.
flex-wrap
changes the wrap of items inside it, and accepts the following values:
nowrap
: Everything is fit to a single line.wrap
: Items wrap around to additional lines.wrap-reverse
: Items wrap around to additional lines in reverse.
flex-flow
is a combination of flex-direction
and flex-wrap
. This property accepts one of the two properties separated by a space.
align-content
is used to set how multiple lines are spaced apart from each other. This property takes the following values:
flex-start
: Line are packed at the top of the container.flex-end
: Lines are packed at the bottom of the container.center
: Line are packed at the vertical center of the container.space-between
: Lines display with equal spacing between them.space-around
: Lines display with equal spacing around them.stretch
: Lines are stretch to fit the container.
align-content
determines the spacing between lines, whereas align-items
determine how items as a whole are aligned within the container.
CSS grids are used to build the bigger picture. They make it easier to manage the layout of the page, and can even handle more unorthodox and asymmetrical designs. CSS grids are used for 2D layouts.
grid-column-start
is used to specify a grid item's start position within the grid column, by contributing a line, span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area. grid-column-start
also accepts negative values.
grid-column-end
is used to specify a grid item's end position within the grid column. This end position defines the block-end edge of the grid area. grid-column-end
also accepts negative values.
Instead of defining a grid item based on the start and end positions of the grid lines, you can define it based on your desired column using the span
keyword. span only works with positive values.
grid-column
is a shorthand property that can accept values for both grid-column-start
and grid-column-end
at once, separated by a slash.
grid-row-start
works much like grid-column-start
, except along the vertical axis. The same applies for other properties, such as grid-row-end
grid-area
is a shorthand for grid-row-start
, grid-column-start
, grid-row-end
, followed by grid-column-end
.
By default, all grid items have an order
of 0, but this can be set to any positive or negative integer, similar to z-index
.
grid-template-columns
and grid-template-rows
define the line names and track sizing functions of the grid columns and rows. They accept values of percentages, pixels, and em.
repeat
can be used inside grid-template-columns
and grid-template-rows
to eliminate the need to type out the repeated values. e.g. grid-template-columns: repeat(8, 12.5%);
The unit fr
is a fractional unit that allocates one share of the available space. For example, if two elements are set to 1fr
and 3fr
respectively, the space is divided into 4 equal shares; the first element occupies 1/4 and the second element occupies 3/4 of any leftover space.
grid-template
is a shorthand property that combines grid-template-rows
and grid-template-columns
. e.g. grid-template: 50% 50% / 200px;
will create a grid with two rows that are 50% each, and each one column that is 200 pixels wide.