如何用CSS Flexbox构建吊桌

提问者：小点点

如何用CSS Flexbox构建吊桌

我正在尝试使用FlexBox构建一个类似悬挂桌子的视图。它是数据驱动的，并且是弹出模式，我希望它能够响应。使用

可以很容易地完成我想要做的事情，但是如果将来需要这样做的话，这不会产生重新塑造它的能力。

我想构建的是这样的:

┌────────┬──────┬────────────┐
│        │      │            │
│  2020  │  Q4  │  December  │
│        │      │  November  │
│        │      │  October   │
│        │      │            │
│        │  Q3  │  September │
│        │      │  August    │
│        │      │  July      │
│        │      │            │
│        │  Q2  │  June      │
│        │      │  May       │
│        │      │  April     │
│        │      │            │
│        │  Q1  │  March     │
│        │      │  February  │
│        │      │  January   │
│        │      │            │
├────────┼──────┼────────────┤
│        │      │            │
│  2019  │  Q4  │  December  │
│        │      │  November  │
│        │      │  October   │
│        │      │            │
│        │  Q3  │  September │
│        │      │  August    │
│        │      │  July      │
│        │      │            │
│        │  Q2  │  June      │
│        │      │  May       │
│        │      │  April     │
│        │      │            │
│        │  Q1  │  March     │
│        │      │  February  │
│        │      │  January   │
│        │      │            │
└────────┴──────┴────────────┘

或者，但用处较小的是，它可以是这样的:

┌─────────┬──────┬────────────────────────────────┐
│         │      │                                │
│  2020   │  Q4  │  October  November  December   │
│         │      │                                │
│         │  Q3  │  July     August    September  │
│         │      │                                │
│         │  Q2  │  April    May       June       │
│         │      │                                │
│         │  Q1  │  January  February  March      │
│         │      │                                │
├─────────┼──────┼────────────────────────────────┤
│         │      │                                │
│  2019   │  Q4  │  October  November  December   │
│         │      │                                │
│         │  Q3  │  July     August    September  │
│         │      │                                │
│         │  Q2  │  April    May       June       │
│         │      │                                │
│         │  Q1  │  January  February  March      │
│         │      │                                │
└─────────┴──────┴────────────────────────────────┘

每个标签实际上都是一个

版本作为一个示例（下面的第一个代码示例），并且我使用Flexbox（下面的第二个代码示例）做了一个当前最大的努力，它没有平衡这三个列，但在其他方面接近于我想要的。

编辑:按照要求，我已经对代码进行了内嵌模式。

显示所需结构的

示例:

null

table {
  width: 90%;
}

td {
  width: 33%;
  text-align: top;
  vertical-align: top;
}

<html>

<body>
  <table>
    <tr>
      <td rowspan="12">
        <button>2020</button>
      </td>
      <td rowspan="3">
        <button>Q4</button>
      </td>
      <td><button>January</button></td>
    </tr>
    <tr>
      <td><button>December</button></td>
    </tr>
    <tr>
      <td><button>November</button></td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q3</button>
      </td>
      <td>
        <button>October</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>September</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>August</button>
      </td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q2</button>
      </td>
      <td><button>July</button></td>
      </td>
    </tr>
    <tr>
      <td><button>June</button></td>
    </tr>
    <tr>
      <td><button>May</button>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q1</button>
      </td>
      <td>
        <button>April</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>March</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>February</button>
      </td>
    </tr>
    <tr>
      <td rowspan="12">
        <button>2019</button>
      </td>
      <td rowspan="3">
        <button>Q4</button>
      </td>
      <td><button>January</button></td>
    </tr>
    <tr>
      <td><button>December</button></td>
    </tr>
    <tr>
      <td><button>November</button></td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q3</button>
      </td>
      <td>
        <button>October</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>September</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>August</button>
      </td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q2</button>
      </td>
      <td><button>July</button></td>
      </td>
    </tr>
    <tr>
      <td><button>June</button></td>
    </tr>
    <tr>
      <td><button>May</button>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q1</button>
      </td>
      <td>
        <button>April</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>March</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>February</button>
      </td>
    </tr>
    <tr>
      <td rowspan="12">
        <button>2018</button>
      </td>
      <td rowspan="3">
        <button>Q4</button>
      </td>
      <td><button>January</button></td>
    </tr>
    <tr>
      <td><button>December</button></td>
    </tr>
    <tr>
      <td><button>November</button></td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q3</button>
      </td>
      <td>
        <button>October</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>September</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>August</button>
      </td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q2</button>
      </td>
      <td><button>July</button></td>
      </td>
    </tr>
    <tr>
      <td><button>June</button></td>
    </tr>
    <tr>
      <td><button>May</button>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q1</button>
      </td>
      <td>
        <button>April</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>March</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>February</button>
      </td>
    </tr>
    <tr>
      <td rowspan="12">
        <button>2017</button>
      </td>
      <td rowspan="3">
        <button>Q4</button>
      </td>
      <td><button>January</button></td>
    </tr>
    <tr>
      <td><button>December</button></td>
    </tr>
    <tr>
      <td><button>November</button></td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q3</button>
      </td>
      <td>
        <button>October</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>September</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>August</button>
      </td>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q2</button>
      </td>
      <td><button>July</button></td>
      </td>
    </tr>
    <tr>
      <td><button>June</button></td>
    </tr>
    <tr>
      <td><button>May</button>
    </tr>
    <tr>
      <td rowspan="3">
        <button>Q1</button>
      </td>
      <td>
        <button>April</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>March</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>February</button>
      </td>
    </tr>
  </table>
