CSS Flexbox

flexbox

FlexboxはCS 3の新しいレイアウト方式で、ビューポートや要素のサイズが不明確または動的に変化したときにも効率的に要素を配置、並べ替え、分散する方法を提供します。複雑な計算を必要とせず,要素の大きさや順序,並べ替え,方向などを柔軟に処理できる.

Flexboxの構成

flex containerは親、flex itemは子です。

flexboxの作成方法

.parent {
	display: flex;
}

やれば簡単だ.flex itemの主軸はflex containerのflex-direction属性によって決定され、デフォルト値はrowであり、もう一つの属性値columnは主軸の方向を上から下に流す.

親要素と子要素で定義された属性

flexboxで使用するプロパティは、親要素flexコンテナで定義されたプロパティと、サブ要素flexitemで定義されたプロパティに分けられます。全体的なソートまたはストリームに関連するプロパティはflexコンテナで定義され、サブ要素のサイズまたは順序に関連するプロパティはflex itemで定義されます。

Flexboxサポート範囲

flexboxはexplorer 10以降でサポートされていますが、完全にサポートされていません。explorer 10および11でもエラーが発生します。ブラウザ間で互換性があるかどうかは、レイアウトを絶えず変更する必要があります。explorerをサポートしないWebページを作成した場合はflexboxを使用します。モバイルブラウザはflexboxのサポート率が高い。

Flex Container(Flex親プロパティ)

Flex Containerのプロパティスピンドル(cross-axis)交差軸(cross-axis)

属性を定義するFlexコンテナflex-flowflex-directionとflex-wrapを表示しないショートカット属性flex-directionflexitemsの主軸(主軸)flex-wrapflexitemsの複数行セット(改行)justfy-content主軸(主軸)の揃え方content主軸(交差軸)の揃え方(2行以上)align-items交差軸(交差軸)の揃え方を設定するでItemsのソート方法を設定します(1行)

display

属性値にはflex、inline-flexがあり、itemsではなくコンテナが影響を受けます.displayプロパティはflex containerを定義します.flexは親によって垂直に積み重ねられ、inline-flexは親によって水平に積み重ねられます.inline-flexを使用する場合は、inlineプロパティも使用できます.

flex-flow

flex-directionとflex-wrapのショートカットプロパティ

flex-direction

itemsの主軸(main-axis)を設定します.
row-デフォルト.水平軸から右へ
row-reverse-rowは反対の軸として表示されます(右から左)
column-itemsは垂直軸から以下に出ます
column-reverse-columnとは反対の軸(下から上)として表示

flex-wrap

itemsの改行を設定します.
nowrap-デフォルト.すべての項目を複数行(1行を表示)に含めません.
wrap-itemsは複数行で改行します.
wrap-reverse-temsをwrapの逆マルチローに変換します.

justify-content

flex-directionに設定された主軸の周りに位置合わせを設定します.
flex-start-デフォルト.アイテムを始点に位置合わせ(左揃え)
flex-end-items端点位置合わせ(右揃え)
中央-中央揃え
space-then-開始itemは起点で、最後のitemは終点で位置合わせし、残りのitemsは中間で均一に位置合わせする.
space-around-items均一なマージンで整列

align-content

複数行の場合は、交差軸を中心とした位置合わせflex-wrapプロパティを設定することで、プロジェクトに少なくとも2行、余白を付けることができます.
strech-デフォルトです.コンテナの交差軸を埋めるためにitemsを追加
flex-start-items始点に位置合わせ
flex-end-itemsをエンドポイントに整列
中央-中央揃え
space-then-開始itemsは起点で、最後のitemは終点で位置合わせし、残りのitemsは中間で均一に位置合わせする.
space-around-items均一なマージンで整列

align-items

アイテムが1行だとよく使われます.
strech-デフォルトです.コンテナの交差軸を埋めるためにitemsを追加
flex-start-items始点に位置合わせ
flex-end-itemsをエンドポイントに整列
中央-中央揃え
ベースライン-テキストベースラインにアイテムを配置します

Flex items(Flexサブアイテムプロパティ)

Flex Itemsのプロパティを設定します。

属性の非orderflex itemの順序flex-grow、flex-shill、flex-basesのショートカット属性flex-growflex itemsの増加幅パーセント設定flex-baseflex itemの減少幅パーセント設定flex-basflex itemのデフォルト幅設定align-selfクロス軸設定itemの位置合わせ方法

order

itemの順序設定数字が大きいほど順序が遅くなります.(負数を許可)

flex

flex-grow、flex-srift、flex-basesのショートカットプロパティ

flex-grow

itemの増加幅パーセントitem要素を設定すると、コンテナ要素の内部の割り当て可能な空間のサイズが宣言されます.すべてのアイテムに同じflex-grow値がある場合、コンテナ内には同じスペースが割り当てられます.既定値は0で、単位は使用されません.△親は余った空白を残さなければならない.

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

.container {
  display: flex;
  width: 1600px;
  height: 400px;
  border: 1px solid #000;
}
.item {
  width: 200px;
  height: 100%;
  border: 1px solid #000;
  font-size: 48px;
  text-align: center;
  line-height: 350px;
  flex-grow: 1;
}
.item:nth-of-type(2) {
  flex-grow: 4;
  background-color: orange;
}

flex container 1600 pxの幅を与え、flex items 200 pxを与え、5つあり、残りの空白は600 pxになった.すべてのプロジェクトのflex-grow:1;均一であれば空白を埋め、同等の割合で320 pxに分け、2番目の項目4のみを与えることで、2番目の割合が大きくなり、残りは同等の割合になります.
flex-growを使用するには、まず親の空白とflex項目は同等のflex-growを1つの状態に分け、他の項目に異なるflex-growを設定する必要があります.

flex-shrink

itemの減少幅のパーセント設定数が大きいほど、より多くの幅が減少するitem要素のサイズがcontainer要素のサイズより大きい場合、flex-shillが使用され、設定された数値に基づいてcontainer要素内部のitem要素のサイズが縮小されます.

flex-basis

単位を使用してitemのデフォルト幅を設定します.

align-self

交差軸に単一の項目の位置合わせを設定します.(一部のアイテムがソートを変更する場合にのみ、align-itemsプロパティがプロパティより優先されます.)
Auto-デフォルトです.containerのalign-itemsプロパティが継承されます.
streach-itemを増やして容器の交差軸を充填する
flex-start-itemを各行の始点に位置合わせ
flex-end-itemを各行の端点に位置合わせ
中央-中央揃え
ベースライン-テキストベースラインにアイテムを配置します
ソース-https://d2.naver.com/helloworld/8540176
- https://jmjmjm.tistory.com/61