float property values

float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

float features

• floated to the left or right
• Still in the flow (v. position: absolute)
• Text wraps around the float.
• Adjacent sibling moves up.
• If all children are floated, parent has no height!
• floated elements are at least as tall as their floated children

Sets whether an element must be moved below (cleared) floating elements that precede it.

clear property values

none | both | left | right | inline-start | inline-end

Open the I have a Dream

Improve the legibility. Consider:

• line height
• font face
• justification
• spacing

Instructions

Open the I have a Dream, editing the HTML and the CSS to do the following:

1. Add a caption to the image
2. Encase the image, along with the caption, in a box with a border.
3. There should be white space between all the elements and the border.
4. Make the text wrap around the image.
5. Ensure there is white space between the image and the text but not on the outside of the image.

Download exercise

Text - solution

:root {
  font-family: georgia,new times roman, serif;
  font-size: 18px;
  line-height: 1.6;
}

Images Solution

body {
  max-width: 50em;
  margin: auto;
}
blockquote {
  border: 1px solid #ccc;
  border-width: 1px 0;
}
figure {
  float: left;
  width: 40%;
  min-width: 300px;
  padding: 2px 1em 1em 2px;
  margin: 0 1em 1em 0;
  border-right: 1px solid #ccc;
}
img {
  width: 100%
}
figcaption {
  font-style: italic;
}

1. Creation: display
2. Direction: flex-flow (flex-direction, flex-wrap)
3. Alignment: justify-content, align-items, align-self, align-content, place-items, place-content
4. Ordering: order
5. Flexibility: flex (flex-grow, flex-shrink, flex-basis)
6. Other: margin, gap

display

Values include flex and inline-flex. Used on parent to create the flex container.

align-content

flex-start | flex-end | center | space-between | space-around | stretch | space-evenly

align-items

flex-start | flex-end | center | baseline | stretch

align-self

auto | flex-start | flex-end | center | baseline | stretch

flex

Shorthand for [flex-basis flex-grow, and flex-shrink, or none

flex-basis

The basis by which the flex-items flex. default: auto

flex-direction

Set the containers axis for its children with row, row-reverse, column or columns-reverse on the parent

flex-flow

Shorthand for flex-direction and flex-wrap properties.

flex-grow

Positive number determines how much flex item will grow relative to other flex items in flex container when positive free space is distributed. Positive only

flex-shrink

Positive number determines how much flex item will shrink relative to other flex items in flex container when negative free space is distributed.

flex-wrap

To determine whether the boxes are single line or wrap, and the direction, use nowrap, wrap or wrap-reverse

justify-content

flex-start | flex-end | center | space-between | space-around | space-evenly

min-height

Default is auto, not 0

min-width

Default is auto, not 0

order

Integer. Controls order of flex item within flex container

gap

column-gap and row-gap. minimum space between adjacent flex items and lines.

place-items

Shorthand for align-items and justify-items

place-content

Shorthand for align-content and justify-content

place-item

Shorthand for align-item and justify-item

1. Add display: flex; to the parent of the elements to be flexed.
2. Set flex-direction to horizontal or vertical
3. Set flex-wrap to control wrap direction

inline | block | list-item | inline-block | flex | inline-flex | grid | inline-grid | table | inline-table | ruby | none

display: flex;

block-level flex container box

display: inline-flex;

inline-level flex container box

Flex items

1. All non-absolutely positioned child nodes
2. Generated Content
3. anonymous flex items => non-empty text nodes

Not flex items

1. ::first-line & ::first-letter
2. white space

Kind of

1. absolutely/fixed positioned elements

Changed Properties

1. margin: adjacent flex items margins do not collapse
2. min-width & min-height: default is auto, not 0
3. visibility: collapse;

Ignored Properties

1. column-* properties
2. float
3. clear
4. vertical-align

• row
• row-reverse
• column
• column-reverse

• nowrap
• wrap
• wrap-reverse

Purpose: is the whole shebang on one line, or can it wrap if necessary?

Shorthand for flex-direction and flex-wrap

place-items is shorthand for align-items and justify-items

Think of it as aligning within each flex line.

Aligns flex items along the cross axis

normal | center | start | end | self-start | self-end | flex-start | flex-end

Baseline alignment

align-items: baseline | first baseline | last baseline

Overflow alignment

safe center | unsafe center

does not take left and right values

Defines the default justify-self for all the flex items, justifying items along axis.

Keyterms

auto |  normal |  stretch |  center |  start |  end |  flex-start
flex-end |  self-start |  self-end |  left |  right

Baseline alignment

baseline |  first baseline |  last baseline

Overflow alignment

justify-items: safe center |  unsafe center

Legacy alignment

 legacy right |  legacy left |  legacy center

justify item value ignored in flex if justify-items: normal;

Shorthand for align-items and justify-items

• place-items: [align-items] [justify-items]?;
• If only one value, the align-items value will be used for both

• flex-start
• flex-end
• center
• baseline
• stretch

aligns flex items along the cross axis

• flex-start
• flex-end
• center
• space-between
• space-around
• stretch
• space-evenly

Only applies to multi-line flex containers.

Think of it as aligning between multiple lines

justify-content: center;     /* Pack items around the center */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end;   /* Pack flex items from the end */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */
justify-content: normal;
justify-content: space-between; /* Evenly, w/ first item at start, last at end */
justify-content: space-around;  /* Evenly. Half the space on ends */
justify-content: space-evenly;  /* Evenly, with equal space on ends */
justify-content: stretch;       /* Evenly. Stretch 'auto'-sized fit container */

• auto
• flex-start
• flex-end
• center
• baseline
• stretch

Override the align-items on a per flex item basis

div:nth-of-type(3n) {
   order: -1;
}

The default value is 0. Anything lower will come before those without set values. Anything above will come after.

1. Source Order
2. Tab order
3. Right to Left languages