The composition of the web

  • HTML: Hypertext markup language
  • CSS: Cascading style sheets
  • Javascript: Lightweight scripting language (behavioral and dynamic)

HTML tag rules

  • Keywords are wrapped in Angle brackets,
  • Pairs up, opening tag and closing tag (closing tag with extra backslash)
< p > paragraph < / p >Copy the code

They are basically double tags, but one category and one special category are single tags (empty tags or autism and tags)

<img SRC ="" /> <meta /> <input type="text" placeholder=" placeholder "/>Copy the code

Fast HTML production

  • Create a new xxx.html file
  • The input method is English
  • Press in the edit area! +enter

Basic structure of HTML

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>Copy the code

Relationship of labels

  • Include (HTML contains head, body)
  • Juxtaposing (head and body)

The label

The title tag can be divided into six levels, from H1 to H6, which are of the same thickness from the appearance. The font size decreases step by step and its importance gradually decreases. H1 is usually used as part of a logo

< h1 > primary title < / h1 > < h2 > secondary title < / h2 > < h3 > 3 title < / h3 > < h4 > level 4 title < / h4 > < h5 > 5 title < / h5 > < h6 > six levels of headings < h6 > 6 h $* $} {title fast generationCopy the code

The paragraph

< p > paragraph < / p >Copy the code

The picture

< img SRC = "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=300576690, & FM = 26 & gp = 0. 152345561 JPG" Alt = "cute" Title =" hahaha ">Copy the code
  • SRC: indicates the address of the image
  • Alt: Substitute text (text that failed to load images)
  • Title: Mouse slide, there will be following text

hyperlinks

  • target:
    • The _self default window opens
    • A new window opened
<a href="http://baidu.com "target="_self">Copy the code

attribute

Represents certain functions and features. Attributes can be divided into built-in attributes and custom attributes. Note:

  • A tag can have multiple attributes
  • Properties must have Spaces between them
  • There is no order
< img SRC = "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=300576690, & FM = 26 & gp = 0. 152345561 JPG" Alt = "cute" Title =" width="300" index="2">Copy the code

A tag several values of href

  • Href =”baidu.com
  • Href =”#” back to top
  • Href =” “Reloads empty
  • href=”javascript:; Prohibit to jump
  • Anchor jump: Click on a link text to jump to the corresponding module, give each module a name using the href=” id=”#xx”” (don’t forget to add #)

Character entities

Character entities have character numbers and character names ## added tags ###1) iframe embedded in the web page

 <iframe src="1.html" frameborder="0" width="500" height="600"></iframe>
Copy the code

2) div

Large box label, used to divide areas (block level)

3) span

A small box label used to divide a small area (in line)

4) Format labels

  • The tag comes with a certain style
  • Italics: I, em
  • Bold: B, strong
  • Delete lines: DEL, S
  • Underline: U, INS

Both I and em are italics, and both B and strong are bold, but em and strong are more important than I and B in terms of optimization

5) Preformat the label pre

It will display in the format you wrote in the edit area

<pre>【】
        （） （）
    </pre>
Copy the code

6) Audio tag Audio

  • SRC: indicates the resource path
  • Loop: broadcast in a loop
  • Autoplay: autoplay
<! <audio SRC ="qt.mp3" controls loop></audio>Copy the code

7

<video src="212.mp4" controls></video>
Copy the code

List three

Unordered list:

Ul, LI, this is a fixed format, the next to ul must be LI, not other labels, but you can continue to nest other labels in li.

<ul> <li> Latest Video on Qomolangma: Documentary on the 10th anniversary of Qomolangma </ LI > </ul>Copy the code

Ordered list:

Ol, LI, this is a fixed format, ul must be adjacent to li, not other labels, but can continue to nest other labels in LI.

< OL > <li> Go to work </li> <li> eat </li> </li>Copy the code

Custom list

The next thing to dl can only be DT or DD, but there are other labels you can put inside dt or DD

A day of 3 eat < / h3 > < h3 > < dl > < dt > < / dt > breakfast soya-bean < dd > < / dd > < / dd > < dd > steamed stuffed bun lunch < dt > < / dt > < dd > over rice < / dd > < / dd > < dd > egg surface dinner < dt > < / dt > < dd > < / dd > small lobsters < DD > Beverage </ DD > </dl>Copy the code

