New properties in css3: summary of css3 multi-column layout properties (with examples)

The multi-column layout attribute has been added to css3. What is multi-column layout? The so-called multi-column layout is to create multiple columns to lay out text, similar to the layout of a newspaper. So, in this article we will take a look at some related properties and code examples in multi-column layout.

CSS3 multi-column layout container properties:

column-width: auto | :Define a minimum width for the column (min-width).

auto: Column width is determined by other elements.

length: Explicitly set the minimum width.

column-count: auto | : Define the number of columns.

auto: The element has only one column. It's like there is no setting.

: Positive integer value. The value is an integer greater than 0, and negative values ​​are invalid.

columns: || : is the abbreviation of column-width and column-count. Any order.

Column width = (parent element width - (number of columns-1) column gap) / number of columns*
For example: the parent element is 40em, divided into 4 columns, and the column gap is 2em. Then the column width is (40 - (4-1) * 2) / 4 = 8.5em.
If the explicitly set column width is smaller than this width, it will be displayed with this width.
If the explicitly set column width is larger than this width, it will rearrange the column width and number of columns according to the appropriate size. The currently set column widths and number of columns are not accurate.

column-gap: normal | : Define column spacing. If the value is too large, the layout will be broken.

normal: Default value, parsed by the browser, usually lem.
: A length value consisting of a floating point number and a unit identifier. Such as: 2.1em.

column-rule: | | : Define column borders.

Its centerline is always the same as the centerline of the column spacing. In other words, it is always in the middle of two columns. Similar to border. If the column border is larger than the column spacing, it will not disappear automatically. The portion of the column border that extends beyond the column spacing appears to sink beneath the text (background effect).

column-fill: auto | balance: Define whether the height of each column in multiple columns is uniform.

This attribute is very strange. And it's not uniform across browsers. It has two values: auto | balance. exist The test results in ie10/ie11/opera40/chrome52 are all the same, and it is found that there is no difference between these two properties. When tested in Firefox 49, there is a difference between these two properties. Balance means that the height of each column is almost the same (alignment), and auto automatically merges them into one column, no matter how many columns you set.

css3 multi-column layout item (element) attributes:

column-span: none | all: Define how many columns an element spans.

If we often put the title across all columns. Then, column-span: all. The default value is column-span: none; indicating no spanning of columns.

css3 multi-column layout code:

     nbsp;html>
    
    
        <meta>
        <meta>
        <meta>
        <title>多列布局｜column-span</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper {  
            width: 40em;
            margin:0 auto;
            border: 1px solid #ccc;
            /*多列布局*/
            -moz-column-count: 4;
            -webkit-column-count: 4;
            column-count: 4;
            -moz-column-gap: 2em;
            -webkit-column-gap: 2em;
            column-gap: 2em;
            -moz-column-rule: .1em dashed #ccc;
            -webkit-column-rule: .1em dashed #ccc;
            column-rule: .1em dashed #ccc;
            -webkig-column-fill: balance;
            -moz-column-fill: balance;
            column-fill: balance;
        }
        h1 {
            font-size: 1.5em;
            margin-bottom: 1em;
            -moz-column-span: all;
            -webkit-column-span: all;
            column-span: all;
            padding-bottom: 5px;
            text-align: center;
            border-bottom: 2px solid #ccc;
        }
        p {
            margin-bottom: 1em;
            text-indent: 2em;
            line-height: 1.625;
            font-size: .7em;
        }
    </style>


    <div>
        <h1 id="为什么您宁愿吃生活的苦-也不愿吃学习的苦">为什么您宁愿吃生活的苦，也不愿吃学习的苦？</h1>
      <h3 id="一-为什么大多数人宁愿吃生活的苦-也不愿吃学习的苦">一. 为什么大多数人宁愿吃生活的苦，也不愿吃学习的苦？</h3>
        <p>记得小时候上学，学校每次放月假，爷爷就去车站接我回家。
那时家里离车站远，需要骑着车子来回。
一路上我们彼此相对无语，等到爷爷骑不动了，我们就这么一前一后推着车子走着，记得爷爷常常和我说：
“吃得苦中苦，方为人上人，你日后要好生读书。”
那时的我未解其意，只是默默记在心里，望着不远处稻田里的乡亲们弯腰割麦俯首插秧，我觉着他们太辛苦了。
几年过去了，我考入了省城上大学，学了这个城市最热门也最富前景的工程造价专业。
后来，我走进实习单位， 工地的环境有多么糟糕自不必多说，晴天尘土飞扬骄阳似火，雨天泥泞不堪污水四溢。
物质世界的贫瘠尚可以忍受，然而精神世界的荒芜会随着时间慢慢消磨你的梦想和纯真。
后来，我选择去了深圳，在那里我终于找到了自己热爱的行业，眼前陌生的一切都让我感到兴奋和欢愉。
人工智能、自动驾驶、虚拟现实、风投、天使轮这些名词让我看到了世界的另一面。
越是不断地拓宽知识面，越是觉得自己知识储备量的贫瘠与荒凉。</p>
        <h3 id="二-生活的痛苦使人麻痹-学习的痛苦让人清醒-过去不按思维而生活-终将有一天要按照生活而思维">二. 生活的痛苦使人麻痹，学习的痛苦让人清醒 ；过去不按思维而生活，终将有一天要按照生活而思维</h3>
        <p>痛苦之所以不被人喜欢，大多数是因为人们从不会思考自己为何痛苦。
然而，这世上还有另一种痛苦是，对这个世界产生了失望的情绪，然后把自己对这个世界的失望，当作是自己本该如此，甚至误以为这就是吃苦的好处。
我总觉得苦难的意义，在于我们更好地去思考人生为何如此苦难，就像有人曾说：未经省察的人生，从不值得一过。
如果没有经过思索和自省，苦难终究只是苦难而已，没有任何意义。
有些人，年轻时总觉得学不学习无关紧要，反正自己体力好得很，只要自己身体好就能混口饭吃。
他们终将会明白，那些为了讨生活不得已而吃的苦，就是当年不吃学习苦的代价。
学习的苦，是枯燥的苦，是短期没有回报的苦，这种苦看得见，摸得着，谁都不愿吃。
生活的苦，是绝望的苦，是长期没有出路的苦，这种苦看不见，摸不着，谁都不想吃。
我从不喜欢自讨苦吃，如果我能通过学习和自我提升避免遇见这些痛苦的经历，我有什么理由不去学习？
生活其实并不苦，苦的是那个不知苦也不知如何避免吃苦的人生。
学习其实并不苦，苦的是早已被生活消磨掉的好奇心和敢于对未来报有期望的勇气。</p>
    </div>

Running effect:

Recommended related articles:

css3-columns multi-column layout_html/css_WEB-ITnose

##A brief discussion on the new features of CSS3 multi-column layout module

CSS3 Columns is a useful columnar layout

The above is the detailed content of New properties in css3: summary of css3 multi-column layout properties (with examples). For more information, please follow other related articles on the PHP Chinese website!