CSS3 elastic box model and multi-column attributes

CSS3 elastic box model and multi-column attributes

Flexbox can achieve a lot of results, especially adaptability, so record these knowledge points

FlexBox introduction:

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.

The flex item axis of an Elastic container (flex container) is divided into the main axis (main axis) side axis (cross axis). The elastic sub-elements are arranged along the main axis in sequence, the side axis is perpendicular to the spindle. 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.

Elastic container attributes flex-direction

Syntax: flex-direction: row | row-reverse | column-reverse meaning: set the direction of the spindle and determine that the arrangement of the elastic sub-elements is horizontal. The order is the same as the document order on the page. If the document order is ltr, the order is from left to right. If the document order is rtl, the order is from right to left. The row-reverse spindle is in the horizontal direction. The order is different from the document order on the page. The column spindle is vertical. The order is from top to bottom. The column-reverse spindle is vertical. The order is from bottom to top.

Flex-wrap

Syntax
Flex-wrap: nowrap | wrap-reverse
Description
Set whether to wrap a line when the elastic sub-element is out of the range of the elastic container

Nowrap (default) does not wrap when overflow occurs
Wrap automatically when wrap overflows
When wrap-reverse overflow occurs, it will automatically wrap and flip the lines.

Flex-flow

Syntax
Flex-flow: [flex-direction] | [flex-wrap]
Description
Attributes (flex-direction and flex-wrap)

Justify-content

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

Flex-start (default) the spindle starts to be aligned. The spindle is horizontal and left aligned in the ltr environment.
Flex-end spindle end alignment, spindle is horizontal axis, ltr environment, right alignment
Center alignment
The first and last edges of space-between are aligned with the edges of the elastic container, and the rest are evenly distributed.
Space-around All evenly distributed

Align-items

Syntax
Align-items: flex-start | flex-end | center | baseline | stretch
Description
Set alignment on the side axis of the elastic child element
The flex-start side axis starts to be aligned. The main axis is a horizontal axis and the top is aligned.
Flex-end side axis end alignment
Center alignment
Baseline alignment
Stretch (default) covers the entire side axis from the side axis to the end of the side axis

Align-content

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

The flex-start spindle starts alignment, and the spindle is a horizontal axis. In the ltr environment, the spindle is left alignment.
Flex-end spindle end alignment, spindle is horizontal axis, ltr environment, right alignment
Center alignment
The first and last edges of space-between are aligned with the edges of the elastic container, and the rest are evenly distributed.
Space-around All evenly distributed
Stretch (default) stretch each row to occupy the remaining space. If the remaining space is negative, this value is equivalent to flex-start.

Elastic sub-element attribute order

Syntax
Order:
Description
Set the order of the elastic sub-elements. The values are smaller than the first and can be negative values.

Flex-grow

Syntax
Flex-grow:
Description
Set the scaling ratio of the elastic child element. 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

Flex-shrink

Syntax
Flex-shrink:
Description
Set the shrinkage ratio of the elastic child element. The value cannot be negative. The default value is 1.
Scale down space based on the scaling factor set by the elastic box element

Flex-basis

Syntax
Flex-basis: | auto
Description
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 ).

Flex

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

Align-self

Syntax
Align-self: auto | flex-start | flex-end | center | baseline | stretch
Description
Sets the align-item align on the side axis.
Sets the independent alignment of an Elastic sub-element.

Flexbox title bar

As the size decreases, all titles are first followed by one line, two titles occupy one line, and one title occupies one line.
Html code

• html
• java
• android
• ios
• ruby
• js

Css code

. Menu {list-style-type: none; margin: 0; padding: 0;/* implement elastic Layout */display: flex; /* set the spindle to line and wrap automatically */flex-flow: row wrap ;}. menu li {height: 40px; text-align: center; line-height: 40px;/* set the scale-out ratio of the auto sub-element 1 scaling ratio 1 initial length 100% */flex: 1 100% ;}. menu li: nth-child (1) {background-color: #39ADD1 ;}. menu li: nth-child (2) {background-color: # 3079ab ;}. menu li: nth-child (3) {background-color: #982551 ;}. menu li: nth-child (4) {background-color: # e15258 ;}. menu li: nth-child (5) {background-color: # cc6699 ;}. menu li: nth-child (6) {background-color: #52ac43 ;}. menu li a {color: black; text-decoration: none;}/* When the size is greater than 480 and less than 768, set the length of the elastic sub-element to 50% */@ media (min-width: 480px ){. menu li {flex: 1 1 50%; }}/ * When the size is greater than 768, set do not wrap */@ media (min-width: 768px ){. menu {flex-flow: row nowrap ;}}

Multi-column, multi-column attribute column-width

Syntax
Column-width: | auto
Description
Set the column width

Auto (default) customizes width based on column-count
Use the length value to define the column width. Negative value not allowed

Column-count

Syntax
Column-count: | meaning
Set the number of Columns

Auto (default) customizes width based on column-count
Use an integer to define the number of columns. Negative value not allowed

Columns

Syntax
Columns: [column-width] | [column-count]
Composite attribute to set the column width and number

Column-gap

Syntax
Column-gap: | normal
Set the gap between columns and columns

Normal (default) is the same as font-size.
Assume that the font-size of this object is 16px, the normal value is 16px, and so on.
The length value is used to define the gap between columns and columns.
Negative value not allowed

Column-rule

Syntax
Column-rule: [column-rule-width] | [column-rule-style] | [column-rule-color]
Set the border between columns, class border.

[Column-rule-width] sets the Border thickness between columns.
[Column-rule-style] set the border style between columns
Column-rule-color: Set the border color between columns

Column-fill

Syntax
Column-fill: auto | balance
Set whether the heights of all columns are uniform

Auto (default) column height self-adaptive content
The height of all balance columns is the highest among them.

Column-span

Syntax
Column-span: none | all
Whether the object element spans all columns

None (default) does not span Columns
All spans all columns

Waterfall stream

It's just a simple waterfall stream. js implementation is different in the past, but it's much simpler than js. here we need to pay attention to browser compatibility issues and add a prefix.

Waterfall effect

<! DOCTYPE html> 
*{    margin: 0;    padding:0;}h1{    width: 100%;    height: 50px;    margin: 0;    padding:0;    text-align: center;    line-height: 50px;    border: 2px solid;    border-bottom-color: aqua ;}.picC{    width: 90%;    margin: 50px auto;    -webkit-column-count: 5;    -webkit-column-gap: 20px;    list-style-type: none;}.picC li{    margin: 10px 10px;}