Learn the front-end development from scratch-12, CSS3 flexible layout

First, the layout of the column

1. Set Number of columns

Column-count: Numerical value;

2. Set the width of each column

Column-width: value + unit;

Note: When the Column-width,column-count is set to fail, the two settings can be

3. Set spacing between columns

Column-gap: value + unit;

4. Set the bar spacing line

column-rule:5px solid|dashed|dotted Black;

5. Set whether the hurdles display

Column-span:all (hurdle) |none (not hurdle);

Note: A) Set this property for the element that needs to be displayed in the hurdles

b) This property is supported only by Chrome browser

Second, flexible layout

Description

(1) When a Display:flex is set for the element, the element becomes the elastic box

(2) When the parent element is set to Display:flex, the float,clear,vertical-align of the child element will be invalidated.

(3) we will set Display:flex; the parent element of the property is called the Flex container, and all of its child elements are called container members or Flex projects

(4) When the Display:flex is set up, then two axes are generated: the spindle and the cross axis

Flex Container Properties

1. Setting the spindle direction

Syntax: Flex-direction:row|row-reverse|column|column-reverse;

Row default value, spindle in horizontal direction, starting point in left side

Row-reverse spindle in horizontal direction, starting at right end

Column spindle in the vertical direction, starting at the top edge

Column-reverse spindle in the vertical direction, starting at the bottom edge

2. Set whether the Flex container is single-row or multi-line display

Syntax: Flex-wrap:nowrap|wrap|wrap-reverse;

nowrap default value, no line break

Wrap Wrap

Wrap-reverse wraps, but the order of the rows is reversed

Note: This property is mainly for when the spindle is in the horizontal direction.

3.flex-flow

It's a shorthand for flex-direction and flex-wrap.

The default value for Flex-flow is:

Flex-flow:row nowrap;

4. Setting the alignment of the spindle

Syntax: Justify-content:flex-start|flex-end|center|space-between|space-around;

A) Flex-start default value, similar to left float

b) flex-end similar to right float

c) Center Center alignment

d) Space-between flex projects are aligned at both ends, with the intermediate intervals equal

e) equal intervals on both sides of the Space-around Flex project

5. Set the intersection axis alignment

Syntax: Align-items:flex-start|flex-end|center|baseline|stretch;

A) Flex-start align the starting point of the intersection axis

b) Flex-end align the end point of the intersection axis

c) Center alignment along the cross axis direction

d) baseline aligned along the first line of the Flex Project text baseline

E) Stretch fills the height of the entire parent element when the Flex project is not set to height or auto

Note: How to use the elastic box to achieve a variable width and height elements are centered horizontally vertically in the parent element

Here's how:

Parent Element {
Display:flex;
Justify-content:center;
Align-items:center;
}

How to make an element centered horizontally vertically on the screen window, set the following:

html,body{height:100%;}

body{
Display:flex;
Justify-content:center;
Align-items:center;
}

6. Setting the alignment of multiple axes

Syntax: Align-content:flex-start|flex-end|center|space-between|space-around|stretch;

A) Flex-start align the starting point of the intersection axis

b) Flex-end align the end point of the intersection axis

c) Center with cross axis as reference, center alignment

d) space-between the axis of multiple axes, equidistant between axes

e) equal intervals on both sides of the space-around axis

f) Stretch if the Flex project is not set to height or auto, the height of the parent element will be evenly divided

Note: This property does not work when there is only one axis

Flex Project Properties

1. Set the order in which flex projects are arranged

Syntax: order: value; (The smaller the value, the more forward)

2. Set the cross axis alignment of a flex project that differs from other flex projects (overriding the Align-items property of the parent element)

Syntax: Align-self:flex-start|flex-end|center|baseline|stretch;

3. Set the magnification of the Flex project

Syntax: flex-grow:0 | Numerical

Note: When the parent element has remaining space, the default value is 0, not zoomed

4. Set the scaling of flex projects

Syntax: flex-shrink:1| value;

Note: When the parent element is out of space, the default Flex project is scaled down, and the default value of Flex-shrink is 1

flex-shrink:0; Flex projects do not shrink even if there is not enough parent element space

5. Set the space for the Flex project to occupy the spindle

Syntax: flex-basis: Values + units;

Note: Similar to setting the width height of the element;

6.flex Properties

Flex is a shorthand for flex-grow,flex-shrink,flex-basis

Default value: flex:0 1 auto;

two applications for flex:1;

A) equal proportion of space allocated

b) Allocate the remaining space

Learning from scratch front end development-12, CSS3 elastic layout