CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3フレキシブルボックスレイアウト（Flexbox）の基本と使い方

CSS3には「フレキシブルボックス（Flexible Box）」と呼ばれるレイアウトモードが用意されており、一般的にFlexbox（フレックスボックス）として知られています。Flexboxを活用すれば、複雑なWebアプリケーションやWebページのレイアウトも、従来のfloatやpositionを使った手法に比べて、はるかに簡単かつ柔軟に構築できます。

Flexboxは「コンテナ（親要素）」と「フレックスアイテム（子要素）」で構成されます。コンテナに指定できる主なプロパティは以下のとおりです。

  • flex-direction：アイテムが並ぶ方向（主軸の向き）を指定します
  • flex-wrap：アイテムの折り返しの有無を指定します
  • flex-flow：flex-directionとflex-wrapをまとめて指定できるショートハンドプロパティです
  • justify-content：主軸方向に沿ったアイテムの配置方法を指定します
  • align-items：交差軸方向に沿ったアイテムの配置方法を指定します
  • align-content：複数行に折り返された場合の交差軸方向の配置を指定します

以下は、CSS3のFlexboxを使ってフレキシブルなレイアウトを実現するサンプルコードです。複数のコンテナに異なるプロパティを組み合わせることで、それぞれの配置の違いが確認できます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: lightblue;
}
.container1 {
    align-self: flex-start;
    display: flex;
    background-color: rgb(71, 30, 255);
    width: 200px;
    margin: 20px;
}
.container1 > div,
.container2 > div,
.container3 > div,
.container4 > div {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 10px;
    font-size: 30px;
}
.container2 {
    display: flex;
    background-color: rgb(14, 126, 79);
    width: 200px;
    justify-content: center;
    align-self: flex-start;
    margin: 20px;
}
.container3 {
    display: flex;
    flex-direction: column;
    background-color: rgb(168, 60, 10);
    width: 200px;
    align-items: center;
    margin: 20px;
}
.container4 {
    background-color: rgb(26, 10, 168);
    width: 200px;
    margin: 20px;
}
</style>
</head>
<body>
<h1>Flex layout example</h1>
<div class="container">
<div class="container1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のように表示されます。

CSS3フレキシブルボックスレイアウト（Flexbox）の基本と使い方

  1. CSS3のFlexbox（フレックスボックス）レイアウトを徹底解説

    Flexboxとは？ CSS3には「Flexible Box」、通称Flexbox（フレックスボックス）と呼ばれるレイアウトモードが用意されています。Flexboxを活用することで、これまではfloatやpositioningなどのテクニックを駆使しなければ実現できなかった、複雑なWebアプリケーションやWebページのレイアウトを、シンプルな記述で簡単に構築できるようになります。 Flexboxは「フレックスコンテナ」と「フレックスアイテム」という2つの要素で構成されます。display: flex; を指定した要素がコンテナとなり、その直下の子要素が自動的にフレックスアイテムとして扱われます

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