1. Preface & Index
Multiple-column layout, also known as multi-column layout, multi-column layout, I like to call it column layout, this layout can talk about content layout into a set of column boxes, similar to the typesetting in newspapers.
The column layout is very special, different from the traditional layout method, it splits all content including all sub-elements into columns, which is similar to the way the page content is divided into different pages when we print a web page.
Column layout IE10+ can be used, API is stable, mobile compatibility is better than flex layout, although the original design is different, many layouts can be realized. Even in some scenarios, it can only be achieved by using column layout. It is necessary to learn.
CSS properties related to column layout include:
| Directly related attributes | Indirectly related attributes |
|---|---|
Second, directly related to CSS properties
1. column-width
column-widthIndicates the optimal width of each column/row.
If we only set it column-width, the browser will automatically divide the number of columns according to the width of the existing container.
The syntax is as follows:
column-width: <length> | auto;
among them:
<length>
Indicates the optimal column width value set. The actual width of each column may be different from the specified value. For details, see the detailed description below.
auto
Defaults. Indicates that the width of each column is determined by other CSS properties, for example column-count.
Some details:
column-widthSometimes it will be invalid. For example, the width of the container is 400 pixels, and the width of each column is set to 300 pixels, which is not enough to divide the column. At this time, the content filling is shown as making full use of the available space, and the final column width is wider than the setting. For another example, if the width of the container is 400 pixels and iscolumn-widthset to 500 pixels, the final column width will not exceed the width of the container, which is smaller than the set 500 pixels.column-widthNegative values and percentage values are not supported.
Field demonstration:
Click on the following tabs to experience column-widththe layout performance under different attribute values:
column-width:autocolumn-width:8%（无效）column-width:80pxcolumn-width:8em
The CSS column-widthproperty specifies the ideal column width in a multi-column layout. The container will have as many columns as possible, and the width of any column is not less than the column width value. If the width of the container is smaller than the specified value, the width of a single column will be smaller than the declared column width.
This property can help you create responsive designs that fit different screen sizes. Especially in the presence of column-countattributes (with priority), all relevant length values must be specified to obtain precise column widths. In horizontal text, the length of these values include width, column-width, column-gap, and column-rule-width.
2. column-count
column-countIndicates the ideal number of columns.
The syntax is as follows:
column-count: <integer> | auto;
among them:
<integer>
Indicates the number of columns, an integer value.
auto
Defaults. Indicates that the number of columns is determined by other CSS properties, for example column-width.
Some details:
column-countAndcolumn-widthare likely to have a higher priority, it depends on the specific scene. The trick to priority calculation is to unify the conversioncolumn-countvalue and use whichever is smaller.column-countNegative values are not supported, nor are they supported0.
Field demonstration:
Click on the following tabs to experience column-countthe layout performance under different attribute values:
column-count:autocolumn-count:2column-count:2;
column-width:200pxcolumn-count:4;
column-width:200px
It is recommended to test the switching effect of this tab on the PC browser. On the mobile terminal, the difference between the latter two options cannot be felt due to the width limitation.
In the desktop PC, the container 700 pixel width of about a little early, this time column-width:200pxin terms of column-countthe way about 3.6. Therefore, tab 3 is divided into 2 columns because the column-count:2value is smaller; and tab 4 has a higher priority due to the column-widthsmaller conversion value, column-widthand is finally divided into 3 columns for display.
Among them, we focus on tab 3 and tab 4. In the PC operator, since the width of the container is about 700 pixels early point, and therefore column-width:200pxit can be regarded approximately column-countas it was 3.6. Remember the priority calculation trick mentioned above: which value is smaller and which priority is higher. Therefore, tab 3 is divided into 2 columns because the column-count:2value is smaller; and tab 4 has a higher priority due to the column-widthsmaller conversion value, column-widthand is finally divided into 3 columns for display.
In addition, it can be seen from the effect of the two columns that the height of each column of the columns is not always the same, and the division of content is not always even. The browser has its own set of algorithms.
3. columns
columnsIt is an abbreviation for column-widthand column-countattribute. Give a few examples of usage:
/* Column width*/ columns: 18em; /* Number of columns */ columns: auto; columns: 2; /* Define width and number at the same time*/ columns: 2 auto; columns: auto 12em; columns: auto auto;
Does not expand.
4. column-rule-color
column-rule-colorIndicates the color of the dividing line in each column.
The syntax is as follows:
column-rule-color: <color>
The supported attribute values border-colorare exactly the same, for example:
column-rule-color: red; column-rule-color: rgb(255, 0, 0); column-rule-color: transparent; column-rule-color: hsla(0, 100%, 50%, 0.5);
The default value is colorthe calculated value of the current attribute.
Examples are as follows:
column-rule-style: dotted; column-rule-color: red;
The real-time effects are as follows:
Since the column-ruledefault divider type is none, therefore, we must specify it column-rule-style, otherwise the divider will not be seen. column-rule-*The relevant attribute values border-*are the same.
5. column-rule-style
column-rule-styleIndicates the type of dividing line in the middle of each column. The supported attribute values border-styleare exactly the same, for example:
column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset;
The specific effects of each attribute value can be experienced by clicking the following tabs:
nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
Among them are dotteddotted dots, dasheddotted lines, and solidsolid lines. These three are more commonly used, so I won't expand them. Then focus on the next few. First double, it doublemeans the
double-line border. As the name suggests , there are two lines, and they are solid lines. Although we usually use less, the compatibility is very good. The visual performance is wireframe-transparent-wireframe. Other column-rule-styletypes, such as inset(concave), outset(convex), groove(groove), ridge(ridge), are old-fashioned and have terrible compatibility. Therefore, there is no practical value, so you don't need to care.
Scientific research shows that for most people, no matter what text is written here, it will not be noticed by readers.
5. column-rule-width
column-rule-widthIndicates the width of the dividing line in the middle of each column. The supported attribute values border-widthare exactly the same, for example:
/* Keyword value*/ column-rule-width: thin; column-rule-width: medium; /* Default value*/ column-rule-width: thick; /* Specific length value*/ column-rule-width: 1px; column-rule-width: 2.5em;
We usually use column-rule-widthalmost all fixed values, for example column-rule-width:1px, and so on, so we don't know much about keyword attribute values. Here is an introduction. column-rule-widthSupports three keyword attribute values, respectively thin, medium(default value) and thick, the corresponding specific sizes are as follows:
thin: Thin, equivalent to1px;medium(Default value): The thickness is uniform, equivalent to3px;thick: Thick, equivalent to5px;
I wonder if you have ever thought about such a question: why the default width size mediumis 3px, obviously thin (1px) width is more commonly used? This is because... column-rule-style:doubleat least 3px is effective!
6. column-rule
column-ruleYes column-rule-width, column-rule-styleand column-rule-colorthe abbreviation of these 3 CSS properties. As borderis border-style, the abbreviation for border-widthand is border-colorthe same.
There is nothing else to say, the order of several attribute values is not particular, just casual. Except column-rule-stylethat the other two attributes can be defaulted.
7. column-span
column-spanA bit similar to colspanthis HTML attribute in the table layout , indicating whether a certain content is displayed across multiple columns.
grammar
column-span: none; column-span: all;
among them:
none
Means not to span multiple columns, the default value.
all
Means across all vertical columns.
Let's take a look at an example together to know why this attribute is used:
column-span:nonecolumn-span:all
In HTML, similar cell <td>elements can set colspanattributes to indicate merged cells, for example, colspan="3"indicate that 3 ordinary cells are merged into 1 large cell.
column-spanThis CSS property works similarly, except that a specific number cannot be specified. Either do not span the columns, but span all the columns.
This attribute can be used when we want to insert an ad across the entire page in an article displayed in vertical columns. Or you can use this attribute if you just want to display it in vertical columns.
In actual development, if you do not specify a certain element column-span:all, there is no text content, just a height, or add a horizontal border, you can further divide the content of the article up and down. Therefore, the content of an article is like the layout of a newspaper, and you can divide it into columns wherever you want.
Of course, this attribute can also be used to insert banner ads.
8. column-fill
column-fillThe function is how to balance the content filled in each column when the content is divided into columns.
grammar
column-fill: auto; column-fill: balance; column-fill: balance-all;
among them:
auto
Fill each column in order. The content only takes up the space it needs.
balance
Defaults. Try to balance content between columns as much as possible. In the context of separation, only the last segment is balanced. For example, if there are multiple <p>elements, and the last one just <p>wraps, <p>the content of this element is divided equally to maintain balance. This will result in less content in the last column.
balance-all (can be ignored)
Try to balance content between columns as much as possible. In the context of separation, all fragments are balanced.
Let's take a look at a column-filldemo related to attributes (currently only the Firefox browser has the correct performance):
column-fill:autocolumn-fill:balancecolumn-fill:balance-all
This is a bunch of text columns divided into multiple. The CSS `column-fill` property is used to evenly distribute the content together in all columns.
column-fillThe accurate rendering of this attribute can only be seen in the Firefox browser. When we click auto, all the text content should be squeezed in the leftmost column to be correct. But Chrome and IE balancebehave the same as the attribute value.
When we click on 'auto'this tab in the above demo , the correct performance should be as shown in the figure below:
To column-fill:autohave the effect under all browsers , you need to set a fixed height value for the container element.
Also, according to my tests under IE, Chrome and Firefox browsers, the clicks of these browsers are balance-allnot recognized. I checked the official draft document, and there was no balance-allindication that this attribute value can be ignored.
9. column-gap
column-gapIndicates the size of the blank gap between each column.
grammar
column-gap: normal | <length-percentage>;
specific
/* Keyword value*/ column-gap: normal; /* Length value*/ column-gap: 3px; column-gap: 3em; /* Percentage value*/ column-gap: 3%;
among them:
normal
Defaults. In multi-column layouts 1em, in other types of layouts 0.
<length>
The specific length value. Negative numbers are not supported.
<percentage>
Percentage value. And column-widthunlike, column-gapsupport percentage values. Likewise, it cannot be a negative number.
Field demo
column-gap:normalcolumn-gap:8%column-gap:80pxcolumn-gap:8em
Although the final performance column-gapof the default value of the attribute normalis 1em, it does not mean that it can have a transitiontransition effect with the numerical attribute value . Therefore, when we click to the first tab, the width change is sudden, rather than continuous.
column-gapWhen columnsthere is a conflict with the attribute, for example, it is column-gaptoo large, resulting in insufficient space. In this case, column-gapit will be discarded.
Three, indirectly related CSS properties
Each possible breakpoint (in other words, each element boundary) is affected by three properties: the break-aftervalue of the previous element, the value of the next element break-before, and the value of the containing element break-inside.
The three attributes to be introduced below can control whether the current element in the column layout is allowed to be divided into columns.
1. break-after
break-afterThis CSS property defines how the page, column or area break should behave after the generated box. If no box is generated, this attribute is ignored.
break-afterThere are many attributes supported, but most browsers do not. We only need to pay attention to the following two attribute values at present:
break-after: auto; break-after: avoid;
among them:
auto
It is allowed but not mandatory to insert any breaks after the main frame (under page, column or region layout).
avoid
Avoid inserting any separators (under page, column or region layout) after the main frame.
2. break-before
break-beforeThis CSS property defines how the page, column or area break should behave before the generated box. If no box is generated, this attribute is ignored.
break-beforeThere are many attributes supported, but most browsers do not. We only need to pay attention to the following two attribute values at present:
break-before: auto; break-before: avoid;
among them:
auto
It is allowed but not mandatory to insert any interrupt before the main frame (under page, column or region layout).
avoid
Avoid inserting any separator before the main frame (under page, column or region layout).
3. break-inside
break-insideThis CSS property defines how an element should behave when a page, column, or area is interrupted. If there is no interruption, this attribute is ignored.
break-insideThere are relatively few supported attributes. Similarly, we only need to pay attention to the following two attribute values at present:
break-inside: auto; break-inside: avoid;
among them:
auto
Elements can be interrupted.
avoid
The element cannot be interrupted.
demo example page
Take the column layout as an example. The column layout does a good job of flowing and balancing content. Unfortunately, not all elements can flow gracefully. Sometimes the elements will be distributed in two columns. As shown below:
Sometimes, we hope that each element of our entry is independent, and it is not disconnected. At this time, we can use the break-inside:avoidimplementation:
.list {
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+, Chrome, Safari, Opera */
}
At this time, the effect is as follows:
You can click here: CSS break-inside demo
other
It should be last month, I also introduced a box-decoration-breakCSS property called a CSS property, which is also related to the layout of the columns. Its role is more for the decorative performance after the element is disconnected. If you are interested, please refer to this article: " Introduction to CSS/CSS3 box-decoration-break property ".
Four, some special layout application examples
The CSS3 columns multi-column layout can realize the horizontal flipping reading effect.
For details, see this article: " Based on CSS3 column multi-column layout to achieve horizontal page turning interaction ".
The CSS3 columns multi-column layout can also be used to achieve equal division navigation effects, support single and multi-line, similar to the effect of flex layout, but the compatibility is better than flex. The length of this article is already very long, and I will write an article about relevant content later.
Other articles on similar topics
All who can read this is true love, thank you, love!