CSSとHTMLにおけるFlexbox（チュートリアル） - レスポンシブなレイアウトを開発する

CSSとHTMLのFlexboxコースであなたを待っています。

Flexbox-Layoutとは何ですか、そしてなぜ使用すべきですか？

ここにプロジェクトが設立され、その後に作業が行われます。

ここでは、VS Codeに統合されたMS Edgeツールを使用したサンプル構造とデバッグ機能を紹介します。 また、このビデオでは初めてFlexboxレイアウトが有効化され、方向が設定されます。

Flexbox レイアウトでスペースを均等にまたは特定の比率で分割する方法はありますか？

ちょっとした（シンプルな）数学を避けることができない小さな練習。

ここでは、幅に応じてレスポンシブに適合する、2つのサイドバーを持つ水平レイアウトを紹介します。

子要素は横軸に沿ってフレックスコンテナに配置されることができます。ここに、それがどのように設定されるかを示します。

コンテナだけでなく、align-selfを使用して個々の要素の配置を異なるように調整することもできます。

サイコロを使った個別の整列の練習です。

横軸に沿ってだけでなく、Flexコンテナ内での並べ替えをメイン軸に沿って行うこともできます。 ;-)

よく使われるレイアウトの主軸に沿った配置方法を示す小さな例。

柔軟性を持ちたい場合は、子要素のサイズを具体的な幅や高さから独立して指定する必要があります。幸いにも、これを達成するためのflex-basisプロパティがあります。 flex-directionを変更すると、幅が高さに、高さが幅に変わります。 

要素が指定された flex-basis よりもスペースが多い場合、どれだけ成長する必要がありますか？これは、 flex-grow を使用して適切に設定できます。

要素が指定されたflex-basisよりもスペースが少ない場合、要素はどれだけ縮むべきですか？これはflex-shrinkを使用して調整できます。 

子要素は、空きスペースが少ない場合に縮小するだけでなく、コンテナから折り返されることもあります。この動画でflex-wrapを使ってこれを制御する方法を紹介します。

flex-directionとflex-wrapは、flex-flowプロパティで組み合わせて指定できます。これは、flex-directionだけを設定したい場合でも意味があります、なぜならflex-flowの方が短いからです。;-)

flex-wrapの課題。

時には余白が必要ですが、それは人間の目にとって不快にならないようにするためです。幸運なことに、フレックスコンテナの子要素でこれを実現するCSSプロパティgapがあります。

順番は重要です、特にウェブインターフェースにおいては、使いやすいものであるべきです。順番は時に個別に設定する必要があり、DOM内の要素を移動することなく行うことがあります。そういった場合には、orderというCSSプロパティが非常に適していて、要素の表示順を簡単に変更できます。

順序の理解ができているかどうかをテストしてみましょう。ここには同じ結果を得るための2番目の方法さえありますが、きっとそれもわかるでしょう。

非常に頻繁に、要素や特にテキストを水平および垂直に中央揃えしたいときがあります。Flexbox以前は苦労でしたが、Flexboxを使えば簡単です。

3段組のレイアウトは誰もが知っています。これが利用可能なスペースに合わせて調整されている場合、レスポンシブデザインへの移行はほんの少しの距離です。

フォームのないウェブサイトがありますか？もしあれば、それは少数です。そのため、それらを魅力的に配置することは非常に重要ですが、幸いにもFlexboxを使用すれば問題ありません。

非常に頻繁に、入れ子レイアウトに遭遇しますが、Flexレイアウトを使用すれば、それらも大した課題ではありません。

現在、砂のようにたくさんのWebチャットクライアントがあり、それに加えてAIチャットボットがさらに追加されています。しかしFlexboxを使用してチャットをどのように実現できるのでしょうか？ このビデオで紹介します。

Web 2.0で、ほぼすべてのウェブサイトでギャラリーが見つかります。このビデオでは、Flexboxを使用してそのようなレイアウトを素晴らしく実装する方法を説明します。

今、Flexレイアウトに関するすべてが明確になるはずです。最後に、学ぶべきこと、行うこと、そして美しいCSSレイアウトの可能性について説明します。