Record the relationship between Column-count,column-width and Column-gap

1.column-count: Specifies the number of columns that the element should be delimited.
The property setting element should be separated into several columns, the default value is auto, you can change the number of columns by setting the numbers value, code:
. demo{   width:500px;   border:1px solid #000;   Column-count:3;   -webkit-column-count:3; }

The function of this property is to let the content within the element be displayed in such proportions.Note: The inline element does not work. 

2.column-width: Specifies the width of the column.
This property sets the width of the inner column of the element, the default value is auto, and you can change the width of the column by setting the length value, code:
 . demo{width:500px;   border:1px solid #000;   column-width:200px; -webkit-column-width:200px;}
HTML code:            <div class= "Demo" >This is a test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text!    This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text!    This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text!    This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! This is a Test text! </div>

：

The text is divided evenly into two columns, but the width of the container element is: 500px; the width of the obvious column is not equal to the 200px set by Column-width;
Its principle: When the column width is set by the column-width, the internal break-down rule: according to the container width can accommodate the maximum number of fixed column width of the column adaptive columns (note that the column spacing is counted, the minimum column spacing value and
Font size). As in the above example, a container with width 500px can hold up to two columns when the column width is set to 200px. When you set the column width to 150px, the adaptive is divided into three columns, and so on. When the width of the column is greater than the container
The display is the same as when no columns are set.3.column-gap: Specifies the interval between columns.
This property sets the distance between columns, similar to the margin property, and the default is normal, and you can change the interval between columns by setting the length value, code:
 . demo{width:500px;    border:1px solid #000;    -webkit-column-count:3;    Column-count:3;    -webkit-column-gap:60px; column-gap:60px;}
:

The text interval divided into three columns becomes 60px; continue to increase the interval, set column-gap:200px, such as:

Because the height of the container is stretched, the above is only part. We found that the text was crowded into columns only two columns to show, when continue to increase the value of COLUMN-GAP, will squeeze the text outside the container, which is set by the column
The situation of-count and Column-gap.
Important: When both Column-count and Column-gap are set, because the Column-width is not set, the value is auto, so when the column-gap is enlarged, only the column width can be compressed, and when it can no longer be squeezed, the text
The Overflow:hidden is squeezed out of the container and is not visible, and the effect and the container are set to the same.  4. When the Column-count,column-width is set at the same time, column-gap how they interact with each other. Code :
 . demo{width:500px;    border:1px solid #000;    -webkit-column-count:3;    Column-count:3;    -webkit-column-width:100px;    column-width:100px;    -webkit-column-gap:60px; column-gap:60px;}
：
Three columns of text, fixed spacing between columns of 60px, two spacing 60px*2=120px; The column width equals (500-120)/3 is approximately equal to 127px, which is larger than the column-width:100px set in the style, so the column width is from
The dynamic stretch adapts to the three-column layout. Increasing the spacing between columns, when column spacing plus columns are larger than the width of the container, because column widths set specific values and are not squeezed and smaller, and the text changes from the original three columns to two columns, the code:
. demo{width:500px;    border:1px solid #000;    -webkit-column-count:3;    Column-count:3;    -webkit-column-width:100px;    column-width:100px;    -webkit-column-gap:120px; column-gap:120px;}
:

After becoming two columns, and then continue to increase the column spacing, when the column spacing is greater than 300px, that is even 301px; because the column width is set to a specific value, and is not squeezed smaller, so the two column widths 100*2+ column spacing > 500; Text changes
With a column, just as in the case of not setting the columns. After that, the value of the column spacing is increased, and the text is no longer changed.
Summary: Setting the column width value is equivalent to setting the Minimum column width, the three values are set, when the space is sufficient, the column width will automatically increase to fit the layout, when the space is not enough, Column-count first failure; Column-co
UNT after the failure of space is not enough column-gap failure, from beginning to finish, the column width set a fixed value, no matter how to squeeze, the column width will not be less than this fixed value.

Record the relationship between Column-count,column-width and Column-gap