BinaryDevelop
  1. ホーム
  2. html

[解決済み] フレックスボックスはテーブルと同じようにレイアウトできますか？

2022-03-07 12:22:20

質問

社内で開発したフレームワークを使用していますが、そのフレームワークは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>

解決方法は？

提示しようとするコンテンツが、タイプ 表形式データ を指定すると table が適切な方法です。

HTML 5.1 W3C勧告、2016年11月1日、4.9 表形式データ

マークアップを変更できない、あるいは変更したくない場合、CSS Tableを使用することで、以下のような表示形式を簡単に切り替えることができます。 flex , block など、あるいは float メディアクエリなどを使用しています。

を削除した。 <div class="line-break"></div> 要素は必要ないので、そのままでも問題ありませんが、コンポーネントなどでレンダリングされる場合は、そのままでも問題ありません。

それでもFlexboxを使う必要がある場合は、私のこの回答で、2つの重要な機能についてのCSS TableとFlexboxの違いについて触れています。

幅とスパン列を変化させた、便利な Flexbox のサンプルを更新しました。

スタック・スニペット - フレックスボックス ( 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>

スタック・スニペット - 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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します