COMP 135Web Site Design Intermediate

Week 7

CSS3 Layout Multicol

Flexbox

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

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

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 */

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;

}

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*/ }

Multi-Column Model Traditional CSS box model:

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

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.

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

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

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.

Flex 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

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

Ordering and OrientationFlex 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

Ordering and OrientationFlex 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

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 41

2

3

41

23

4

1

Ordering and OrientationDisplay 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

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>

<aside>

<article>

<footer>

FlexibilityThe “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

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

Common Values of flex flex: 0 auto flex: initial

Equivalent to flex: 0 1 autoSizes items based on width/height propertiesItems inflexible when free space is positiveAllows items to shrink when space is insufficient

flex: autoEquivalent to flex: 1 1 autoMakes items fully flexibleAny 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: noneEquivalent to flex: 0 0 autoSizes items based on width/heightItems are inflexible and will not shrink

flex: <positive-number>Equivalent to flex: <positive-number> 1 0pxMakes item flexible

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

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

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

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 3.1-6 */ 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+ */