フレックスボックスの CSS トリック

フレックスボックスの CSS トリックは、フレックスボックスやその他の CSS フレックスボックストリックプロパティを使用してコンテナーを調整、設計、配置するために不可欠です。 CSS トリックプロパティと複数のプロパティ値は、フレックスボックスのデザインとそのデータに使用されます。 CSS トリックを使用して、フレックスボックスの配置、位置、スペース、その他のデザインを設定できます。

次の CSS トリック形式は、フレックスボックスの設計に使用されます。

Flecbox 方向の CSS トリック
Flexbox の配置に関する CSS テクニック
Flexbox マージンの CSS トリック

フレックス方向

flex-direction は、フレックスボックス内のコンテナの方向を取得するために使用されます。ご要望に応じてコンテナを設定いたします。

構文：

次の構文では、フレックスボックスの CSS トリックを使用します。フレックス方向には他の CSS プロパティを使用できます。

 display: flex; flex-direction: row | row-reverse | column | column-reverse;

説明：

コンテナまたは要素に対してデフォルトで flex を使用した表示を使用できます。
フレックス方向では、行、列、および逆の値を含む CSS プロパティが使用されます。

フレックス方向の例

次の例は、Flex プロパティと値を表示するフレックスボックスを示しています。コンテンツ、配置、方向を調整できます。

例 1:

次の例は、デフォルトでの行、配置、コンテンツの開始位置を含むフレックス方向を示しています。

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks

出力：

出力には、CSS トリックを使用したフレックスボックスが表示されます。

例 2:

次の例は、行を反転したフレックス方向を示しており、内容はデフォルトで開始位置を示しています。逆の行は、水平方向に配置された終了から開始のタグを示しています。

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row-reverse; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks

出力：

出力には、CSS トリックを使用したフレックスボックスが表示されます。

例 3:

次の例は、列、配置、およびデフォルトの開始位置を含むコンテンツを含むフレックス方向を示しています。この列には、開始から終了までのタグが垂直方向に配置されて表示されます。

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: column; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 10px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks

出力：

Pythonのsは何ですか

出力には、CSS トリックを使用したフレックスボックスが表示されます。

例 4:

次の例は、列を逆にしたフレックス方向を示し、デフォルトで開始位置での配置を示しています。列の反転には、垂直方向に配置された終了から開始のタグが表示されます。

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: column-reverse; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 10px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks

出力：

出力には、CSS トリックを使用したフレックスボックスが表示されます。

フレックスアライメントのコツ

フレックスは、CSS トリックまたはプロパティを使用して配置とコンテンツの位置を使用します。

構文：

次の構文では、フレックスボックスの配置に CSS トリックを使用します。

for ループの種類

 display: flex | inline-flex; flex-direction: row | row-reverse | column | column-reverse; align-self: flex-start | flex-end | center | baseline | stretch; justify-content: start | end | center | space-between | space-around | space-evenly;

説明：

コンテナまたは要素に対してデフォルトで flex を使用した表示を使用できます。
フレックスボックスの配置は、開始、終了、中央、およびその他の CSS トリック値で設定されます。
コンテンツは、「justify-content」プロパティを使用してフレックスボックスに設定されます。

例

次の例は、さまざまな値を使用したコンテンツとフレックスボックスの位置を示しています。

例 1:

次の例は、行の flex-direction、末尾の位置揃え、および終了位置で表示される justify-content を示しています。

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: end; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks

出力：

出力には、CSS トリックを使用したフレックスボックスが表示されます。

例 2:

フレックスボックスは、justify-content プロパティを使用してコンテナを中央の位置に表示します。

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; flex-direction: row-reverse; align-self: flex-end; justify-content: center; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks

出力：

出力には、CSS トリックを使用したフレックスボックスが表示されます。

例 3:

フレックスボックスは、justify-content プロパティを使用して、タグの周囲にスペースを入れたコンテナを表示します。

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: space-around; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks

出力：

出力には、CSS トリックを使用したフレックスボックスが表示されます。

例 4:

フレックスボックスは、justify-content プロパティを使用して、タグの周囲にスペースを入れたコンテナを表示します。プロパティのインラインフレックス値を使用して表示を使用できます。

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: inline-flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: space-around; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks

出力：

出力には、CSS トリックを使用したフレックスボックスが表示されます。

Flexbox マージンの CSS トリック

CSS プロパティを使用して、Flexbox とその子ボックスにマージンとパディングを設定できます。基本的なフレックスボックス CSS トリックとその値を表示ボックスに設定できます。その後、CSS プロパティを追加して、フレックスボックスの子要素のマージンを設定します。

Javaでのintからstringへの変換

構文

次の構文は、フレックスボックスの子要素でマージンを設定するために使用されます。

 Parent_element{ Display: flex; } Child_element{ margin: CSS_VALUE; CSS_property : value; }

例

次の例では、子要素で CSS トリックを使用してマージンとデザインを設定します。

例 1:

次の例では、フレックスボックスコンテナの最初の要素のマージンとパディングを設定します。必要な値に合わせてマージン値、フォントサイズ、背景色を設定できます。

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers &gt; div:first-child { background-color: red; margin: 20px; padding: 30px; font-size: 25px; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> The first child of flexbox set with different CSS tricks </p> CSS Flex Tricks

出力：

出力には、最初の要素のマージンが表示されます。

例 2:

次の例では、フレックスボックスコンテナーの 3 番目の要素のマージンとパディングを設定します。さまざまな背景色で margin-auto の値を設定できます。

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers &gt; div:last-child { background-color: yellow; margin-left: auto; padding: 10px; font-size: 25px; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> the last child of flexbox set with different CSS tricks </p> CSS Flex Tricks

出力：

出力には、最初の要素のマージンが表示されます。

例 3:

次の例では、フレックスボックスコンテナの最後の要素のマージンとパディングを設定します。

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers &gt; .clip3{ background-color: orange; margin: auto; padding: 10px; font-size: 25px; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> the last child of flexbox set with different CSS tricks </p> CSS Flex Tricks Study

出力：

出力には、最初の要素のマージンが表示されます。

結論

CSS トリックでは、プロパティとその値を使用してフレックスボックスのデザインを設定します。複数のデザインとトリックを使用して、CSS フレックスボックスの必要な形式を取得できます。