コンプリート

フレックスボックス
Flexboxの助けを借りて応答ウェブサイトの開発を使用し、実装が容易です.Flexboxは、コンテナ内のプロパティと主な内容でブロックを含むコンテナです.


Flexboxプロパティ
1 .ディスプレイ
これは、指定された値に応じてインラインまたはブロックのインラインコンフィグを定義します.これは、すべての直接の子供のためのflexのコンテキストを有効にします.

.container {
  display: flex; 
}

2方向
Flex Directionは、列、列リバース、および行リバースで変更できる行です.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

フレックスラップ
応答領域のフレックス戦争の使用は、デバイスのすべてのタイプの作品.これは、ラップやラップの4つのプロパティラップが含まれています.

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

4フレックスラップ
フレックスの項目は、すべて1行にフィットしようとします.あなたはそれを変更することができますし、アイテムをこのプロパティで必要に応じてラップすることができます.

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

5フレックスフロー
これはFlex方向とFlex Barプロパティのショートカットで、Flexコンテナーの主とクロス軸を一緒に定義します.

.container {
  flex-flow: column wrap;
}

6詰め物内容
これはメイン軸に沿ったアライメントを定義します.これは、余分な空き領域の残り物を配布するときに、すべてのフレックス項目の行が柔軟性がないか、柔軟性があるが、最大サイズに達している

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

7整列項目
これは、Flex項目が現在の線の十字軸に沿ってどのようにレイアウトされるかのデフォルトの動作を定義します.それをクロス軸のコンテンツバージョンを正当化すると考える

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end 
}

8整列内容
これは、クロス軸に余分なスペースがあるときに、Flex Containerのラインを配置します.コンテンツがメイン軸内の個々の項目をどのように調整するかに似ています.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline 
}

これは、Flexboxのプロパティと使用の終わりではありませんが、主にWeb開発で使用される主なプロパティは、使用して上に記載されています.Flexboxは簡単で重要なWeb開発分野で起動します.
おい、私がインドウェブ開発者からのGaneshである誰でも、私はコンテンツのために私と接続します.
最近の記事をチェック