布局类似于表格的弹性框？

问题描述 投票：0回答：5

我正在使用内部开发的框架，该框架依赖于我们的 HTML 的特定结构。棘手的事情之一是每一行都需要自己的容器，具有自己的类和数据属性。

所以问题来了。在不大幅更改 DOM 的情况下，如何使下面的弹性框基本上像 HTML 表格一样渲染？或者桌子是唯一的方法吗？该解决方案必须适用于 IE11 和 Chrome。

我正在努力让它看起来像这样......

Column A      |      Column B      |      Column C
1             |      2             |      3


section {
  display: flex;
  flex-wrap: wrap;
}

section .col {
  flex: 1 1 auto;
}

section .line-break {
  flex-basis: 100%;
  width: 0px; 
  height: 0px; 
  overflow: hidden;
}
<html>
  <head>
  </head>
  <body>
    <section>
      <header>
        <div class="col">Column A</div>
        <div class="col">Column B</div>
        <div class="col">Column C</div>
      </header>
      <div class="line-break"></div>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
    </section>
  </body>
</html>

html css flexbox
5个回答
58
投票

header, .row {
  display: flex;  /* aligns all child elements (flex items) in a row */
}

.col {
  flex: 1;        /* distributes space on the line equally among items */
}
<section>
  <header>
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </header>
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
</section>

50
投票

如果您要呈现的内容属于 表格数据 类型，那么 

table
是正确的方法。

HTML 5.1 W3C 建议，2016 年 11 月 1 日，4.9 表格数据

鉴于您不能或不想更改标记，这可以使用 CSS Table 来完成，并且可以在任何显示类型（例如 

flex
、
block
等）之间轻松切换，或者甚至
float
，使用媒体查询等

我还删除了 

<div class="line-break"></div>
元素，因为您不需要，但如果它是由组件或类似组件渲染的，则保持原样不会导致任何问题。

使用 CSS 表格

section {
  display: table;
  width: 100%;
}

section > * {
  display: table-row;
}

section .col {
  display: table-cell;
}
<html>
  <head>
  </head>
  <body>
    <section>
      <header>
        <div class="col">Column A</div>
        <div class="col">Column B</div>
        <div class="col">Column C</div>
      </header>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
    </section>
  </body>
</html>

如果你仍然需要或必须使用 Flexbox，我的这个答案提到了 CSS Table 和 Flexbox 在两个重要功能上的区别：

已更新，示例显示了一些有用的 Flexbox 内容，具有不同的宽度和跨度列。

使用弹性盒

.tbl {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  min-height: 50px;
}
.cell {
  flex: 4;
  border: 1px solid red;
}
.cell:nth-child(1) {
  flex: 1;
}
.cell:nth-child(2) {
  flex: 2;
}
.cell.span4-5 {
  flex: 8 24px;                    /*  col 4,5 flex-grow/border/padding  */
}
.cell.span3-4 {
  flex: 8 24px;                    /*  col 3,4 flex-grow/border/padding  */
}
.cell.span3-5 {
  flex: 12 36px;                   /*  col 3,4,5 flex-grow/border/padding  */
}
.row:first-child .cell {
  display: flex;
  justify-content: center;         /*  center horiz. */
  align-items: center;             /*  center vert. */
}
.row .cell {
  padding: 5px;
  box-sizing: border-box;
}
<div class="tbl">
  <div class="row">
    <div class="cell">ID </div>
    <div class="cell">Nr </div>
    <div class="cell">Header 1 </div>
    <div class="cell span4-5"> Header 2 </div>
  </div>
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
  </div>
  <div class="row">
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell span3-5">Content</div>
  </div>
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell span3-4">Content</div>
    <div class="cell">Content</div>
  </div>
</div>

7
投票

此代码对我有用：

        * {
            box-sizing: border-box;
        }


        body, html {
            height: 100%;
            margin: 0;
        }


        #container {
            width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            background-color: lightgrey;
            padding: 10px;

        }


        .shelf {

            flex: 1 1 auto;
            width: 100%;
            margin-bottom: 10px;
            border: 1px solid black;
            background-color: lightgreen;

            display: flex;
            flex-direction: row;

        }
        .shelf:last-child {
            margin-bottom: 0;
        }


        .labelbox {
            flex: 0 0 35%;
        }


        .valuebox {
            flex: 0 0 65%;
        }
<div id="container">

    <div class="shelf">
        <div class="labelbox">Name: </div> <div class="valuebox">Barry Carter</div>
    </div>

    <div class="shelf">
        <div class="labelbox">DOB:</div><div class="valuebox">10/12/1980</div>
    </div>

    <div class="shelf">

        <div class="labelbox">
            Description:
        </div>

        <div class="valuebox">

            This content goes on and on and will force the height to expand. And the label box to the left will
            "move" with it. There need not be much of a relation other than that their parent div/flex-container is
            getting taller as well.

        </div>

    </div>

    <div class="shelf">
        <div class="labelbox">Group:</div><div class="valuebox">Advanced</div>
    </div>

    <div class="shelf">
        <div class="labelbox">End Date:</div><div class="valuebox">2020-09-20</div>
    </div>

</div>

2
投票

使用 CSS 网格。您可以按照自己喜欢的方式设计任何桌子。

请记住，如果您的表超过 700 行，无论您使用什么 js 框架，帧速率都会开始下降。 React、Angular、Vue 或 Vanila JS。滚动会变得非常滞后。

您可以使用的最大行数是 1000。超过此值，额外的行会产生不良图形。但无论如何你都不会达到 1000，因为在第 700 行时，滚动速度开始变慢。

如果您需要显示超过 1000 行，您将可视化 lib.每个 js 框架都有一个库可以做到这一点。基本上，它将在视口中渲染行。不在视口中的行将不会被渲染。它们仅在用户滚动时才会呈现。

今年是 2021 年，有机会您将来读到这个答案，浏览器供应商可能会修复 1000 行的性能，他们甚至可能会扩展该限制。所以尝试一下吧。

0
投票

使用 CSS Grid，而不是 Flexbox。它具有与 Flexbox 基本相同的功能，但专为表格对齐的用例而设计。

Flexbox 用于沿 one 方向对齐，从而使行或列不对齐（取决于 

flex-direction
），除非您采用静态大小调整。这是行对齐但列未对齐的示例：

Flexbox example

CSS 网格是为了在两个维度上对齐而设计的：

Grid example

上图来自MDN文章网格布局与其他布局方法的关系，该文章更详细地介绍了这个主题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.