html - 带有 flex 的表格布局，带有完整的问题-6ren

html - 带有 flex 的表格布局，带有完整的问题

转载作者：行者123 更新时间：2023-11-28 00:36:25

我正在用 div 和 flex 做这个表格布局，因为一些样式变得更复杂我不得不离开“真实”<table>落后，这样做。有了这个。

我的主要问题之一是 table-card , table-card__head或 table-card__body不会变成全宽来换行。我是我的例子，我让其中一行有更多的单元格。在这一点上，老实说，我不知道为什么会这样。我非常感谢您的指点。

我会放一个 fiddle以防万一

* {
  box-sizing: border-box;
}


/* plage specific */

.table-card__cell-width .table-card__head-cell,
.table-card__cell-width .table-card__cell {
  width: 11.25rem;
}


/* shared styles */

.table-card {
  position: relative;
}

.table-card__head {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.table-card__head-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: coral;
}

.table-card__head-cell {
  border-right: 1px solid aqua;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
}

.table-card__body {
  flex: 1 0 100%;
}

.table-card__row {
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
  background-color: white;
  border-bottom: 1px solid #cccccc;
}

.table-card__row:nth-child(odd) {
  background-color: #ededed;
}

.table-card__cell {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  height: 4rem;
  border-right: 1px solid #cccccc;
}

<div class="table-card">
  <div class="table-card__head table-card__cell-width">
    <div class="table-card__head-row">
      <div class="table-card__head-cell">Head 1</div>
      <div class="table-card__head-cell">Head 2</div>
      <div class="table-card__head-cell">Head 3</div>
      <div class="table-card__head-cell">Head 4</div>
    </div>
  </div>

  <div class="table-card__body table-card__cell-width">
    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>
  </div>
</div>

最佳答案

所以我确实想出了一个简单且适用于ie11的方法。

.table-card {
  position: relative;
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr;
}

* {
  box-sizing: border-box;
}

/* plage specific */
.table-card__cell-width .table-card__head-cell,
.table-card__cell-width .table-card__cell {
  width: 11.25rem;
}

/* shared styles */
.table-card {
  position: relative;
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr;
}

.table-card__head {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.table-card__head-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: coral;
}

.table-card__head-cell {
  border-right: 1px solid aqua;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
}

.table-card__row {
  display: flex;
  flex-wrap: nowrap;
  background-color: white;
  border-bottom: 1px solid #cccccc;
}
.table-card__row:nth-child(odd) {
  background-color: #ededed;
}

.table-card__cell {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  border-right: 1px solid #cccccc;
}

<div class="wrapper">
  <div class="table-card">
    <div class="table-card__head table-card__cell-width">
      <div class="table-card__head-row">
        <div class="table-card__head-cell">Head 1</div>
        <div class="table-card__head-cell">Head 2</div>
        <div class="table-card__head-cell">Head 3</div>
        <div class="table-card__head-cell">Head 4</div>
      </div>
    </div>

    <div class="table-card__body table-card__cell-width">
      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>
    </div>
  </div>
</div>

关于html - 带有 flex 的表格布局，带有完整的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54125750/

文章推荐： c++ - 类定义交叉引用时如何声明友元方法？

文章推荐： javascript - 刷新后过滤器被清除

文章推荐： c++ - 计算包含对象的this指针

文章推荐： javascript - 我如何根据下划线中的值获取键

