フレックスボックスとパーセントでグリッドを作成しようとしています

debugcn 投稿 Dev

マルコス・コラード

私は現在FLEXを使用してテーブルを作成しようとしています。

100％の親であるメインテーブル
キーと値を保持するmain-table__group
group__keyは列Aにあるため、50％を使用します
group__valueは列Bにあり、50％も使用します

私が期待していることは、要素が次のように隣り合うことです。

A-B
A-B
A-B
A-B

次に、この種の行をさらに3つ追加することを考えると、どのように取得するかについてはわかりません。

A-B-A-B-A-B-A-B

私はLessを使用しているので、答えるときはこれを考慮に入れてください。将来、これが必要になることを覚えておいてください。

A-B A-B A-B A-B
A-B A-B A-B A-B
A-B A-B A-B A-B
A-B A-B A-B A-B

関連するコードは次のとおりです。

もっと少なく

.main-table {
  width: 100%;
  display:flex;
  justify-content: center;
  flex-wrap: nowrap;
  height: 300px;
  &__group {
    display: flex;
    width: 100%;
  }
  &__key{
    height: 30px;
    width: 50%;
    background-color: green;
  }
  &__val{
    height: 30px;
    width: 50%;
    background-color: red;
  }
}

HTML

<div class="main-table">
    <div class="main-table__group">
            <div class="main-table__key">A</div><div class="main-table__val">B</div>
            <div class="main-table__key">A</div><div class="main-table__val">B</div>
            <div class="main-table__key">A</div><div class="main-table__val">B</div>
            <div class="main-table__key">A</div><div class="main-table__val">B</div>
    </div>
</div>

ジェラルド

これがあなたが求めているものだと思います。最終結果を得るには、フレックスアイテムを12.5％の幅として定義し、他の6つの列を追加する必要があります。

.main-table {
  width: 100%;
  height: 300px;
}

.main-table__group {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.main-table__key {
  height: 30px;
  width: 50%;
  background-color: green;
}

.main-table__val {
  height: 30px;
  width: 50%;
  background-color: red;
}

/* LESS

.main - table {
  width: 100 % ;
  height: 300 px; &
  __group {
    display: flex;
    width: 100 % ;
    justify - content: flex - start;
    flex - wrap: wrap;
  } &
  __key {
    height: 30 px;
    width: 50 % ;
    background - color: green;
  } &
  __val {
    height: 30 px;
    width: 50 % ;
    background - color: red;
  }
}
*/

<div class="main-table">
  <div class="main-table__group">
    <div class="main-table__key">A</div>
    <div class="main-table__val">B</div>
    <div class="main-table__key">A</div>
    <div class="main-table__val">B</div>
    <div class="main-table__key">A</div>
    <div class="main-table__val">B</div>
    <div class="main-table__key">A</div>
    <div class="main-table__val">B</div>
    <div class="main-table__key">A</div>
    <div class="main-table__val">B</div>
    <div class="main-table__key">A</div>
    <div class="main-table__val">B</div>
  </div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]