flexbox を使ってみる その2

カテゴリ:FC2ブログの色々とカスタマイズとか
タグ:

レイアウトにtable タグを使ってはいけないと聞いてから幾月々。
flexbox を使って、table タグで表現してきたものを書替えてみました。

クラリネット

カール・ライスター

オーボエ

ローター・コッホ

第1ヴァイオリン

トーマス・ブランディス

第2ヴァイオリン

ハンス=ヨアヒム・ヴェストファル

ヴィオラ

ジークベルト・ユーベルシュール

チェロ

ヴォルフガンク・ベットヒャー


というもの。

 CSSをこう書きました。

/* flexbox 左右均等-------------------------- */
.flexbox_c::after {
  line-height: 1.6;
  content: '\200b';
}

.flexbox_c {
  display: flex;
  line-height: 1.2;
  align-items: baseline;
}

.flexbox_c :nth-child(1) {
  width: 50%;
  text-align: right;
  margin-right: 0.5em;
  color: rgb(102, 102, 102);
}

.flexbox_c :nth-child(2) {
  width: 50%;
  text-align: left;
  margin-left: 0.5em;
}


 HTMLがこんなに簡単になります。

<div class="flexbox_c">
  <p>クラリネット</p>
  <p>カール・ライスター</p>
</div>
<div class="flexbox_c">
  <p>オーボエ</p>
  <p>ローター・コッホ</p>
</div>
    ・・・・・・・・・・

で、レスポンシブにも対応してます。
過去記事も順次治していこうかと。

補足

 私のこのブログでは標準のline-heightを1.6に設定しています。
 flexboxのCSSでこの行間を別の値で指定すると、flexbox間の行間もその別の値になってしまいます。
 margin-bottom指定でその影響を避けることができました。
 ん~っ そうなんや
 ど して?


追記

 2017 12 04
 teratail へ質問を立ててみると有益な回答をいただきました。
 いただいた回答に従ってCSSを書き直しました。

Comments 0

There are no comments yet.

Leave a reply
コメントをどうぞ

ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます