Lesson 12 Final Exam Project

Box Model

position:

static /* default, positioned according to the normal flow of the page and not affected by the top, bottom, left, and right properties */
relative /* enables an element to be positioned relative to where it would have originally been on a web page */
absolute /* removes an element entirely from the document flow; can be used with top, left, bottom, and right to position anywhere as expected */
fixed /* set/pinned to a specific spot on a page, regardless of scrolling */

box-sizing:

border-box /* corresponds directly to the element's total rendered size, including padding and border with the height and width properties */

margin: (margin-top, margin-right, margin-bottom, margin-left)

auto /* the browser calculates the margin */
length /* specifies a margin in px, pt, cm, etc. */
% /* specifies a margin in % of the width of the containing element */
inherit /* specifies that the margin is inherited from the parent element */

border:

border-width /* specifies the width of the four borders */
border-style /* specifies what kind of border to display */
border-color /* sets the color of the four borders */

padding: (padding-top, padding-right, padding-bottom, padding left)

length /* specifies a margin in px, pt, cm, etc. */
% /* specifies a margin in % of the width of the containing element */
inherit /* specifies that the margin is inherited from the parent element */

W3C standards for the box model

Flexbox Terms

Flex Container

The element that contains flex items and encompasses the area where the flex layout functions. display: flex;

Flex Items

An element within a flex container that is positioned based on the defined properties of the flexbox.

Flex Directions

The direction that flex items flow along the main axis. Includes: row (default), row-reverse, column, column-reverse, initial, and inherit.

Main Axis

The direction that content flows. Defined by the direction set by the flex-direction property. Perpendicular to the cross axis.

Main Size Properties

The length or width of the content along the main axis, depending on which is in the main direction.

Cross Axis

The axis perpendicular to the main axis. This is the direction that blocks are stacked and new flex lines are added.

Cross Size Properties

The length or width of the content along the cross axis, depending on which is in the cross direction.

W3C standards for the flexbox box model

Flex Container Properties

flex-direction:

row /* default; flex items display as a horizontal row */
row-reverse /* same as row but in reverse order */
column /* flex items display as a vertical column */
column-reverse /* same as column but in reverse order */
initial /* sets this property to its default value */
inherit /* inherits this property from its parent element */

flex-wrap:

nowrap /* default; specifies that the flex items do not wrap */
wrap /* specifies that the flex items wrap if necessary */
wrap-reverse /* specifies that the flex items will wrap if necessary, in reverse order */
initial /* sets this property to its default value */
inherit /* inherits this property from its parent element */

flex-flow:

flex-direction flex-wrap  /* any flex-direction value followed by any flex-wrap value */
initial /* sets this property to its default value */
inherit /* inherits this property from its parent element */

justify-content:

flex-start /* default; items positioned at the beginning of the container */
flex-end /* items are positioned at the end of the container */
center /* items are positioned in the center of the container */
space-between /* items will have space between them */
space-around /* items will have space before, between, and after them */
space-evenly /* items will have equal space around them */
initial /* sets this property to its default value */
inherit /* inherits this property from its parent element */

align-content:

stretch /* default value; lines stretch to fill remaining space */
center /* lines are packed toward the center of the flexbox container */
flex-start /* lines are packed toward the start of the flex container */
flex-end /* lines are packed toward the end of the flex container */
space-between /* lines are evenly distributed in the flex container */
space-around /* lines are evenly distributed in the flex container, with half-size spaces on either end */
space-evenly /* lines are evenly distributed in the flex container, with equal space around them */
initial /* sets this property to its default value */
inherit /* inherits this property from its parent element */

align-items:

normal /* default; behaves like 'stretch' for flexbox */
stretch /* items are stretched to fit the container */
center /* items are positioned at the center of the container */
flex-start /* items are positioned at the beginning of the container */
flex-end /* items are positioned at the end of the container */
start /* items are positioned at the beginning of their individual grid cells, in the block direction */
end /* items are positioned at the end of their individual grid cells, in the block direction */
baseline /* items are positioned at the baseline of the container */
initial /* sets this property to its default value */
inherit /* inherits this property from its parent element */

display:

