布局一个类似于表格的弹性框? [英] Layout a flex box similar to a table?

查看：25
本文介绍了布局一个类似于表格的弹性框?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

问题来了.在不彻底改变 DOM 的情况下，我怎样才能让下面的 flex 框基本上像 HTML 表格一样呈现?还是桌子是唯一的方法?该解决方案必须同时适用于 IE11 和 Chrome.

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

A 列 |B栏|C栏1 |2 |3

section {显示:弹性；flex-wrap: 包裹;}部分 .col {弹性:1 1 自动；}部分 .line-break {弹性基础:100%；宽度:0px；高度:0px；溢出:隐藏；}

<头><身体><部分><标题><div class="col">A列</div><div class="col">B列</div><div class="col">C列</div></标题><div class="line-break"></div><div class="row"><div class="col">1</div><div class="col">2</div><div class="col">3</div>

</节></html>

解决方案

如果您要呈现的内容是表格数据类型，那么table就是正确的方式.

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

鉴于您不能或不想更改标记，这可以使用 CSS Table 来完成，并且可以轻松地在任何显示类型(例如 flex、block 等，甚至 float，使用媒体查询等

我还删除了 <div class="line-break"></div> 元素，因为您不需要，但如果它是由一个组件或类似的东西，保持原样不会造成任何问题.

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

更新了一个示例，展示了一些有用的 Flexbox 内容，具有不同的宽度和跨度列.

堆栈片段 - Flexbox(IE11 的小提琴演示)

.tbl {显示:弹性；弹性方向:列；}.排 {显示:弹性；最小高度:50px；}.细胞 {弹性:4；边框:1px纯红色；}.cell:nth-child(1) {弹性:1；}.cell:nth-child(2) {弹性:2；}.cell.span4-5 {弹性:8 24px；/* col 4,5 flex-grow/border/padding */}.cell.span3-4 {弹性:8 24px；/* col 3,4 flex-grow/border/padding */}.cell.span3-5 {弹性:12 36px；/* col 3,4,5 flex-grow/border/padding */}.row:first-child .cell {显示:弹性；对齐内容:居中；/* 中心水平线.*/对齐项目:居中；/* 中心顶点.*/}.row .cell {填充:5px；box-sizing: 边框框；}

<div class="row"><div class="cell">ID </div><div class="cell">Nr </div><div class="cell">标题 1 </div><div class="cell span4-5">标题 2

<div class="row"><div class="cell">1</div><div class="cell">2</div><div class="cell">内容</div><div class="cell">内容</div><div class="cell">内容</div>

<div class="row"><div class="cell">2</div><div class="cell">3</div><div class="cell span3-5">内容</div>

<div class="row"><div class="cell">1</div><div class="cell">2</div><div class="cell span3-4">内容</div><div class="cell">内容</div>

堆栈片段 - CSS 表

section {显示:表；宽度:100%；}部分 >* {显示:表格行；}部分 .col {显示:表格单元格；}

<头><身体><部分><标题><div class="col">A列</div><div class="col">B列</div><div class="col">C列</div></标题><div class="row"><div class="col">1</div><div class="col">2</div><div class="col">3</div>

</节></html>

I'm working with a framework developed in-house which depends on a certain structure to our HTML. And one of the tricky things is that each row needs its own container with its own classes and data attributes.

So here's the problem. Without drastically changing the DOM, how can I make the flex box below render essentially like an HTML table would? Or is a table the only way? The solution will have to work in both IE11 and Chrome.

I'm trying to make it look like this...

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>

解决方案

If the content you are going to present is of type tabular data, then a table is the proper way.

HTML 5.1 W3C Recommendation, 1 November 2016, 4.9 Tabular data

Given that you can't, or don't want to, alter the markup, this can be done using CSS Table, and with that easily swap between any display type such as flex, block, etc., or even float, using media query etc.

I also removed the <div class="line-break"></div> element, since you don't need, though if it is rendered by a component or similar, leaving it as is won't cause any problem.

If you still need, or have to, use Flexbox, this answer of mine mention the difference between CSS Table and Flexbox on two important features:

Updated, a sample showing some useful Flexbox stuff, with varying width's and span columns.

Stack snippet - Flexbox (Fiddle demo for IE11)

.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>

Stack snippet - CSS Table

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>

这篇关于布局一个类似于表格的弹性框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