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 @@
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.
<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
.
<div>
has a
+ display: block
then descendants of the <div>
+ will also have display: block
.
+
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.
-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/.
+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!