1. COMP 135 Web Site Design Intermediate
Week 7

2. CSS3 Layout
Multicol
Flexbox

3. Sane Layout Tools for CSS
Stop using floats for layouts
Intended use is to flow text around images
Stop using positioning for layouts
Achilles Heel of positioning was its disregard for other elements

4. Multi-Column Layout
Allows content of element to be laid out in multiple columns
Text can now flow from column to column
Number of columns can vary depending on size of viewport t

5. Column Properties
body {column-count: 2} /* body will contain two columns */
body {column-width: 16em} /* body will contain columns at least 16em wide, the number determined by available space */
body {columns: 2} body {columns: 16em} body {columns: 2 16em} /* this is legal though not practical */

6. Gaps and Rules
body { column-gap: 2em; column-rule: thin solid black; }
body { column-gap: 2em; column-rule-width: thin; column-rule-style: solid; column-rule-color: black; }

7. Fill and Span div { column-fill: balance; /* same length */ }
h2 { column-span: all; /* h2 spans every column */ }
h1 { break-before: column; break-inside: avoid-column; break-after: avoid-column; /* h1 have column breaks before them but inside and after the element breaks are to be avoided*/ }

8. Multi-Column Model Traditional CSS box model: Multi-column element:
Content flows into content box of specified element
Multi-column element:
New container between content box and content: column box (columns)
Content flows into column boxes of a multi-column element
Column boxes arranged in rows have equal column width and equal column height
Column boxes separated by column gaps and possible column rules
Column rules only appear between column boxes with content in both
Column boxes have no properties; cannot set backgrounds and have no concept of padding, margin or border

9. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy
Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy.
Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl
mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy.
Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi pqr
stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy. Abc def ghi jkl mno pqr stu vwx zy.

10. Flexible Box Layout Module
A.k.a the Flexible Box model or flexbox
Contents of flex containers can be laid out in any flow direction (leftwards, rightwards, downwards or upwards)
Display order can be reversed by CSS
Laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
Can “flex” their sizes to respond to available space
Can align with the container or with respect to each other
Can be collapsed along main axis and retain the container’s cross size

11. Flexbox Model Elements set with display: flex become flex containers
Child elements are called flex items
Flex layout is established along a flex flow direction

12. main axis
main dimension
The main axis of a flex container is the primary axis along which flex items are laid out. It extends in the main dimension.
main-start
main-end
The flex items are placed within the container starting on the main-start side and going toward the main-end side.
main size
main size property
A flex item's width or height, whichever is in the main dimension, is the item's main size. The flex item's main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.
cross axis
cross dimension
The axis perpendicular to the main axis is called the cross axis. It extends in the cross dimension.
cross-start
cross-end
Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
cross size
cross size property
The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.

13. Flex Containers flex containers are not block containers
flex and inline-flex set the display property of flex containers to be a block-level flex box container and inline-level flex box container, respectively
flex containers are not block containers
‘column-’ properties of Multicol module have no effect
‘float’ and ‘clear’ have no effect
‘vertical-align’ has no effect

14. Flex Items Flex containers consist of zero or more flex items
Child elements of flex container are flex items
Each contiguous run of text in a flex container is contained in a flex item
Flex item margins do not collapse
visibility: collapse can be used to hide flex item without changing its cross size

15. Ordering and Orientation Flex Flow Direction
Flex items can be laid out in any direction and in any order
flex-direction
row | row-reverse | column | column-reverse
For row main axis has same orientation as in-line axis main-start and main-end equivalent to start and end
row-reverse swaps main-start and main-end directions
For column main axis has same orientation as block axis and main-start and main-end equivalent to before/head and after/foot directions, respectively
column-reverse swaps main-start and main-end directions

16. Ordering and Orientation Flex Line Wrapping
Flex containers can be single-line or multi-line
Direction of cross-axis determines direction new lines are stacked in
flex-wrap
nowrap | wrap | wrap-reverse
Flex containers are single-line with cross-start direction equivalent to either start or before/head direction whichever is the cross-axis and cross-end direction is the opposite direction to cross-start when value is nowrap
wrap sets multi-line flex containers
wrap-reverse same as wrap but swaps cross-start and cross- end directions

17. flex-flow
flex-flow is the shorthand for setting flex-direction and flex-wrap properties
div { flex-flow: row; } /* Initial value. Main-axis is inline, no wrap. */
div { flex-flow: column wrap; } /* Main-axis is block-direction (top to bottom) and lines wrap in the inline direction (rightwards). */
div { flex-flow: row-reverse wrap- reverse; } /* Main-axis is the opposite of inline direction (right to left). New lines wrap upward. */ 2 3 4 1 2 3 4 1 2 3 4 1

18. Ordering and Orientation Display Order
Display order of flex items in flex container controlled by assignment to ordinal groups
order
<integer>
Flex containers lay out flex items starting from lowest ordinal group going up
Flex items in the same ordinal group laid out in the order they appear in the source document
order should only be used for visual ordering and not logical or semantic ordering

19. The “Holy Grail Layout”
<!DOCTYPE html> <header>...</header> <div id=“main”> <article>...</article> <nav>...</nav> <aside>...</aside> </div> <footer>...</footer> #main {display: flex;} #main>article {flex:1; order:2;} #main>nav {width:200px; order:1;} #main>aside {width:200px; order:3;}
<header>
<nav>
<article>
<aside>
<footer>

20. Flexibility The “flex” Shorthand
The defining property of a flex item
alters the width or height of the flex item to fill available space
Flex container distributes free space to flex items proportional to their flex grow factor and shrinks them to prevent overflow proportional to their flex shrink factor
flex shorthand for flex-grow, flex-shrink, and flex- basis
The flex-basis sets the initial main size of the flex item before free space is distributed
If this value is omitted it is specified as a value of length zero
It’s recommend to use the flex shorthand rather than the individual flex components

21. Diagram showing the difference between “absolute” flex (flex-basis: 0) and “relative” flex (flex-basis: auto)
Initial value of flex is flex: 0 1 auto

22. Common Values of flex flex: 0 auto flex: initial flex: auto flex: none
Equivalent to flex: 0 1 auto
Sizes items based on width/height properties
Items inflexible when free space is positive
Allows items to shrink when space is insufficient
flex: auto
Equivalent to flex: 1 1 auto
Makes items fully flexible
Any free space left after items that are either flex:auto, flex:initial, or flex:auto have been size is assigned to the flex:auto items
flex: none
Equivalent to flex: 0 0 auto
Sizes items based on width/height
Items are inflexible and will not shrink
flex: <positive-number>
Equivalent to flex: <positive-number> 1 0px
Makes item flexible

23. Alignment
Alignment of flex items within the flex container is applied after flexing is finalized
Can use margin: auto similar to how it is applied in box content
The justify-content property aligns flex items along main axis of the current line of the flex container
Applied after flexible lengths and auto margins are resolved
Useful for distributing extra space when all items are inflexible

24. Alignment
Cross-axis alignment achieved with align-items and align- self properties
Flex items aligned along cross-axis similar to justify-content but in the perpendicular direction
align-items sets default alignment for all flex items
align-self allows default alignment to be overridden for individual flex items

25. Alignment
For multi-line flex containers the align-content property can pack flex items along the cross-axis similar to the justify- content property aligns items within the main-axis

26. Old Flex and New Flex
For the best browser support you may have to specify multiple prefix properties:
display: -webkit-box; /* OLD - iOS 6-, Safari */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */