Css Xi- Flexbox

Front 1

Flexible Box Layout Module

= easier design flexible responsive layout w/out use float or positioning.

## Before Flexbox (iv) layout modes

(i) Block - sections in a webpage

(ii) Inline - text

(iii) Table - 2D table data

(iv) Positioned - explicit position an element

Back 1

j

Front 2

How create flex box

Back 2

add .flex-container parent w/ display: flex; CSS

Front 3

Flex container properties (6)

(i) flex-direction: iv.

Back 3

(i) flex-direction: = direction container stacks flex items

i. column; - vertical T to B

ii. column-reverse; - vertical B to T

iii. row; - horizontal L to R

iv. row-reverse; horizontal R to L

Front 4

Flex container properties (6)

(ii) flex-wrap: iii.

(iii) flex-flow: ii.

Back 4

(ii) flex-wrap: - specifies whether flex items wrap or not

[wrap;, nowrap; or wrap-reverse;]

(iii) flex-flow: - shorthand set flex-direction & flex-wrap

ex.

.flex-container {

display: flex;

flex-flow: row wrap;

}

Front 5

Flex container properties (6)

(iv) justify-content:

i. center;

ii. flex-start;

iii. flex-end;

iv. space-around;

v. space-between;

Back 5

(iv) justify-content: - horiz aligns flex items

i. center; - items align center container

ii. flex-start; (dflt) - items align @ beginning container

iii. flex-end; - items align @ end container

iv. space-around; - items w/ space b4, b/w, & after lines:

v. space-between; - items w/ space b/w lines

Front 6

Flex container properties (6)

(v) align-items:

i. center;

ii. flex-start;

iii. flex-end;

iv. stretch;

v. baseline;

Back 6

(v) align-items: - align flex items vertically

i. center; - align items middle container

ii. flex-start; - align items top container

iii. flex-end; - align items bottom container

iv. stretch (dflt); - stretches flex items (fill container)

v. baseline; - align items @ their baselines

Front 7

Flex container properties (6)

(vi) align-content: property

i. space-between;

ii. space-around;

iii. stretch;

iv. center;

v. flex-start;

vi. flex-end;

Back 7

(vi) align-content = used align flex lines.

i. space-between; - equal width lines

ii. space-around; - space before, b/w, & after each line

iii. stretch; [dflt] - stretches lines take up rem space

iv.center; - lines in middle container

v. flex-start; - lines @start container

vi. flex-end; lines @end container

Front 8

remedy Problem Perfect Centering

justify-content: center;

align-items: center;

Back 8

E

Front 9

direct child elements flex container auto become flexible (flex) items.

Back 9

E

Front 10

Flex item properties (6)

(i) order:

Back 10

(i) order: INT - specifies order flex items

## 1st flex item d/have appear as 1st item in layout.

## order value must be a # (default value =0)

Front 11

Flex item properties (6)

(ii) flex-grow: property

Back 11

(iii) specifies how much flex item grow relative rest flex items

## value must be # (default= 0)

Front 12

Flex item properties (6)

(iii) flex-shrink:

Back 12

(iii) specifies how much flex item shrink relative rest of the flex items.

## default value = 1

Front 13

Flex item properties (6)

(iv) flex-basis property

Back 13

(iv) specifies initial length flex item (given px)

Front 14

Flex item properties (6)

(v) flex: property iii.

Back 14

(v) shorthand for

i. flex-grow,

ii. flex-shrink

iii. flex-basis

Front 15

Flex item properties (6)

(vi) align-self:

Back 15

(vi) specifies alignment for selected item inside flex container.

## overrides default alignment set by container's align-items property.