CSS 5 Layout ③

float float

Float:left | Right | none |  Inherit floating to the left |  Floating Right |   No style (default) | Inherited

· Default width is content width

· Out of document Flow

· Move in the specified direction

· Float elements in the same document flow

· float element semi-detached document flow

　　　　

On the element, out of the document flow, on the content, in the document flow

Clear

Clear:both | Left | Right | none |  Inherit both (often used) | Left |  Right | No style (default) | Inherited

· Apply to subsequent elements

· Apply to block-level elements

· Blank element

· Clearfix

　　

Two-Column layout

　　

　　

· Multi-line Adaptive

· Multi-Column Adaptive

· Spacing Adaptive

· How does any alignment come true?

Flex Terms

Resilient containers

　　

Elastic container has two direct sub-elements, called Flex item elastic element, we put the flex item sort direction is called main axis spindle

direction perpendicular to the spindle cross axis auxiliary axis

　　

Create Flex Container

Display:block | inline | Inline-block |  none | Flex

Flex Item

· Child elements in a document flow type

　　　　　

　　　　Flex: Aligning with direction elasticity

Direction

· Flex-direction

· Flex-wrap

· Flex-flow

· Order

Flex-direction direction of elasticity

· Flex-direction: Row | Row-reverse | Column | Column-reverse from left to right | Reverse Line | From top to bottom | On

　　　　　　　　

　　　　　Flex-wrap Flexible Line-wrapping

· Flex-wrap: nowrap | Wrap | Wrap-reverse (reverse line wrapping) nowrap (default non-wrapping)

　　　　　　　　

　　

　　　　　　Flex-flow Set the arrangement and the direction of line wrapping at the same time

· Flex-flow: < ' flex-direction ' > | | < ' flex-wrap ' > Default now |  NoWrap from left to right | No Line break

　　

　　　　　　

　　　　Order sequence

Order:<interger>

initial:0

　　　　　　　

　　　　

　　Elastic

· Flex-grow

· Flex-shrink

· Flex-basis

Flex-basis

' Flex-basis: main-size |  < width > Spindle size | Width

' Set the initial width/height of the Flex item

　　　　　　　　

Flex-grow

' Flex-grow: < number>

' initial:0 initial value

　　　　　　

　　　　　　

　　　　　　

　　　　　　

　　　　　　

　　　　　　

　　　　　　　

Flex-shrink

Fiex-shrink: < number >

Initial:1

　　　　　　　　

　　　　　　　　

　　

Flex

Flex: < ' flex-grow ' > | | < ' Flex-shrink ' > | | < ' flex-basis ' >

initial:0 1 Main-size

　　　　　　

Snap To

Justify-content

Aling-items

Align-self

Align-content　

Justify-content

' Justify-content: flex-start | Flex-end | Center | Space-between | Space-around

' Set the alignment in the Main-axis direction (alignment of the spindle direction)

　　

　　　　

　Align-items

Align-items:flex-start | Flex-end | Center | Baseline | Stretch

Set the alignment on the Cross-axis direction (main setting alignment on the direction of the secondary axis)

　　

Align-self

Align-self:auto | Flex-start | Flex-end | Center | Baseline | Stretch

Sets the alignment of a single flex item in the Cross-axis direction

　　

Align-content

Align-content:flex-start | Flex-end | Center | Space-between | Space-around | Stretch

Set Cross-axis direction upstream alignment

　　　　

　　

Three-row, two-column adaptive layout

　　

　　

CSS 5 Layout ③