This is the 15th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The columns property

We can use the columns attribute to create a column layout. The columns attribute is short for the column-width and column-count attributes. There are several ways to write columns:

columns: auto;
columns: auto auto;
columns: auto 4rem;
Copy the code

Column-width specifies the best width for each column or column, and does not support percentages.

Column-count indicates the number of columns. If column-width and column-count exist at the same time, you need to convert them to column-count. The smaller value is used.

The column-gap attribute represents the size of the blank space between each column. It can be a percentage value or a length value. Column-gap is a sub-attribute of the gap attribute, and the gap attribute is actually the abbreviation of column-gap and row-gap attributes.

The column-rule attribute is short for column-rule-width, column-rule-style, and column-rule-color. The column-rule attribute and border attribute have the same syntax and rules.

Column-span applies to the children of a column layout, similar to colspan to indicate whether content is displayed across multiple columns. The default is None, which means no columns, and all, which means all vertical columns.

Column-fill balances the contents of each column when the content is divided into columns. Three values, auto, are received to fill each column in order, and the content takes up only as much space as it needs. Balance is the default value for balancing content between columns. Balance-all indicates balancing content between columns as much as possible, which is not supported by browsers. When auto, the container is required to have a fixed height for accurate rendering.

The break-inside attribute defines the appearance of an element when a break occurs in page printing, column layout, or Regions layout, and can be ignored if no break occurs. More values are received. Auto indicates that the element can be interrupted. Avoid indicates that the element cannot be interrupted. We use avoid if we want each list element to be independent and open one after the other.

Box-decoration-break can be used to break text into columns, giving each column a separate, complete border. The default value is slice, which means that each element is cut as if it were cut. Clone means that the styles of the disconnected elements are rendered independently.

.wrapper {
    width: 334px;
    columns: 3
}
.wrapper p {
    border: 1px solid #ccc;
    box-decoration-break: clone;
}
Copy the code

In elastic layout, we can use display: block for block layout, display: inline for inline layout, and display: inline-table for table layout. Position: Absolute; We might also use float and display: flex or display: inline-flex; Flex has many properties, such as flex-direction, which controls the overall layout of flex items from left to right or from right to left. Flex-wrap is used to control whether flex children are displayed on a single line or on a newline. Flex-flow is short for flex-direction and flex-wrap.