Note: all three lists are fixed format, ul and OL are next to LI, if there are other labels in LI. Dl is next to DT and DD

Several ways to introduce CSS

1) inline type

<div style="width: 100px; height: 100px; background: yellow;" >box</div>Copy the code

2) embedded

</title> <style> div{width: 100px; height: 100px; background: yellow; } </style> </head> <body> <div>box</div> </body>Copy the code

###3) Outer chain

</title> <link rel="style "href="index.css"> </head> <body> <div>box</div>Copy the code

4) Import

 <style>
        @import url(index.css);
    </style>
Copy the code

Label division

  • Block-level elements
    • An exclusive line
    • Setting the width and height will work
    • Arrangement: up and down
  • Inline elements
    • A total of a line
    • Setting width and height does not work
    • Arrangement: left and right
    • Size depends on the content
  • Inline blocks
    • A total of a line
    • Arrangement: left and right
    • Setting the width and height will work

Label aggregation

  • Title h1 ~ h6
  • Paragraph p
  • Picture img
  • Hyperlink to a
  • Formatting label
    • A. strong B. strong C. strong D. strong
    • Italic I, em
    • Delete del and s
    • Underline INS and U
  • Audio audio
  • Video video
  • Big box div
  • Small box span
  • The three tables
    • ul li
    • ol li
    • dl dt dd

Classification of labels

  • Block-level elements
    • h1~h6
    • p
    • div
    • ul li
    • ol li
    • dl dt dd
  • Inline elements
    • a
    • span
    • B, strong
    • I, the em
    • Del, s
    • Ins, u
  • Inline blocks
    • img
    • video
    • audio

Diaplay values

  • Display: block; Convert to block-level elements
  • display:inline-block; Convert to inline blocks
  • display:inline; Convert to inline elements
  • display:none; Make the element disappear

Ways to make elements Disappear (interview questions)

  • display:none
  • Opacity :0
  • Visibility :hidden
  • Locate the element by changing the Z-index
  • With margin set to a large negative value, move to the outside of the screen

The difference between the first three

  • display:none; Is to disappear completely
  • Opacity :0, opacity: hidden, opacity: hidden

The CSS styles

Clear the default margin and padding values of elements on the page

  • Is a wildcard selector that selects all the elements on the page,
*{
margin:0;
padding:0;
}
Copy the code

The list is cleared by default

ul,ol{
list-style: none;
}
Copy the code

Clear the underline of the A label

a{
text-decoration:none;
}
Copy the code

Set the width, height, and background color for the element

<style>
div{
widtn:200px;
height:200px;
background-color:red;
}
</style>
Copy the code

The text is indent with text-indent

Text-indent can be followed by a specific pixel value, or by em, where 2em represents an indentation of two words.

<style>
    p{
        /* text-indent: 10px; */
        text-indent:2em;        
    }
</style>
Copy the code

Font size(default 16px)

p{
font-size:26px;
}
Copy the code

Font: font-family

If the font is Chinese or English and consists of multiple words, use single or double quotation marks (in sequence)

Font-family: 宋体,"Times New Roman",Georgia,Serif;Copy the code

The thickness of the text

  • 400 Normal thickness === Normal
  • 700 ===bold
  • 900 ===bolder

Font weight: normal(400);

<style>
    p{
        font-weight: bold;
    }
    b{  
        /* 400 */
        font-weight: normal;
    }
</style>	
Copy the code

Controls the text tilt font-style

  • font-style:italic; Tilt the text
  • font-style:normal; Make text normal

Center block-level elements horizontally

div{
width:100px;
height:100px;
background:green;
margin:0 auto;
}
Copy the code

The high line – height

Center text vertically, height=line-height

li{
height:35px;
line-height:35px;
}
Copy the code

Frame: boder

The module appears to have a dashed line. Solid: Indicates a solid line

<style>
  div{
      width:200px;
      height:200px;
      border:2px dashed darkturquoise; 
        }
</style>
Copy the code

The selector

Wildcard selector

Weight: 0

*{
   margin:0;
   padding:0;
   }
Copy the code

Label selector

