CSS3--FlexBox (flexible box)

Box model

There is a basic design pattern called box model in CSS, and the box model defines how elements in a Web page are parsed.

In the box model, the properties of width, height, border, background, padding, and margin are mainly included, and the hierarchical relationships between them can affect each other.

The difference between the standard box model and the traditional box model of IE

The scope of the standard box model includes margin, border, padding, content, and the Content section contains no other parts.

Unlike the standard box model, the Content section of the IE box model contains border and pading.

Note: Without the DOCTYPE statement, IE will use the IE box model to explain your box, and FF will use the standard box model to explain your box ... So the Web page in different browsers is not the same as the display. Conversely, add the DOCTYPE statement, all browsers will use the standard box model to explain your box, the Web page can be displayed in each browser consistent.

Telescopic layout: FlexBox

CSS3 added a new value to the Display property flex, so a new layout was born: Flexbox layout.

The advantage of the Flexbox layout is that you can automatically modify the spacing and size of items within an elastic container as needed. With this, you can implement a responsive layout with just a few lines of code without resorting to any framework (project width can be adaptive)

Grammar:div{ display: -webkit-flex; display: flex; }

In the Flexbox layout, if the child elements are arranged along the x axis, the x axis is the spindle, the Y axis is the secondary axis (the side axis), and vice versa.

Flex-direction

The Flex-direction property determines the direction of the spindle (that is, the item arrangement direction)

syntax: flex-direction:row | Row-reverse | Column | Column-reverse;

row(default): Spindle is horizontal, starting point on left side

row-reverse: The spindle is in the horizontal direction, starting at the right end

column: The spindle is in the vertical direction, the starting point is in the upper edge

column-reverse: The spindle is in the vertical direction, the starting point is the lower edge

Justify-content

The Justify-content property defines how the item is aligned on the spindle

syntax: justify-content:flex-start | Flex-end | Center | Space-between | Space-around

flex-start: The default value, which indicates alignment relative to the start of the spindle.

flex-end: Indicates alignment relative to the spindle end point.

center: Center alignment. (If the remaining free space is negative, the flex item will overflow in two directions at the same time).

space-between: Indicates justification and distributes the remaining space evenly in the spindle direction (side-by-side project)

space-around: Indicates center alignment then distributes the remaining space evenly in the spindle direction (there is a gap between the project and the boundary)

Align-items

Align-items property: Used to indicate the alignment of the retractable item in the side axis direction (the alignment of the subelements in each line)

syntax: align-items:flex-start | Flex-end | Center | Baseline | Stretch

baseline: Aligns to the base of the first line of text.

stretch: Default value, if the container item is not set to a height, the stretch is used, and all items are the same as the highest. If the item has a height, it is displayed as Flex-start.

Flex-wrap

Flex-wrap Property: Defines whether line wrapping is allowed

syntax: flex-wrap:nowrap | Wrap | Wrap-reverse

nowrap-By default, the elastic container is a single line. In this case, the elastic child may overflow the container.

wrap-Flexible container is multi-line. In this case, the part of the Flex child overflow will be placed on a new line, and a break will occur inside the child.

wrap-reverse-Reverse wrap arrangement.

Attention:

(1) If the item is horizontal and the item has no width property, the item width and content width are the same.

(2) When the Width property is set to the project, when the total width of the item is less than the container, it is set by width and the total item width exceeds the container, because the default is not to wrap, width adaptive (split width).

(3) To set the line wrapping, the width is also set to the display.

Flex-flow

The Flex-flow property is a shorthand for the Flex-direction property and the Flex-wrap property. The default value is row nowrap;

Align-content

When you are making multi-line layouts, you can use the Align-content property to Specify the alignment between rows .

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

flex-start: Start layout All rows from cross (side axis)-start.

flex-end: Layout all rows starting from Cross-end.

center: Center layout all rows.

space-between: The gap between the branches.

space-around: Evenly divide the margins on both sides of each line.

stretch: Default value. When the child element does not have a specified height, the
With this setting, the extended height fills the parent element.

Align-self

This property is the setting of its own alignment on the side axis for each scalable item.

The Align-item property previously set on the container is set as a whole, and all elements are aligned the same way.

The Align-self property overrides the previous Align-item property so that each retractable item has a different alignment on the side axis, and when you set align-self, do not set the Align-item in the telescopic container.

syntax: align-self:flex-start | Flex-end | Center | Baseline | Stretch

Order

the Order property controls the sequence in which elements appear in the layout. (Added on a scaling project, sorting items for all rows)

Note: If there are multiple child elements, only one above the order, then the effect may be different from what you think of it!

Syntax: order:-1;

Flex

There are generally two ways to use (add in a scaling project):

1. Set all scaling items flex:1 so that the total width of all child elements is equal to the container width (the original multiple rows are changed to one row).

2, on the basis of all flex:1, the individual child elements can be set separately flex:2, so that the element width is twice times the other elements.

Flex-grow

You can use the Flex-grow property to Specify the width of an element, but the style property is calculated differently for the width of the element than for the Flex style property for the width of the element. (Added on the scaling project)

Attention:

(1) When the flex-grow:1 is set for all scaling items, and the line is allowed to wrap, the items in each row are evenly divided to fill the entire row.

(2) If the item itself has a width, refer to this width to determine whether to wrap, and because of the flex-grow:1, the final width is automatically adjusted to fill the entire line.

(3) If line wrapping is not allowed, you can choose to use Flex-grow or Flex-shrink.

A. When the sum of the child element's width style property values is less than the value of the container element's widths, the child element width must be adjusted through the Flex-grow style property

B. When the sum of the child element's width style property value is greater than the value of the container element, the child element width must be adjusted through the Flex-shrink style property.

The calculation method is as follows:

<div id=”main”>    <div class=”content”></div>    <div class=”content”></div>    <div class=”content”></div></div><style>#main {    display: flex;    width: 600px;}.content {    width:150px;    flex-grow:1;}.content:nth-child(2) {    flex-grow:3;}</style>

When the sum of the width of the telescopic item is less than the telescopic container width:

1, 600 (container width) -150*3 (the total width of the div element width with three style classes named content) =150

2, 150/5 (the sum of the Flex-grow style property values for the three style class named Content's div element width) =30

The width of the div element with the first and third style class named Content equals 150 (its width style property value +) +30*1 (its Flew-grow style property value) =180px

The width of a DIV element with the second style class named Content equals 150 (its width style property value +) +30*3 (its Flew-grow style property value) =240px

Flex-shrink

<style>#main {    display: flex;    width: 600px;}.content {    display: flex;    flex-direction: column;    width:250px;    flex-shrink:1;}.content section:nth-child(2) {    order: -1;}.content:nth-child(2) {    flex-shrink:3;}</style>

When the sum of the width of the telescopic item is greater than the telescopic container width:

1, 250*3 (the total width of the div element width of three style classes named content)-600 (container width) =150

2, 150/5 (the sum of the Flex-shrink style property values for the three style class named Content's div element width) =30

The width of the div element with the first and third style class named content is equal to 250 (its width style property value +) -30*1 (its Flew-shrink style property value) =220px

3. The width of the div element with the second style class named Content equals 250 (its width style property value +) -30*3 (its Flew-grow style property value) =160px

Also attached to Ruan a peak God Classic Dice example: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

CSS3--FlexBox (flexible box)