CSS Flexを利用して自己紹介ページに適用し、使用と直接適用の方式を記録する.

FLEXとは?

レイアウトに要素を配置する場合、float、inline-blockなどの移動位置でよく使われる強化と便利な機能.

1.FLEXの起動

flexは、まず親要素とその下のサブ要素を必要とします.
私は親要素を容器、子要素をcontent、itemなど多くのタイプと呼んでいます.

<div class="container">
  <div class="content">helloflex</div>
</div>

.containter {
 display : flex;

また、display : flex;をCSSに適用することはflexの開始である.
デフォルトでは、オプションはありません.

これにより、item、item 2、item 3が横に並べられます.widthは中身のwidthを占め、heightは初期設定なしで親容器のheightに増加します.

2. flex-direction

内のitemは、コンテンツの配置方向の属性を決定します.

.containter {
	flex-direction: row;
	flex-direction: column;
	flex-direction: row-reverse;
	flex-direction: column-reverse;
    }

row:(指定されていない場合のデフォルト値)項目は横方向に配置されます.
row-reverse:プロジェクトは逆順序で横方向に並べられています.
column:プロジェクトは縦方向に配置されています.
column-reverse:プロジェクトは逆順序で縦に並べられています.

3. flex-wrap

アイテムがcontainerのwidth値を超える場合に、アイテムの改行を指定するプロパティです.

.container {
	flex-wrap: nowrap;
	flex-wrap: wrap;
	flex-wrap: wrap-reverse;
}

nowrap:(デフォルト値は指定されていません)改行せず、コンテナの範囲外です.wrap:スキップされたアイテムを置き換えます.
wrap-reverse:item逆シーケンス改行.

4. justify-content

FLEXソート用のプロパティ.

.container {
	justify-content: flex-start;
	justify-content: flex-end;
	justify-content: center;
	justify-content: space-between;
	justify-content: space-around;
	justify-content: space-evenly;
}

このqualified-という属性は,プロジェクトが横に展開されていると考えれば容易であるが,実は中心の中心が真ん中にあり,その中心に挿入されたプロジェクトが左右に移動する原理である.justify-content: flex-start;:(デフォルト値は指定されていません)最上位のFlex起動デプロイメントと同じです.justify-content: flex-end;:itemを最後尾に並べます.row時右側、column辺りを下にします.justify-content: center;:項目を中央に並べます.justify-content: space-between;:プロジェクト間で同じ間隔を指定します.justify-content: space-around;:物品の周囲に同じ間隔を与える.justify-content: space-evenly;:プロジェクト間では、両端に同じ間隔が与えられます.
**IEでは未サポートと呼ばれていますが、IEは消えるにつれて利用される属性だと思います.
これら以外にも多くの機能や設定がありますが、実行時には適用されず、ページが完成していないので、これらを利用して追加したいと思います.

(ページを作るときに実際に使う様子…順番も見苦しいですが、もっと属性を使いたいと思います.)