Weight: 1.

<style>
   div{
		backgroung-color:red;
      }
</style>
Copy the code

Class selectors

Weight :10 class names can be reused, with. Said.

<style>
.main{
width:100px;
height:100px;
}
<style>
<div class="main"></div>
Copy the code

The id selector

Weight: 100 with #, an HTML page ID name is unique, not reusable;

<style>
#main{
width:100px;
}
</style>
<div id="main"></div>
Copy the code

Property selector

Weight :10

• [attribute]{}, select all tags that have this attribute • [attribute = “attribute value”], select tags that not only have this attribute, but must have a specified attribute value

Select all elements of the class that have the index attribute

<style> [index]{ background-color: red; {background-color: blue; background-color: blue; background-color: blue; background-color: blue; } </style> <div index="a">box2</div> <div index="b"> box3</div>Copy the code

Child selector

Graviton: the sum of selected combinations of selectors (concatenators have no weights)

<style>
      div>h1{
          background:green;
      }
</style>
<div class="main">
<p>p1</p>
<h1>h1</h1>
<div>
<span>span</span>
</div>
</div>
Copy the code

Descendant selector

Weight: sum of the weights of the combined selector concatenator: space

<style>
      div span{
          background:green;
      }
</style>
<div class="main">
<div>
<span>span</span>
</div>
<span>span</span>
</div>
Copy the code

Packet selector

Weight: sum of combinatorial selectors connecter: comma,

.box1>p1,.box2{
           color:darkorange;
           width:100px;
           height:100px;
           background:green;
}
<div class="box1">
<p>p1</p>
</div>
<p class="box2">box2</p>
Copy the code

Intersection selector

Weight: Sum of combined selectors Symbol: No meaning: consists of multiple selectors

<style> .box1.current{ background:green; } </style> <div class="box1">box1</div> <p class="current">p1</p>Copy the code

Adjacent sibling selectors

In the following example, h1+ P means to select the p tag next to h1

<style>
      h1+p{
          background:green;
      }
</style>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
Copy the code

Adjacent universal selector

Weight: Sum of combinative selectors Concatenation symbol: ~ What it means: For example, h1 to p represents all sibling P tags below h1

<style>
      h1~p{
          background:green;
      }
</style>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<div>box1</div>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
Copy the code

Pseudo class selector

The four states of a label have a certain order, which is called the “love-hate principle” on the Network. Focus on remember: hover can, other several incompatible.

<style> a{ font-weight: bold; font-size:100px; } /* Default link text color */ a:link{color:green; } /* A :visited{color:gold; } / / a:hover{color:hotpink; } /* a:active{color:darkcyan; } </style>Copy the code

form

<style> table{ margin: 0 auto; text-align: center; /* border-collapse: collapse; /* table layout: fixed; } </style> <body> <! <table border="1" width="500" height="300" > <! - the title of the table - > < caption > score < caption > < tr > < th > language < / th > < th > mathematical < / th > < th > English < / th > < / tr > <! Td + rowspan + rowspan: colspan --> <tr> <td colspan="2">100</td> <td>100</td> </tr> <tr> <td>100</td> <td>100</td> <td rowspan="2">100</td> </tr> <tr> <td>100</td> <td>100</td> </tr> </table> </body>Copy the code

The path

An absolute path

+ is the actual path of the file or directory on your home page on your hard disk (URL and physical path) for example: >• C:\xyz\test. TXT represents the absolute path of the test. TXT file. >, http://www.sun.com/index.htm, and represents an absolute URL path.Copy the code

Relative paths

Img /1. Pang: use ".. /"Copy the code

Three features of the CSS

  • inheritance
  • Cascading sex
  • priority

1) inheritance

  • Having the property of inheritance

Not all attributes are inheritable. Attributes starting with color/font-/text-/line-, element visibility: visibility, and widths in normal document flows are

2) cascading

Cascading is the ability of CSS to handle conflicts. Layering occurs when multiple selectors select the same element and set different values for the same attribute. How to handle:

1, if the weight is the same, it depends on the order of the CSS code, the following will cover the previous attribute 2, if the weight is not the same, who has the power to listen to who.

3) priority

  • If the weights are the same, look at the code order, the following will override the top
  • If the weight is different, the weight is significant (the weight within the line is particularly high)

3.1) Weight order

! Important > Inline Style (inline)> ID > Class > Tags > Wildcard > Inheritance > Browser Default

Form (label Form)

Common form elements

  • input
    • Type: text Indicates the text input box
    • Type: password Indicates the password input box
    • Type: reset Reset
    • Type: submit
    • Type: the button button
    • Type: radio Optional
    • Type: the checkbox multi-select
    • Property: placeholder hint text
    • Property: Autofocus Automatically gets focus
    • Property: Required validation (non-null)
    • Property: Checked (input is checked by default)
  • Button: button (there is also a form submission function by default, to disable it, add type= “button” attribute to disable it)
  • Textarea text field (comment box)
  • Select: drop-down box
    • Selected Selected by default
    • Disabled Disable selection
< span style> input,textarea{// outline: none; // Do not change the size of textarea resize: none; } </style> <form action=""> <! <input type="text" placeholder=" placeholder "autofocus required> <! Input type="password" placeholder=" please input password" required> <! <input type="submit"> <! <input type="reset"> <! <input type="button" value=" reset "> <! <input type="radio"> <! <input type="checkbox"> <! <button type="button"> Pay </button> <! - text fields - > < textarea name = "" id =" "cols =" 30 "rows =" 10 "> < / textarea > < select name =" "id =" "> < option Value =""> Please select the city you are from </option> <option value=""> Zhengzhou </option> <option value="" disabled> Hebei </option> <option Value =""> </option> <option value="" select> </form>Copy the code

The radio

<! <h2> Select gender </h2> <input type="radio" name="sex" id="man"> <label for="man"> Male </label> <input Type ="radio" name="sex" id="woman"> <label for="woman"> </label>Copy the code

multi-select

<h2> <form action=""> <input type="checkbox" name="aihao" id="book" > <label for="book"> </label> <input Type ="checkbox" name="aihao" id="music" > <label for="bmusic"> </label> <label for="swim"> </label> <input type="checkbox" name="aihao" id="run" > <label for="run"> </label> <! <input type="reset" name="aihao"> </form>Copy the code

The box model

The composition of the box model

  • Content Main content area
  • Within the padding filling
  • Border border
  • Margin The distance between the elements

Box size calculation

  • Total box height = Height of content + padding+ border
  • Box width =content width + left/right padding+ left/right border

Classification of box models

  • Box-sizing: content-box
  • Box-sizing: border-box

The difference between the two?

In the standard box model, the width and height set in the code refer to the width and height of the content part. In the IE model, the width and height set in the code refer to the width and height of the box.Copy the code

Padding order rule (same with margin)

<style> span{ background:green; /* Top, right, bottom, left */ /* padding:10px 50px 100px 200px; */ /* padding-bottom :10px 50px 100px; */ /* padding:10px 50px; */ /* Four directions */ padding:50px; display:inline-block; border:5px solid gold; } </style>Copy the code

