CSS Flex

flexプロパティ

display-flex containerの画面出力(表示)特性

プロジェクトに適用する親要素

flex:flexコンテナ定義(ブロック要素として定義)

、例えばブロック要素

inline-flex:flexコンテナ(行内要素として定義)を定義します.行内要素などです.

flex-方向主軸の選択

デフォルト値は

:行軸(左→右)

row-逆:行軸(右→左)

flex-wrap-flexプロジェクトがバンドルされているかどうか(改行)

デフォルト:nowrapは

を改行しません

wrap:複数行

rivided-コンテンツの主軸をソートする方法

デフォルト:flex-start=itemを起点として

をソート

flex-end=itemを端点として

並べ替え

center=item中央揃え

align-コンテンツ-交差軸の複数行を位置合わせする方法

2行以上でのみ操作を開始する場合はflex-wrapを使用する必要があります.

デフォルト:strett=item始点に位置合わせ

→高さが指定されていなければ、2行になると残りの行数で増加します.

flex-start=item始点に位置合わせ

→2行目から上に並べます.

flex-end=itemを端点として

並べ替え

center=item中央揃え

align-items交差軸の1行の位置合わせ方法

上のalign-contentはもっとよく使われています.

stretch=itemsを交差軸

まで延長

flex-start=items行ごとの始点別

flex-end=items各行の端点別

center=items各行の中央に

を並べる

物の属性を与える

order-flex itemの順序

デフォルト:024579182

の数字が小さいほど、まず

です.

flex-grow=flex itemの増分幅パーセント

コンテナの残りの空白を埋める方法

.container {
  width: vw;
  height: 400px;
  background-color: orange;
  display: flex;
  align-items: center;
}
.container .item {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 10px;
}
.container .item:nth-child(2) {
  flex-grow: 1;
}
.container .item:nth-child(3) {
  flex-grow: 2
}

これにより、2番目の要素flex-grow 1を与えると、2の半分の割合になります.
3つ目の要素2をあげると、1が2倍大きくなって埋まります.

デフォルト:成長率なし

数字:成長率

flex-scresh=flex itemの幅パーセント

デフォルト:1 flex-cainer幅から

を減算

数字:減少率(0は減少しない)

flex-base=flex itemの空間割り当て前のデフォルト幅

デフォルト:auto要素のコンテンツ幅

単位:px、em、remなど

align-self=単一項目を垂直に整列

stretch=itemを交差軸

まで延長

flex-start=item行ごとの始点順

flex-end=item行ごとの端点に

揃え

center=itemを1行あたり

に中央に配置