CSS layout attributes and css layout

CSS layout attributes and css layout
I. Introduction to elastic Box Model 1. Introduction to elastic box model-Basic Knowledge

The Flexible Box model (Flexible Box or Flexbox) is a newly added Layout Module in CSS3, officially known as the CSS Flexible Box Layout Module, it is used to align, align, and sort projects in the container (even when the project size and position are dynamically generated ). The biggest feature of the elastic box model is that it can dynamically modify the width and height of sub-elements to fit the appropriate layout under screens of different sizes.

* Flexible container)

* Flex item)

* The axis is divided into the main axis side axis. The elastic sub-elements are arranged in sequence along the main axis, and the side axis is perpendicular to the main axis.

* Main start, main end, cross start, and cross end of an Elastic container) it represents the starting and ending positions of the elastic sub-element arrangement.

　　　　

2. Introduction to the elastic box model-attribute classification

(1) elastic container attributes

　　　　

(2) attributes of the elastic child element

　　　　

3. Attribute details

(1) Syntax: flex-direction: row | row-reverse | column-reverse
Description: sets the direction of the spindle to determine the arrangement of the elastic child elements.

　　

　　

(2) Syntax: flex-wrap: nowrap | wrap-reverse
Meaning: Set whether to wrap a line when the elastic child element is out of the range of the elastic container

　　　　

　　　　

(3) Syntax: flex-flow: [flex-direction] | [flex-wrap]
Description: attributes (flex-direction and flex-wrap) are composite, and the auto-child element arrangement mode is set.

(4) Syntax: justify-content: flex-start | flex-end | center | space-between | space-around
Meaning: Set alignment on the spindle of the elastic child element

　　

　　

(5) Syntax: align-items: flex-start | flex-end | center | baseline | stretch
Meaning: Set alignment on the side axis of the elastic child element

　　

　　

(6) Syntax: align-content: flex-start | flex-end | center | space-between | space-around | stretch
Meaning: When the side axis is blank and multiple rows exist, set the alignment mode on the side axis of the elastic child element.

　　

(7) Syntax: order: <integer>
Meaning: Set the order of the elastic sub-elements. Values are smaller than the first and can be negative values.

(8) Syntax: flex-grow: <number>
Description: Set the scaling ratio of an Elastic subelement. The value cannot be negative. The default value is 0. Allocate the remaining space based on the scaling factor set by the elastic box element as the ratio

(9) Syntax: flex-shrink: <number>
Description: sets the scale-in ratio of an Elastic subelement. It cannot be a negative value. The default value is 1.
Scale down space based on the scaling factor set by the elastic box element

(10) Syntax: flex-basis: <length >|< percentage> | auto

Meaning: Set the scaling reference value of the auto scaling sub-element. It cannot be a negative value. The default value is auto and there is no specific width (height ).

(11) Syntax: flex: none | [flex-grow] | [flex-shrink] | [flex-basis]
Description: Composite attribute, used to set how to allocate space for the elastic child element.

(12) Syntax: align-self: auto | flex-start | flex-end | center | baseline | stretch
Meaning: sets the align-item align on the side axis. Sets the independent alignment of an Elastic sub-element.

　　

 

Ii. Practical Use of the Flexbox menu Project

1. Requirements:

Large Screen:

　　

On-screen:

　　

Small screen:

　　

2. body:

1 <ul class="menu">2     <li><a href="#">HTML</a></li>3     <li><a href="#">CSS</a></li>4     <li><a href="#">Javascript</a></li>5     <li><a href="#">Sass</a></li>6     <li><a href="#">Ruby</a></li>7     <li><a href="#">Mongo</a></li>8 </ul>

3. css style section:

1 <style> 2*{3 padding: 0; 4 margin: 0; 5 border: none; 6} 7 html {8 font-size: 12px; 9} 10. menu {11 width: 100%; 12 border: 1px solid rgba (, 0 ,. 1); 13 display: flex;/* activate the flexible Layout */14 flex-flow: row wrap;/* set the direction of the spindle and whether to wrap the line */15} 16. menu li {17 list-style-type: none; 18 text-align: center; 19 height: 40px; 20 line-height: 40px; 21 flex: 1 1 100%; 22} 23. menu li: nth-child (1) {24 background-color: #39ADD1; 25} 26. menu li: nth-child (2) {27 background-color: # 3079AB; 28} 29. menu li: nth-child (3) {30 background-color: #982551; 31} 32. menu li: nth-child (4) {33 background-color: # E15258; 34} 35. menu li: nth-child (5) {36 background-color: # CC6699; 37} 38. menu li: nth-child (6) {39 background-color: #52AC43; 40} 41. menu a {42 text-decoration: none; 43 color: # fff; 44 font-size: 2rem; 45} 46 @ media (max-width: 768px) {47. menu {48 flex-wrap: wrap; 49} 50. menu li {51 flex: 1 50%; 52} 53} 54 @ media (max-width: 480px) {55. menu {56 flex-direction: column; 57} 58. menu li {59 flex: 1 1 100%; 60} 61} 62 </style>

 

Iii. Media query and resolution

1. Basic Knowledge

Responsive Web design refers to developing a website for different devices during the Web development process, the layout is displayed automatically based on user behavior and the device environment (system platform, screen size, screen orientation, etc. The core of responsive layout is media query. Media Query is short for Obtaining user behaviors and device environments and providing corresponding CSS rules. Media query allows CSS to act more accurately on different media types and different conditions of the same media.

2. Basic syntax

　　

Syntax <media_query_list>: [<media_query> [',' <media_query>] *]? <Media_query>: [only | not]? <Media_type> [and <expression>] * | <expression> [and <expression>] * <expression>: '(' <media_feature> [: <value>]?) '

<Expression>: '(' <media features> [: <value>]? ')' <Media query>: [only | not]? <Media type> [and <expression> *] | <expression> [and <expression>] * <media query list>: [<media query> [, <media query>] *]?

 

3. Media features

　　

4. Media type

5. Media query rules

6. Media query resolution-screen size

The common screen sizes are as follows:
* Old smartphone: 320px-480px
* Smartphone: ≥480px
* Tablet: ≥768px
* Medium screen (desktop display): ≥992px
* Large screen (large desktop display): ≥0000px
In the implementation process, follow the move-First Principle