The interview questions a

<style> *{ margin: 0; padding: 0; } .main{ width: 200px; height: 200px; background-color: pink; */ * border: 1px solid transparent; box-sizing: border-box; */ /* overflow: hidden; */ padding: 30px; box-sizing: border-box; } /* A big box has a small box inside it, and the small box has a margin-top, which causes the big box to fall down with it. 2, add a border; 3, Overflow: hidden; */ .box{ width: 100px; height: 100px; background-color: orange; /* margin-top: 30px; */ } </style> </head> <body> <div class="main"> <div class="box"></div> </div> </body>Copy the code

The interview questions 2

<style> *{ margin: 0; padding: 0; } /* "margin merges in vertical direction" : two sibling elements, aligned up and down, box1 sets a downward margin-bottom: 50px, box2 sets a upward margin-top: 100px; */.box1,.box2{width: 100px; height: 100px; background-color: violet; margin-bottom: 100px; } .box2{ background-color: yellowgreen; margin-top: 50px; } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> </body>Copy the code

2. To produce a gap by a newline character (a special text).

Solutions:

Font: size 0;Copy the code

If text is set in one and text is not set in the other, the default is baseline alignment, it will fall down. The specific way is to change the alignment.

/* vertical-align: top; /* vertical-align: bottom; /* vertical-align: bottom; /* vertical-align: baseline;Copy the code

floating

The value of the floating

  • float:left; Left floating
  • float:right; Right float
  • float:none; (Default, no float)

Floating characteristics

  • Out of normal document flow (not taking place)
  • Float left and float right for the parent
  • In normal document flow, widths are inheritable, but once floating, widths no longer inherit from their parent, but are determined by their own content size.
  • The width and height of inline elements are not used, but once the float is set, the width and height can also be used.
  • The essence of floating: at the beginning, it was to realize the combination of text and text. Scene: There is a picture and some text. If the picture is set to float, the text will be arranged around the picture.

How to solve the problem of “box collapse” caused by floating interview questions

Three ways to solve it

< div style = "box-sizing: border-box! Important; word-wrap: break-word! Important;" 3. Add a block level element to the end of the parent structure of the float element and set clear: both; */ .main{ width: 500px; /* height: 100px; */ border: 1px solid blue; /* overflow: hidden; }. Box {width: 100px; height: 100px; background-color: blueviolet; float: left; } /* .last{ clear: left; clear: right; /* Clear: both; } */ </style> </head> <body> <div class="main"> <div class="box"></div> <! -- <div class="last"></div> --> </div> </body>Copy the code

Solution 4

In your project, paste the following Clearfix styles directly into your CSS, and add the clearfix class name to the parent as soon as any element floats. (It is essentially the same as the third method.)

.clearfix:after{
content:"";
font-size:0;
display:block;
height:0;
visibility: hidden;
clear: both;
}
.clearfix{
*zoom:1;
}
Copy the code

Write a triangle for the interview question

<style> *{ margin:0; padding:0; } .box{ border:50px solid darkcyan; border-color: transparent transparent lightblue transparent; width:0; } </style> <div class="box"></div>Copy the code

Several values commonly used by Overflow

  • Overflow: hidden; Beyond the hidden
  • Overflow: auto; Scroll bars are added automatically, depending on the situation
  • overflow:scroll; Add scrollbars (whether or not you’re out of content)
<style> .box{ width:200px; height:200px; border:1px solid red; / /* overflow:hidden; */ /* Overflow :auto; overflow:auto; overflow:auto; overflow:auto; Overflow :scroll; overflow:scroll; overflow:scroll; } </style>Copy the code

Use the syntax

• background-image: URL (” image path “)

  • Background-position: horizontal and vertical; (Position of background image)
    • English: Horizontal direction: left, center, right; Vertical direction: top, center, bottom
    • Specific pixel values for example: background-position:50px 50px;
    • It could be a percentage
  • Background-repeat :(controls whether the image is tiled and in which direction it is tiled)
    • No-repeat: not tiled
    • Repeat -x: horizontal tiling
    • Repeat -y: vertical tiling
  • Background-attachment: Sets whether the background image is fixed or scrolls along with the rest of the page.
    • fixed
    • Scroll (default)
  • Background – size: x y; (Control the size of the background image, x represents the width of the background image, y represents the height of the background image)
    • Can be a specific pixel value, for example: background-size:100px 100px;
    • Background-size :100% 100%;
    • Cover: Expands the background image to a size large enough to completely cover the background area. It is possible that some parts of the background image may not be displayed in the background location area.
    • The image is expanded to its maximum size so that its width and height fully fit the content area. (When enlarging a background image, stop enlarging it as long as the width or height is covered on one side of the container.)

CSS 3 selector

nth-child

nth-of-type

Nth-child is the number of children selected; Nth-of-type is the number of selected child elements of a particular type

Locate the position

  • Static Static positioning
  • Relative positioning
  • Absolute absolute positioning
  • Fixed Fixed position

Relative positioning

  • It’s not out of the document stream, it’s still there
  • The hierarchy is higher than normal document flow
  • Make a reference to an absolutely located element
  • Relative to their own

Absolute positioning

  • Out of document flow
  • Hierarchy higher than normal document flow
  • An absolutely positioned element must be the parent element of the relationship when setting its reference
  • When the browser is looking for a reference, it follows the nearest rule. If none is set, its reference is the body
  • Originally, the width can be inherited, but the positioned element, the width is no longer inherited, is determined by its own content. In the case of inline elements, width and height can also be used after positioning.
  • If you set a percentage of the width of an absolute location element, it is relative to your reference, not the parent.

Absolute position: relative or position:absolute, position:fixed, as long as it is one of the three.

Fixed position

Fixed positioning is relative to the entire window.

The elves figure

Combining multiple images into a single image is called a Sprite or Sprite. Function: normal, there are a few pictures, the web page in the loading time, have to send how many HTTP requests, but if made into Sprite map, can reduce the number of requests, optimize the loading speed. Note: not all images are suitable for sprites, but only small ones are used. Rule: This value is always negative when writing background-position in Sprite graphs.

Be a circle

.box{ width:300px; height:300px; background:gold; border-radius: 50%; }

Transform Common values

Translate 1

  • Transform: translateX(100px);
  • Transform :translateY(100px);
  • Transform: Translate (100px,200px);

2, scale

  • Transform :scale(x,y),x represents x times the scale width,y represents y times the scale height
  • transform:scale(n); Represents scaling width and height n times at the same time

Rotate: Indicates the number of degrees rotated. It can be a negative value in deg

  • transform:rotateX(45deg); It represents 45deg rotation around the X-axis;
  • The transform: rotateY (45 deg); It represents 45deg rotation around the y axis;
  • transform:rotateZ(45deg); Represents 45deg rotation around the z-axis;

Skew: skew

Transform: skewX (45DEg) skewX (45DEg) Skew: Skew (10DEG, 15DEg), skew along the X and Y axesCopy the code

Transform-origin: x,y; Changes the origin of the element deformation.

  • Horizontal direction: left, center, right;
  • Vertical direction: top, center, bottom;

6, the transform – style:

  • Flat default value;
  • preserve-3d; It represents three dimensional space, stereoscopic;

7. Perspective adds this attribute to the parent element, and its children have the effect of being larger and smaller. Represents the distance between the observer and the dance, which can be commonly understood as the depth of field of the camera. For example: the perspective: 1000 px; The element below it will have a perspective effect.

Transition animations

transition

  • Transition-property :height;
  • Transition-duration: 2s;
  • Transition-timing-function: linear;
  • Delay: transition-delay: 1s;
  • Transition :all 2S linear 1s;

animation

  • Animation-name specifies the name of the keyframe to bind to the selector
  • Animation-duration Specifies how many seconds or milliseconds the animation will take to complete
  • Animation-timing-function Sets how the animation will complete a cycle
  • Animation-delay Sets the delay before animation starts.
  • The number of times the animation is executed: animation-rotund-count, which can be a specific number. For example, 3 means 3 times. You can set it to infinite;
  • Set the state of the animation: animation-fill-mode;
  • Forwards: When the animation is finished, stay at the last frame
  • Backwards: When there is a lag in animation, backwards will run quickly to the first frame to start animation
  • Both: When the delay is set, the animation starts quickly with the first frame and stops at the last frame when the animation ends.

Flex layout

Flex, short for Flexible Box, is designed to provide maximum flexibility to boxed models. Any container can be specified as a Flex layout. The Flex layout has two values:

  • display:flex; Represents the block level
  • display:inline-flex; This is the inline block

Basic flex layout concepts

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”

The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.

5. Container properties

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
5.1 Flex-direction Property: Sets the spindle direction
  • Row: The direction of the spindle is horizontal, from left to right
  • Column: The direction of the main axis is vertical, from top to bottom
  • Row-reverse: The orientation of the main axis is horizontal, right to left
  • Column-reverse: The direction of the main axis is vertical, from bottom to top
5.2 the flex – wrap:
  • Wrap: a newline
  • Nowrap: No line breaks (default)
  • Wrap-reverse: newline, but the first line is at the bottom
5.3 the flex – flow

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.

5.4 The justify-content property defines the alignment of items on the main axis.

justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;

5.5 align-items Property: The align-items property defines how items are aligned on the cross axis.

align-items: flex-start | flex-end | center | baseline | stretch; Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.

5.6 the align – content attribute

The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis. (That is, there must be a line feed of the item)

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

6. Project attributes

The following six properties are set on the project.

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self