目次
Contents
display: flex;
| 値 | |
|---|---|
| row | 左から右への横並び |
| column | 上から下 |
| row-reverse | rowの逆 |
| column-reverse | columnの逆 |
flex-shrink
flexアイテムの縮小率を指定するプロパティです。親要素のflexコンテナからはみ出た要素を縮小することができます。
また幅を縮めたくないときは、flex-shrink: 0;を指定します。
親要素にdisplay: flex;を指定し、子要素にflex-shrinkを指定します。
flex
flexとは、flex-grow、flex-shrink、flex-basisを同時に指定できるプロパティです。
flex: 1;
flex-grow: 1;、flex-shrink: 1;、flex-basis: 0;を同時に指定できるプロパティです。
| flex-grow: 1; | 親要素の余っているスペースを整数で設定した比率で分配 |
| flex-shrink: 1; | 親要素からはみ出たスペースを整数で設定した比率で縮める |
| flex-basis: 0; | width、heightのように幅を初期値を設定できる デフォルト値=autoを0で記載 |
あわせて読みたい
CSSでよく見かける【flex:1】を分かりやすく解説 | みやっちブログ
Flexbox勉強し始めると、flexプロパティを使用して「flex: 1;」と書かれている物をよく見かけます。
CSS初心者のころは、良く分からずなんとなく使っている方も多いのでは...
gapプロパティー
gapプロパティーはFlexboxおよびGridで要素間の間隔を設定できます。
display: grid;
CSS Gridで中央揃え
.sample {
background: #222;
color: #fff;
display: grid;
place-items: center;
padding: 60px;
}gridで中央寄せ
MDN Web Docs
grid-template-columns - CSS: カスケーディングスタイルシート | MDN
grid-template-columns は CSS のプロパティで、グリッド列の線名とトラックのサイズ変更機能を定義します。
よく使うコード
あわせて読みたい
CSS
CSSの基礎知識 【セレクタ】 セレクタ { プロパティ名 : 値 ;} 【link要素】 <!doctype html> <html> <head> ..... <link rel="stylesheet" href=...
リスト 左寄せ揃えかつ中央寄せ
- リストを
- 左の書き出し位置は揃えつつ
- 画面中央位置に寄せたい場合
▼ulの親要素、ulに下記のスタイルをあてる
.list-center {
text-align: center;
}
.list-center ul {
text-align: left;
display: inline-block;
}- リストを
- 左の書き出し位置は揃えつつ
- 画面中央位置に寄せたい場合
カラム子要素 下揃え
各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえにすることができます！
各カラムで下部子要素の高さをそろえたいとき、CSSで可能です！
各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえにすることができます！
.columns-f .wp-block-column {
display: flex;
flex-direction: column;
}
.columns-f .wp-block-column div:last-child {
margin-top: auto!important;
}各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえにすることができます！
各カラムで下部子要素の高さをそろえたいとき、CSSで可能です！
各カラムでテキストの量に違いがあったりする場合、カラム下部子要素の高さ位置がバラバラになってしまうことがあると思いますが、CSSで下ぞろえにすることができます！
その他
SEOタイムズ
SEO対策の初心者向けバイブル｜SEOタイムズ
SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。SEOタイムズが、あなたのWebマーケティング戦略を成功に導きます。
ジトサイト
【CSS】display: flex;で子要素やボタンを下揃えする裏技【Flexbox】
こんな疑問にお答えします。 Flexboxを使ったとき、子要素やボタンの位置がそれぞれズレてしまいますよね。 下記画像みたいに↓ ボタンの位置がバラバラで、見栄えがよくあ...