html - flex 盒中的 flex 盒，定位不起作用。 ( flex 盒中的 flex 盒)
更新对于那些不喜欢内联 CSS 并想要类的人，这里有另一个带有类和样式表的 jsFiddle。更新结束我想做一个产品页面。它将包含三列。第一个是图片，第二个是一些规范，第三个是“入篮”。所有列的
apache-flex - 无需调试即可编译 Flex 应用程序？ flex 编译器的优化选项？
我创建了一个简单的测试应用程序使用以下代码 var i : int; for (i=0; i *
css - 有没有一种方法(公式)可以计算以 flex-grow、flex-shrink 和 flex 为基础描述的 flex 元素的绝对大小？
我做了一个小demo http://html5.by/blogdemo/flexbox/flex-grow-shrink-basis-stackoverflow.html flex 容器中有2个 fl
css - 考虑到 flex 属性不是分层的，在嵌套 flex 布局中的所有祖先节点上设置 "flex:1"或 "flex-grow:1"的解释？
我读过好几遍，要让 flex-grow 按预期工作，您通常需要设置 flex-grow:1(或 flex: 1) 在元素的父级、其父级等上，一直向上。在学习 flexbox 时，这给我的印象是它具有
apache-flex - 我可以在没有 Flex builder 的情况下使用 flex 吗？
我开始学习 FLEX。我只有 flex sdk。所以我只能使用它开始学习吗？如果是这样，请建议我要通过的链接.. 但是，使用编辑器将最大限度地减少我们的工作，并自行创建代码。所以作为一个新的学习者，理
html - flex-direction 列 flex 容器中 flex 元素的高度相同
有没有办法使用 flex-direction: column 在 flex 容器中放置 flex 项有相同的高度，只使用 CSS？ JSFiddle:https://jsf
apache-flex - Flex/AIR Socket 通信 - Flex 从不接收数据
我有一个 flex .swf 和一个单独的 AIR 项目，我试图通过套接字相互通信。这两个程序连接正常，.swf 能够毫无问题地将数据发送到 AIR 应用程序。但是，我发现当 AIR 应用程序将数据
html - 将 flex 元素放在 flex 盒容器中的另一个 flex 元素之下
在这种情况下，我希望将 2.5 放置在 2 下方 - 但 flexbox 容器强制将其放置在同一行，而不是将其放置在 div 下方那已经是那个特定的顺序了。我如何使用 flexbox - 将包含 2
javascript - 如何使本身就是 Flex 子级的父级的 Flex 子级的最大高度由其自身的 Flex 状态确定？
假设您有一个带有显示 flex、flex-direction 列的 div，在本例中高度为 600。它有三个子项，每个子项的属性 flex 等于 1。前两个子项呈现一些简单文本，第三个子项呈现 h1
html - 当父级在方向列的 flex 容器中设置 flex 基础时， flex 元素的子项不占用父级的高度
男孩，这个头衔是满口的。让我解释一下我的困惑: 我有一个 flex 容器和 2 个 flex 元素。 /* CSS */ .container {
css - flex 盒子模型 - 显示 : flex, 盒子， flex 盒子？
这个问题在这里已经有了答案: CSS3 Flexbox: display: box vs. flexbox vs. flex (3 个答案) 关闭 1 年前。今天我们中的许多人都知道 displa
html - 使所有 flex-items 环绕(如 flex-direction : column) when any one flex-item too wide for flex-container
其用例是带有单选按钮的响应式表单。当在大 PC 屏幕上时，所有单选按钮通常都在屏幕上的一行中(就像带有 flex-direction: row 的非包装 flex 容器中的 flex 元素)。在电话上
apache-flex - Flex 辅助功能 - Tab Focus 退出 Flex 应用程序
在可访问的 flex 应用程序中，用户可以使用 TAB 键在控件中导航。在用户激活特定链接后，flex 应用程序会在 html 页面顶部弹出，并使用 swfobject.embedSWF 加载。它
apache-flex - 将 Flex 3 迁移到 Flex 4 时出错
我将我的 Flex 3 项目导入 Flex 4 并删除了 Flex 4 问题窗口中列出的所有错误和警告。启动我的应用程序时，我在 Flex 4 中遇到以下错误。这可能是什么原因？ Error: C
html - 为什么 flex 元素可以在固定位置的 flex 容器中占据全高，除非该元素具有显示 : flex applied?
我有如下标记: alot of text 我不能让黄色占据红色的 100% 高度，即使红色溢出，它也只占据窗口的 100%。如果我将红色的 display
apache-flex - 从 Flex builder 3 中删除 flex 许可证 key
我在 Eclispe 3.4 中安装了 flex builder 3 插件。现在许可证过期了。所以我需要在其中添加另一个许可证。但我无法更改许可证 key ，因为该选项已禁用。因此，请任何人知道如何
html - 简单的 flex 问题 - 为什么 flex 元素的大小不一样，没有设置 flex 基础
这个问题在这里已经有了答案: Make flex items have equal width in a row (3 个答案) How to make Flexbox items the same
css - 使用 flex-basis 时了解 flex-grow 和 flex-shrink
我正在尝试理解以下行。 flex :0 1 50% 现在，如果最后一个值，flex basis 是像素，上面会说该元素不允许增长，但允许缩小并且最大为 50 像素。但是用百分比代替，有什么关系。它将
css - Firefox flex - 如何使用 flex-direction : column 防止 flex 元素变得太高
我一直致力于 flex 布局，遇到了针对 Firefox 和 IE11 的问题。我创建了一个 codepen显示问题。截图 Chrome(左)、Firefox(右) 描述预期的行为是header
apache-flex - flex - 垂直和水平布置表单项
我正在尝试在 flex (flash builder 4) 中创建一个简单的表单。我在里面放了一个表单容器和 FormItems。例如，表单项是标准的“客户”字段，例如名字、姓氏、地址、城市、州、 z

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 带有 flex 的表格布局，带有完整的问题