diff --git a/lab_037.html b/lab_037.html index b689086..614c640 100644 --- a/lab_037.html +++ b/lab_037.html @@ -52,8 +52,7 @@

Display Types

Most browsers have a default representation of each HTML element that consists of default font styles, margins, padding, and display types. However, just like you can change font styles, margins, and padding - you can change the display type to get the behavior and layout you want.

-

There are four display types we'll focus on: inline, block, - flex, and grid. +

There are three display types we'll focus on: inline, block, and flex.

Note: You can also do display: none which hides the element.

@@ -70,14 +69,32 @@

Block

<h1> are all examples of block-level elements.

Note: Children and descendant HTML elements of an element using a display type - will inherit the display type of their parent. If your <div> has a - display: block then descendents of the <div> - will also have display: block.

+ will inherit the display type of their parent. If your <div> has a + display: block then descendants of the <div> + will also have display: block. +

Flex

-

Flex elements behave like block-level elements, however they are set up to be optimized for user interface - design and the one-dimensional layout of items.

-

Grid

- +

Flex elements behave like block-level elements, however they are optimized for user + interface design and the one-dimensional layout of items. When an element is applied display: flex, its children become flex items + and its elements are laid out according to the flexible box, or flexbox, + layout model. +

+

In the flexbox model, descendant items can "flex" their width and height to grow or shrink as necessary. + Either, growing to fill unused space, flex-grow, or shrinking to avoid + overflowing the parent, flex-shrink.

+

Horizontal and vertical alignment are easiest in a flexbox model using justify-content and align-items. There are + specific properties that only work when an element is using the flexbox + layout model.

+

For more information, this article can explain flexbox better than we ever could: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

+

Apply Displays

+

Take a look at the full style sheet to try and understand how the displays are being used. We make liberal + use of display: flex in our styling. Afterwards, apply display types to your + website to give it the layout that you want!