</body>

</html>

null

FlexBox当前最大努力:

null

.container {
  height: 100%;
  width: 100%;
}

.rows {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.year {
  border: 1px solid black;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 1;
}

.quarter {
  flex-grow: 2;
  border: 1px dashed blue;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.month {
  border: 1px dotted green;
}

<html>

<body>
  <div class="container rows">
    <div class="year">
      <button>2020</button>
      <div class="rows">
        <div class="quarter">
          <button>Q4</button>
          <div class="month rows">
            <button>January</button>
            <button>December</button>
            <button>November</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q3</button>
          <div class="month rows">
            <button>October</button>
            <button>September</button>
            <button>August</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q2</button>
          <div class="month rows">
            <button>July</button>
            <button>June</button>
            <button>May</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q1</button>
          <div class="month rows">
            <button>April</button>
            <button>March</button>
            <button>February</button>
          </div>
        </div>
      </div>
    </div>
    <div class="year">
      <button>2019</button>
      <div class="rows">
        <div class="quarter">
          <button>Q4</button>
          <div class="month rows">
            <button>January</button>
            <button>December</button>
            <button>November</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q3</button>
          <div class="month rows">
            <button>October</button>
            <button>September</button>
            <button>August</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q2</button>
          <div class="month rows">
            <button>July</button>
            <button>June</button>
            <button>May</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q1</button>
          <div class="month rows">
            <button>April</button>
            <button>March</button>
            <button>February</button>
          </div>
        </div>
      </div>
    </div>
    <div class="year">
      <button>2018</button>
      <div class="rows">
        <div class="quarter">
          <button>Q4</button>
          <div class="month rows">
            <button>January</button>
            <button>December</button>
            <button>November</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q3</button>
          <div class="month rows">
            <button>October</button>
            <button>September</button>
            <button>August</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q2</button>
          <div class="month rows">
            <button>July</button>
            <button>June</button>
            <button>May</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q1</button>
          <div class="month rows">
            <button>April</button>
            <button>March</button>
            <button>February</button>
          </div>
        </div>
      </div>
    </div>
    <div class="year">
      <button>2017</button>
      <div class="rows">
        <div class="quarter">
          <button>Q4</button>
          <div class="month rows">
            <button>January</button>
            <button>December</button>
            <button>November</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q3</button>
          <div class="month rows">
            <button>October</button>
            <button>September</button>
            <button>August</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q2</button>
          <div class="month rows">
            <button>July</button>
            <button>June</button>
            <button>May</button>
          </div>
        </div>
        <div class="quarter">
          <button>Q1</button>
          <div class="month rows">
            <button>April</button>
            <button>March</button>
            <button>February</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

null

共1个答案

匿名用户

Flex可以自己做到这一点，但效率不高。

网格可以提供一个干净，简单，轻便的解决方案。 Flex能帮上一点忙。

下面的代码满足了您对适应性和维护的要求。

null

.container {}

.year {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  height: 50vh; /* demo */
  width: 50vw;  /* demo */
  border: 1px solid black;
}

button {
  align-self: start;
  justify-self: start;
}

.rows {
  display: flex;
  flex-direction: column;
}

.quarter {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
}

.month {}

<div class="container rows">
  <div class="year">
    <button>2020</button>
    <div class="rows">
      <div class="quarter">
        <button>Q4</button>
        <div class="month rows">
          <button>January</button>
          <button>December</button>
          <button>November</button>
        </div>
      </div>
      <div class="quarter">
        <button>Q3</button>
        <div class="month rows">
          <button>October</button>
          <button>September</button>
          <button>August</button>
        </div>
      </div>
      <div class="quarter">
        <button>Q2</button>
        <div class="month rows">
          <button>July</button>
          <button>June</button>
          <button>May</button>
        </div>
      </div>
      <div class="quarter">
        <button>Q1</button>
        <div class="month rows">
          <button>April</button>
          <button>March</button>
          <button>February</button>
        </div>
      </div>
    </div>
  </div>
</div>

如何用CSS Flexbox构建吊桌

共1个答案

相关问题

热门标签

如何用CSS Flexbox构建吊桌

共1个答案

相关问题

热门标签

微信关注