displayいろいろメモ

display:table

カラムの中身の折り返しを抑制する

長い単語の途中で改行を許すにはword-wrapプロパティを使って、値にbreak-wordを設定する。
テーブルセルの中の文字を改行させるには、テーブル全体に幅を指定して、幅を固定する必要がある。

CSS

.table {
  display: table;
  /* 幅を指定して固定する必要がある
    width: 300px;
    table-layout: fixed;
  */
}

.table-cell {
  display: table-cell;
  word-wrap: break-word; /* 単独では効果がない */
}

display:flex

要素をflexboxでレンダリングするには、displayプロパティを利用して値にflexを設定する。
flexが指定された要素をFlex container(Flexコンテナ) と呼び、その子要素をFlex item(Flexアイテム) と呼ぶ。
☆flexboxとは、コンテンツをレイアウトするために導入された、比較的新しい新しいプロパティ
☆歴史順でだとtable→float→flexboxらしい

flex-wrap

Flexアイテムを所定の幅で折り返す

プロパティには次の値が利用できる
●nowrap
　改行しない
●wrap
　改行する
●wrap-reverse
　wrapと同じだが、並び順が逆。
※初期値はnowrapが設定されている

flex-direction

Flexアイテムの並び順を逆順にする

プロパティには次の値が利用できる

●row
　左から右に配置
●row-reverse
　rowと同じですが、順番が逆
●column
　上から下に配置
●column-reverse
　columnと同じだが、順番が逆
※初期値はrowが設定されている

justify-content

Flexアイテムを左右中央に配置

プロパティには次の値が利用できる

●flex-start
　Flexアイテムを始端配置
●flex-end
　Flexアイテムを終端に配置
●center
　Flexアイテムを中央に配置
●space-between
　Flexアイテムを均等に配置。最初のアイテムは始端に、最後のアイテムは終端に配置される。
●space-around
　space-betweenと同じ、最初のアイテムと始端との間と最後のアイテムと終端との間のスペースは、各アイテム間のスペースの1/2になる
●space-evenly
space-betweenと同じ、最初のアイテムと始端との間と最後のアイテムと終端との間のスペースは、各アイテム間のスペースと同じになる
※初期値はflex-startが設定されている

align-items

Flexアイテムを上下中央に配置
プロパティには次の値が利用できる

●flex-start
　Flexアイテムを上部配置
●flex-end
　Flexアイテムを下部配置
●center
　Flexアイテムを中央配置
●stretch
　Flexアイテムはコンテナいっぱいに広がる
※初期値はstretchが設定されている

align-content

Flexアイテム全体の縦の配置を変更する
※align-contentは、Flexコンテナーに余白がある場合のみ有効

●flex-start
　Flexアイテムを上部に配置。
●flex-end
　Flexアイテムを下部に配置。
●center
　Flexアイテムを中央に配置。
●space-between
　Flexアイテムを均等に配置し。最初のアイテムは上部に、最後のアイテムは下部に配置される。
●space-around
　space-betweenと同じ、最初のアイテムと上部との間と最後のアイテムと下部との間のスペースは、各アイテム間のスペースの1/2になる。
●stretch
　space-betweenと同じ、最初のアイテムと上部との間と最後のアイテムと下部との間のスペースは、各アイテム間のスペースと同じになる。
※初期値はstretchが設定されている

orderプロパティ

配置の順番を変更することができる。初期値は0
負の値を設定することで先頭に配置することができる。

flex-growプロパティ

Flexアイテムが占有する幅を調整することができる。
flex-growで調整できる幅は、要素の絶対的な幅ではなく、Flexコンテナーが持つ余白。