inline /* displays an element as an inline element; height and width properties have no effect */
block /* displays an element as a block element; starts on a new line and takes up the whole width */
contents /* makes the container disappear, making the child elements children of the element the next level up in the DOM */
flex /* displays an element as a block-level flex container */
grid /* displays an element as a block-level grid container */
inline-block /* displays an element as an inline-level block container; the element itself is formatted as an inline element but you can apply height and width values */
inline-flex /* displays an element as an inline-level flex container */
inline-grid /* displays an element as an inline-level grid container */
inline-table /* displays an element as an inline-level table */
list-item /* element behaves like a <li> element */
run-in /* displays an element as either block or inline, depending on context */
table /* element behaves like a <table> element */
table-caption /* element behaves like a <caption> element */
table-column-group /* element behaves like a <colgroup> element */
table-header-group /* element behaves like a <thead> element */
table-footer-group /* element behaves like a <tfoot> element */
table-row-group /* element behaves like a <tbody> element */
table-cell /* element behaves like a <td> element */
table-column /* element behaves like a <col> element */
table-row /* element behaves like a <tr> element */
none /* element is completely removed */
initial /* sets this property to its default value */
inherit /* inherits this property from its parent element */

W3C standards for the flexbox container

Flex Item Properties

align-self:

auto /* default; element inherits parent container's align-items property, or stretch if it has no parent container */
stretch /* element is positioned to fit the container */
center /* element is positioned at the center of the container */
flex-start /* element is positioned at the beginning of the container */
flex-end /* element is positioned at the end of the container */
baseline /* element is positioned at the baseline of the container */
initial /* sets this property to its default value */
inherit /* inherits this property from its parent element */

flex-grow:

number /* default value is 0; number specifying how much the item will grow relative to the rest of the flex items */
initial /* sets this property to its default value */
inherit /* inherits this property from its parent element */

flex-shrink:

number /* default value is 1; number specifying how much the item will shrink relative to the rest of the flex items */
initial /* sets this property to its default value */
inherit /* inherits this property from its parent element */

flex-basis:

number /* length, unit, or percentage specifying the initial length of the flex item(s) */
auto /* default value; length equal to the length of the flex item; if item has no length specified, length will be according to its content */
initial /* sets this property to its default value */
inherit /* inherits this property from its parent element */

flex:

flex-grow flex-shrink flex-basis  /* any flex-grow value followed by any flex-shrink value followed by any flex-basis value */
auto /* same as  1 1 auto */
initial /* same as  0 1 auto */
none /* same as  0 0 auto */
inherit /* inherits this property from its parent element */

order:

number /* default value is 0; specifies the order for the flex item */
initial /* sets this property to its default value */
inherit /* inherits this property from its parent element */

W3C standards for the flexbox items

Grid Terms

Grid Container

An element that defines a grid formatting context for its contents.

Grid Item

A thing that participates in a grid layout within a grid-formatting context.

Track

A continuous run between two adjacent grid lines — a grid column or grid row.

Cell

Any space bounded by four grid lines, with no grid lines running through it, analogous to a table cell.

Area

Any rectangular area bounded by four grid lines and made up of one or more grid cells. An area can be as small as one cell or as large as the entire grid.

Explicit Grid

The defined grid containing a fixed number of lines and tracks.

Implicit Grid

When there are more items than cells in the grid or when a grid item is placed outside of the explicit grid, the grid container automatically generates grid tracks by adding grid lines to the grid. These additional implicit lines and tracks combined with the explicit grid make up the implicit grid.

Grid Template

grid-template is a shorthand property for defining grid columns, grid rows, and grid areas.

Gutters

Space between two grid tracks. It is created as if by expanding the grid line between them to have actual width. It is similar to border-spacing in table styling.

Grid Naming

Grid areas and grid lines can be named. Grid lines are numbered by default.

W3C standards for the grid layout

Grid Container Properties

display:

grid; /* generates block level grid */
inline-grid; /* generates an inline-level grid */

grid-template-columns:

<track-size>; /* can be a length, percentage, or fraction of the free space in the grid using the fr unit */
<line-name>; /* an arbitrary name of your choosing */

grid-template-rows:

<track-size>; /* can be a length, percentage, or fraction of the free space in the grid using the fr unit */
<line-name>; /* an arbitrary name of your choosing */

grid-template-areas:

<grid-area-name>; /* name of a grid area specified with grid-area */
.; /* signifies an empty grid cell */
none; /* no grid areas are defined */

grid-template:

none; /* sets all three properties to their initial values */
<grid-template-rows> / <grid-template-columns>; /* sets grid-template-rows and grid-template-columns to the specified values, respectively, and sets grid-template-areas to none */

column-gap:

<line-size>; /* a length value */

row-gap:

<line-size>; /* a length value */

gap:

<row-gap> <column-gap>; /* length values */

justify-items:

start; /* aligns items to be flush with the start edge of their cell */
end; /* aligns items to be flush with the end edge of their cell */
center; /* aligns items in the center of their cell */
stretch; /* fills the whole width of the cell (default) */

align-items:

start; /* aligns items to be flush with the start edge of their cell */
end; /* aligns items to be flush with the end edge of their cell */
center; /* aligns items in the center of their cell */
stretch; /* fills the whole height of the cell (default) */
baseline; /* align items along text baseline; there are modifiers – first baseline and last baseline, which will use the baseline from the first or last line in the case of multi-line text. */

justify-content:

start; /* aligns items to be flush with the start edge of the grid container */
end; /* aligns items to be flush with the end edge of the grid container */
center; /* aligns items in the center of the grid container */
stretch; /* fills the whole width of the container */
space-around; /* places an even amount of space between each grid item, with half-sized spaces on the far ends */
space-between; /* places an even amount of space between each grid item, with no space at the far ends */
space-evenly; /* places an even amount of space between each grid item, including the far ends */

align-content:

start; /* aligns items to be flush with the start edge of the grid container */
end; /* aligns items to be flush with the end edge of the grid container */
center; /* aligns items in the center of the grid container */
stretch; /* fills the full height of the container */
space-around; /* places an even amount of space between each grid item, with half-sized spaces on the far ends */
space-between; /* places an even amount of space between each grid item, with no space at the far ends */
space-evenly; /* places an even amount of space between each grid item, including the far ends */

grid-auto-columns:

<track-size>; /* can be a length, percentage, or fraction of the free space in the grid using the fr unit */

grid-auto-rows:

<track-size>; /* can be a length, percentage, or fraction of the free space in the grid using the fr unit */

grid-auto-flow:

row; /* tells the auto-placement algorithm to fill in each row in turn, adding new rows as necessary (default) */
column; /* tells the auto-placement algorithm to fill in each column in turn, adding new columns as necessary */
dense; /* tells the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later */

grid:

none; /* sets all sub-properties to their initial values */
<grid-template>; /* works the same as the grid-template shorthand */
<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?; /* sets grid-template-rows to the specified value. If the auto-flow keyword is to the right of the slash, it sets grid-auto-flow to column. If the dense keyword is specified additionally, the auto-placement algorithm uses a "dense" packing algorithm. If grid-auto-columns is omitted, it is set to auto. */
[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> /* sets grid-template-columns to the specified value. If the auto-flow keyword is to the left of the slash, it sets grid-auto-flow to row. If the dense keyword is specified additionally, the auto-placement algorithm uses a "dense" packing algorithm. If grid-auto-rows is omitted, it is set to auto. */

W3C standards for the grid container

Grid Item Properties

grid-column-start:

<line>; /* can be a number to refer to a numbered grid line, or a name to refer to a named grid line */
span <number>; /* the item will span across the provided number of grid tracks */
span <name>; /* the item will span across until it hits the next line with the provided name */
auto; /* indicates auto-placement, an automatic span, or a default span of one */

grid-column-end:

<line>; /* can be a number to refer to a numbered grid line, or a name to refer to a named grid line */
span <number>; /* the item will span across the provided number of grid tracks */
span <name>; /* the item will span across until it hits the next line with the provided name */
auto; /* indicates auto-placement, an automatic span, or a default span of one */

grid-row-start:

<line>; /* can be a number to refer to a numbered grid line, or a name to refer to a named grid line */
span <number>; /* the item will span across the provided number of grid tracks */
span <name>; /* the item will span across until it hits the next line with the provided name */
auto; /* indicates auto-placement, an automatic span, or a default span of one */

grid-row-end:

<line>; /* can be a number to refer to a numbered grid line, or a name to refer to a named grid line */
span <number>; /* the item will span across the provided number of grid tracks */
span <name>; /* the item will span across until it hits the next line with the provided name */
auto; /* indicates auto-placement, an automatic span, or a default span of one */

grid-column:

<start-line> / <end-line>; /* each one accepts all the same values as the longhand version, including span */

grid-row:

<start-line> / <end-line>; /* each one accepts all the same values as the longhand version, including span */

grid-area:

<name>; /* a name of your choosing */
<row-start> / <column-start> / <row-end> / column-end> /* can be numbers or named lines */

justify-self:

start; /* aligns grid item to be flush with the start edge of the cell */
end; /* aligns grid item to be flush with the end edge of the cell */
center; /* aligns grid item in the center of the cell */
stretch; /* fills the whole width of the cell (default) */

align-self:

start; /* aligns grid item to be flush with the start edge of the cell */
end; /* aligns grid item to be flush with the end edge of the cell */
center; /* aligns grid item in the center of the cell */
stretch; /* fills the whole height of the cell (default) */

W3C standards for the grid items