CSS ポジショニング
内容は、グエン・ズイ・フォン氏の文書から抜粋したものです。
. display
柔軟なレイアウト・フレックス
コンテナには、デフォルトで水平主軸と垂直横軸の2つの軸が存在します。
1.インライン・エレメントは Flex
.box{
display: inline-flex;
}
2.コンテナはフレックスとして指定されています
.box{
display: flex;
}
- レイアウトがFlexに設定されると、子要素のfloat、clear、vertical-align属性は無効になります。
- Webkitカーネルを搭載したブラウザは、先頭に-webkitを付ける必要があります。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
容器の特性
- flex-direction: 主軸の方向を決定します。
- 行：主軸は水平で、始点は左端。
- 行逆：主軸は水平、始点は右端。
- コラム：主軸は垂直で、始点は上端。
- 列-逆：主軸は垂直、始点は下端。
- flex-wrap: 改行動作
- nowrap改行なし。
- wrap: 改行、最初の行を上に。
- wrap-reverse: 改行、下の最初の行。
- flex-start左寄せ
- flex-end右寄せ
- center中央
- センター
- space-between: 両端が揃い、項目と項目の間隔が等しいこと。
- space-around：各項目は左右に等間隔に配置されます。つまり、アイテムとアイテムの間隔は、アイテムとボーダーの間隔の2倍です。
- align-items: 横軸のアライメント
- flex-start：交差軸アライメントの開始位置。
- flex-end（フレックスエンド）：交差軸の終端アライメント。
- center：十字軸の中点を合わせます。
- baseline：プロジェクトの最初のラインのベースラインアライメント。
- stretch: アイテムの高さが設定されていない場合、または auto に設定されている場合、コンテナの高さ全体を使用します。
- align-content: 複数の軸の整列。このプロパティは、軸が 1 つしかない場合は機能しません。
- flex-start：クロス軸の始点に合わせます。
- フレックスエンド：クロス軸の端に合わせます。
- center: 十字軸の中点に合わせます。
- space-between：交差する軸の端に合わせ、軸間の間隔を均等にします。
- space-around：各軸は両側に等間隔に配置されます。つまり、軸と軸の間のスペースは、軸とボーダーの間のスペースの2倍です。
- order
アイテムの特性
- 順序
- flex-grow
- フレックスグロウ
- flex-shrink
- フレックスシュリンク
- 属性はアイテムの縮小を定義し、デフォルトは1、つまり十分なスペースがない場合、アイテムは縮小されます。
- フレックスベース
- 属性は、余分なスペースを割り当てるときにアイテムが占有するスピンドルのスペースを定義します。
- フレックス
- align-self
- アラインセルフ
- 属性は、個々の項目が他の項目と異なる配置を持つことを可能にし、align-items属性を上書きすることができます。
- デフォルト値は auto で、親要素の align-items 属性を継承します。
グリッド
//TODO
. position
static
- "通常のページ・フロー
- 「通常のページの流れ
relative
- ポジショニング・ベースは、要素のデフォルトの位置です。
- top、bottom、left、right属性と組み合わせて使わなければなりません。
div {
position: relative;
top: 20px;
}
fixed
- 位置決めベースはブラウザウィンドウ
- top,bottom,left,right属性と一緒に使われますが、要素のデフォルト位置には設定されません。
div {
position: fixed;
top: 0;
}
absolute
- 位置決めベースは親要素
- top、bottom、left、right属性と組み合わせて使わなければなりません。
- 絶対位置指定された要素は、「通常のページフロー」では無視されます。つまり、「通常のページフロー」では、要素の占めるスペースはゼロで、周囲の要素は影響を受けません。
#father {
positon: relative;
}
#son {
position: absolute;
top: 20px;
}
sticky
- 動的効果
- top、bottom、left、right属性と組み合わせて使わなければなりません。
position: -webkit-sticky; /* safari 浏览器 */
position: sticky; /* 其他浏览器 */
top: 20px;
