CSS3 attribute column know how much

CSS3 can design a multi-column layout like a newspaper with text content. Like this:

Such layouts are called "Multi-column layouts."

Learn more about multi-column properties:

For all properties of column, ie10+ support, Firefox does not support Column-span. All browsers do not support the Column-fill property except Firefox.

1. Column-count: Number of columns to split

< Div >     Remember the previous youth, we sincerely sincere, say a sentence is a sentence; early morning on the railway station, Long Street dark no pedestrian, selling soy milk shop braved the heat, the former day color becomes slow, the car, horse, mail are slow, life only enough to love a person, the former lock is also good, the key is beautiful, you lock the people understand  </div>

{    -moz-column-count: 3;          column-count: 3;}

By testing, Firefox (version 49.0.1) need to add-moz-prefix, Chrome,opera,safari, do not need to add-webkit-prefix can also be displayed normally, Ie10+,edge do not need to add a prefix to display properly. When the page is zoomed out (not shrinking due to the lack of text count, only two columns are displayed) The effect is displayed:

2. Column-gap: Gap between columns and columns

The default is 16px under IE, other browsers are not explicitly given.

< Div > When I was     young, I dreamed of changing the world, and when I was mature, I found that I could not change the world, I looked shorter, decided to change only my country; When I came into my twilight years, I found that I could not change our country, my last wish was only to change my family, However, this is not possible. When I was lying in bed, dying, I suddenly realized: if at first I just changed myself, then I could change my family, and with the help and encouragement of my family, I might do something for my country; and who knows? I may even change the world.  </div>

{    -moz-column-count: 4;          column-count: 4;     -moz-column-gap: 40px;          column-gap: 40px;         }

3. Column-rule-width: Border width between columns and columns

4. Column-rule-style: Border style between columns and columns

5. Column-rule-color: Border color between columns and columns

The above three attributes can be abbreviated to Column-rule. As with border, the width and color of these three attributes can be omitted or omitted, and the browser uses the default width and color, but the style cannot be omitted. do the testing in Google Chrome:

(1). Omit width (chrome defaults to 3px, other browsers are not explicitly given)

 <  div  >   </ div  >  

{    -moz-column-count: 4;          column-count: 4;     -moz-column-gap: 40px;          column-gap: 40px;     -moz-column-rule-style: solid;          column-rule-style: solid;     -moz-column-rule-color: #f00;          column-rule-color: #f00;}

(2). Omit color (default is RBG (0,0,0))

{    -moz-column-count: 4;          column-count: 4;     -moz-column-gap: 40px;          column-gap: 40px;     -moz-column-rule-width: 2px;          column-rule-width: 2px;     -moz-column-rule-style: solid;          column-rule-style: solid;}

(3). Width and color are omitted

{    -moz-column-count: 4;          column-count: 4;     -moz-column-gap: 40px;          column-gap: 40px;     -moz-column-rule-style: dotted;          column-rule-style: dotted;}

6. Column-span: Number of elements across columns (Firefox not supported)

The available values are 1 and all, and the default value is 1. Firefox does not support this property, but when this property value is used, the effect and column-span:1 are changed; , so that column-span:1 can be used with confidence; The use of Column-span:all is not recommended;

 <  div     >  <  h2  >  on emotional issues, a lot of people are fools </ H2  >   </ div  >  

{    -moz-column-count: 4;          column-count: 4;}  {    -moz-column-span: 1;          Column-span: 1;}

Unlike other properties, Column-span is used on child elements to indicate how many columns are spanned, as if the Col-span property is in the table. Because the value is 1 instead of all, the Firefox browser displays the same effect as any other browser.

7. Column-width: Width of column

< Div > I used to think: "Friends have a lot, can become friends, must be in life habits, hobbies, temper, temperament, pursuit, the view of things, work style and so on one thing or many similarities, how rare." Can meet their own whenever quiet down to think of people, whenever they have free time can not wait to know the people to meet and not to beg. Can meet in the crowd and willing to take the time to go into a person's heart such people, but also should strive to fight. A friend loses one, you still have a lot, but you lose the person that likes, is your bigger than! "</div>

{    -moz-column-count: 4;          column-count: 4;     -moz-column-width: 200px;          column-width: 200px;    }

This property requires more than one: the product of the number of columns and the width (column-count * column-width) should be less than the width of the page in order to show the desired four column effect. When the number of text is relatively small, the page is relatively wide, it will not show four columns, perhaps only three columns or less.

8. Column-fill: How to populate columns

This property is currently only supported by Firefox, fill is translated to fill, so Column-fill is the way to specify the padding column. There are two values available, balance, the column length is balanced, and the browser should minimize the length of the column being changed. Auto, column order fills, they will have different lengths.

9. Columns: Specify the width and number of columns

This is a write property that is Column-width and Column-count and co-writable.

< Div > Then he quietly left in the "I" Life, "I" often sad to think of this summer morning platform on the scene, "I" in his 21-year-old suddenly broke into his life, and completely packed his life, he should have been a bit of happiness is not crowded in. When he hardships the "I" to raise the adult, "I" unconsciously abandoned him on the platform. The love of the world like a cup of coffee, through adoption to establish the affection is a cup of bitter coffee, the person who intends to drink coffee, he knows there is better coffee waiting for him, later this cup of coffee more and more bitter. But I believe that the people who drink coffee will come back eventually. </ Div >

{    -moz-columns: 150px 4;          columns: 150px 4;    }

This write property does not all satisfy the width and count. for this example We leave aside the spacing between each column, assuming that the spacing between each column is 0. Then when the width of the text is not less than 600px, the text will always display 4 columns (at least do want to display 4 columns, if the text is enough to display 4 columns), you can not be satisfied with the width is also 150px; when the width of the text is less than 600px, the text is displayed as 3 columns when the text width is less than 30 At 0px, the text is displayed as 2 columns.

In this case, the number of columns displayed is different for the available width of the element.

Display as 4 columns:

Display as 3 columns:

Display as 2 columns:

Display as 1 columns:

Summary: Then this write-down attribute can be understood as (or if the spacing between each column is 0): When the element is available in a very small width, it displays only 1 columns, and when the available width of the element is not less than count * 2 It displays 2 columns, and when the available width of the element is not less than count * 3 o'clock, As an analogy, the width column is displayed to the element when the available widths are not less than the count * width.

Some speculations:

In the case where the available width of the element is determined, how can the page be laid out when both the Column-width is set and the Column-count and Coiumn-gap are set?

After testing, the following conclusions can be reached:

1. The 9th summary is still valid here;

2. Column-gap spacing can always be satisfied when the width of the element can be set in two columns or more (no spacing in one column).

CSS3 attribute column know how much