❮上一节 display属性的两层含义下一节外部显示类型display-ouside❯

7.2 内部显示类型display-inside

display-inside可选值包括5个：flow、flow-root、flex、table、grid。本章仅介绍它们的简单使用，帮助理解display模型，因为每个可选选值又代表一个模型，后续具体介绍。

7.2.1 flow

流式布局模型是CSS模型体系的枢纽，是运用最广泛的布局。flow表示流式布局（Flow Layout），flow-root与flow相似，下章介绍两者区别。多个盒子在一个页面进行排列时，默认从左往右从上往下的自动排列它们的位置，即流式布局。第8~10章也将围绕流式布局进行讲解。

flow布局简单示意图

简单的流式布局内部包含inline元素或者block元素。绿色表示块block元素，例如div；桔色表示行内inline元素，例如span。

示例代码

<body style="display: block flow">
  <div style="display: block flow">       <!-- div1 -->
     <span style="display: inline flow">  <!-- span1 -->
        元素1 小步教程
     </span>
     <span style="display: inline flow">  <!-- span2 -->
        元素2 xiaobuteach.com
     </span>            
  </div>
  <div style="display: block flow;">第2行</div> <!-- div2 -->
</body>

上述代码各display值完全可以省略，标签默认值或属性初始值与编码值。由此可见，平时编码不知不觉大量使用了流式布局。body元素display-inside值flow，表示两个子元素div1、div2按流式布局在body内显示，div1元素display-inside值flow，表示两个子元素span1、span按流式布局在div1内显示。

运行效果

7.2.2 table

table布局主要用于多行多列的结构展示数据。

table布局示意图

table布局通常包含table、thead、tr、th、tbody、td标签。

<body>
    <table style="display: block table;">
        <thead style="display: table-header-group;">
            <tr style="display: table-row;">
                <th style="display: table-cell;">编号</th>
                <th style="display: table-cell;">姓名</th>
                <th style="display: table-cell;">个人主页</th>
            </tr>
        </thead>
        <tbody style="display: table-row-group;">
            <tr>
                <td style="display: table-cell;">1</td>
                <td>小步</td>
                <td>xiaobuteach.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>大步</td>
                <td>xiaobuteach.com</td>
            </tr>
        </tbody>
    </table>
</body>

table、thead、tbody、tr、th、td分别有标签默认值，这里显示设置等价代码。table标签display-inside值table，表示子元素thead与tbody按照table布局进行显示。

运行效果如下。

7.2.3 flex

flex表示弹性布局，常用于多列布局，当列宽超出或不足时，能够相应收缩或伸长。

flex布局多列示意图

flex布局对应两层结构：flex容器与flex子元素。flex子元素会被当作列进行显示。

<body>
    <div style="display: block flex;">
        <div>                           <!-- div1 -->
            <div>第1列</div>
            <div>小步教程</div>
            <div>小步教程</div>
        </div>
        <div>                           <!-- div2 -->
            <div>第2列</div>
            <div>xiaobuteach.com</div>
        </div>
    </div>
    <div>第2行</div>
</body>

display: block flex;等价display: flex。flex父容器display-inside: flex表示子元素div1与div2按flex布局进行排列。flex子元素display-inside值默认flow，它内部的元素仍按流式布局显示。

运行效果

7.2.4 grid

grid布局表示能直接设置行与列的多行多列的布局结构。grid与table相似，grid布局的显示形式与table类似，按照规范grid用于布局、table用于展现表格形式的数据；grid与flex相似，flex的显示效果虽然也有多行多列，但多行是通过自动换行而不是CSS属性直接设置。实际项目grid布局使用较少，一方面因为浏览器兼容性，另一方面虽然极强大但使用过于复杂。

示例代码

<body>
    <div style="display: block grid;grid-template-columns: 1fr 2fr 1fr;grid-template-rows: 1fr 1fr;">
        <div>1行1列 小步教程</div>
        <div>1行2列 xiaobuteach.com</div>
        <div>1行3列</div>
        <div>2行1列</div>
        <div>2行2列</div>
        <div>2行3列</div>
    </div>
</body>

grid-template-columns与grid-template-rows指定列数与行数，fr表示相应比例单位。grid容器display-inside值grid，表示内部各子元素按照grid布局显示。

运行结果