CSS の Flex プロパティを理解する

紹介:

ウェブサイトのデザインはアートを作成することに似ています。絵画の配置が物語を語るのと同じように、ウェブサイトのレイアウトはそのメッセージをより多く伝えます。 Flexbox は、これを実現するための強力なツールです。

Flexbox が登場する前は、開発者はフローティング要素、マージン ハック、テーブル レイアウトなどのテクニックを使用してレスポンシブ デザインを作成する必要がありました。これらの方法は機能しましたが、拡張性がなく、さまざまな画面サイズに合わせて調整するために追加のメディア クエリが必要でした。

Flexbox は、コンテナ内で要素を整列、分散、サイズ変更するためのシンプルで効率的な方法を提供することで、この状況を変えました。

フレックスボックスとは何ですか?

Flexbox は、複雑なレイアウトを簡単に作成できるレイアウト モデルです。これにより、コンテナ内でアイテムを水平または垂直に整列させることができます。 Flexbox は 1 次元です。つまり、一度に 1 つの軸 (水平または垂直) に沿ってレイアウトを制御します。

1. 水平方向の配置: 項目を簡単に横に並べて行に配置できます。
2. 垂直配置: 列内の項目を配置します。

このブログでは、Flexbox の主要なプロパティと、それがレイアウト管理を簡素化する方法について詳しく説明します。

フレックスコンテナのプロパティ:

フレックス プロパティに入る前に、Flexbox の 2 つの軸を理解することが重要です。

1. 主軸
2. 交差軸

一部のプロパティでは項目が主軸に沿って配置され、他のプロパティでは項目が交差軸に沿って配置されるため、これらの軸を理解することが重要です。これを理解すると、プロパティがどのように機能するかをより深く理解できるようになります。

フレックス方向: 行 |コラム

フレックスボックスは、項目を行または列に配置することを目的としています。デフォルトでは、行に設定されています。

• 行: 項目を水平方向に整列します (デフォルト)。
• column: 項目を垂直方向に配置します。

<div style="display: flex; flex-direction: row;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

フレックスラップ: nowrap |ラップ |ラップリバース

フレックス項目を縮小するのではなく、次の行に折り返すことができます。デフォルトはnowrapです。

• nowrap: すべてのフレックス項目は 1 行に表示されます (デフォルト)。
• wrap: Flex 項目は、収まらない場合は次の行に折り返されます。
• wrap-reverse: Flex アイテムは逆方向にラップされます。

<div style="display: flex; flex-wrap: wrap;">
  <div class="box">Item 1</div>
  <div class="box">Item 2</div>
  <div class="box">Item 3</div>
</div>

justify-content: flex-start |フレックスエンド |中央 |間のスペース |スペースアラウンド |スペース均等

項目を主軸に沿って配置するために使用されます。 flex-direction: row の場合、x 軸が主軸で、y 軸が交差軸です。

• flex-start: 項目をコンテナーの先頭に揃えます。
• flex-end: 項目を最後に揃えます。
• center: 項目を中央に配置します。
• space-between: アイテムの間にスペースを入れて配布します。
• space-around: 周囲にスペースを設けてアイテムを配布します。
• space-evenly: アイテム間のスペースを均等に分配します。

<div style="display: flex; justify-content: space-between;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

align-items: flex-start |フレックスエンド |中央 |ストレッチ |ベースライン

項目を交差軸に沿って配置するために使用されます。 列フレックス方向の場合、y 軸が主軸であり、x 軸が交差軸です。

• flex-start: 項目を交差軸の開始位置に揃えます。
• flex-end: 項目を最後に揃えます。
• center: 項目を交差軸の中心に配置します。
• ストレッチ: コンテナを満たすようにアイテムを引き伸ばします。
• ベースライン: テキストのベースラインに基づいて項目を配置します。

<div style="display: flex; align-items: center; height: 200px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

フレックス項目プロパティ

align-self: flex-start |フレックスエンド |中央 |ストレッチ |ベースライン
align-self プロパティを使用すると、個々の子を交差軸に沿って整列させることができます。

<div style="display: flex; height: 200px;">
  <div style="align-self: flex-start;">Item 1</div>
  <div style="align-self: center;">Item 2</div>
  <div style="align-self: flex-end;">Item 3</div>
</div>

成長と縮小
知っておくべき 3 つのプロパティ: flex-grow、flex-shrink、および flex-basis。

flex-grow:

This property defines how much a flex item will grow relative to the other items inside a flex container when there is extra space available. By default, flex-grow is set to 0, meaning items won't grow beyond their natural size. Setting flex-grow: 1 allows the item to expand and occupy the remaining available space within the container.

If multiple items have flex-grow:1 applied, they will divide the extra space proportionally, based on the grow values set for each item.

Imagine a dashboard layout where you have a sidebar and a main content area. You want the sidebar to stay fixed in size, but the main content area should expand and take up the remaining space.

<div style="display: flex;">
  <div style="flex-grow: 0; width: 200px;">Sidebar</div> <!-- Fixed width sidebar -->
  <div style="flex-grow: 1;">Main Content Area</div> <!-- Expanding content area -->
</div>

flex-shrink:

When the container size reduces, items inside will also shrink proportionally.

For example, consider a profile card with a rounded image and a name. As the container shrinks, the image may distort, turning from a circle to an oval. To prevent this, you can set flex-shrink: 0, ensuring the image retains its original size while the rest of the content adapts.

<div style="display: flex;">
  <img src="profile.jpg" style="flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%;" alt="Profile Picture"> <!-- Image won't shrink -->
  <div style="flex-shrink: 1;">User Name</div> <!-- Name can shrink -->
</div>

While you might think of using min-width to achieve the same effect, flex-shrink is a more straightforward and flexible approach within the Flexbox algorithm.

• flex-grow controls how extra space is distributed among items.
• flex-shrink controls how space is reduced when the container size decreases.

flex-basis: Setting the Initial Size

The flex-basis property defines the initial size of a flex item. If the flex-direction is set to row, flex-basis controls the width of the items. If the flex-direction is column, it controls the height.

flex-basis is similar to the width or height properties, but with one key difference: it only sets the initial size, while allowing the item to grow or shrink depending on the available space and the flex-grow and flex-shrink values.

• If flex-basis is set to auto or content, the size of the item is based on its content.
• If you want to define a fixed starting size but still allow the item to grow or shrink, use flex-basis.

.child {
  flex-basis: 25%;  /* Starts at 25% width, but can grow to fill space */
  flex-grow: 1;     /* Will grow to take up more space if available */
}

In this example, the child element initially takes up 25% of the container’s width, but it can grow beyond that if there’s more space available.

Setting a fixed size:

If you want the item to have a fixed size (not grow or shrink), you can use the flex shorthand, like this:

.child {
  flex: 0 0 100px; /* No growth, no shrinking, stays fixed at 100px */
}

This shorthand breaks down as:

• 0 (flex-grow): The item will not grow.
• 0 (flex-shrink): The item will not shrink.
• 100px (flex-basis): The item has a fixed size of 100px.

Using width instead of flex-basis inside a flex layout can lead to issues sometimes.because the item defined with width and won't adjust if the container grows or shrinks, making the layout less responsive. So use it appropriately.

align-content:

We've already learned about flex-wrap. Flex-wrap allows flex items to wrap to the next lines instead of shrinking, right?

Each of these flex lines acts like a separate "mini flex container". We also know that the align-items property is used to align items on the cross axis. Here, this align-items property will work inside this flex line only, because as I mentioned, each line itself is a mini flex container. We also have an outer flex container, right? If we need to align these lines with respect to the outer container, we need one more property that aligns these flex lines on the cross axis. That property is align-content.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 300px;
}

.item {
  width: 30%;
  height: 50px;
  background-color: #3498db;
  margin: 5px;
}

In this example, we have a flex container with multiple items that wrap onto multiple lines. The align-content: center; property centers the wrapped lines along the container's cross-axis.

The possible values for align-content include:

• flex-start: Lines are aligned toward the start of the container.
• flex-end: Lines are aligned toward the end of the container.
• center: Lines are centered in the container.
• space-between: Lines are evenly distributed; the first line is at the start of the container while the last one is at the end.
• space-around: Lines are evenly distributed with equal space around each line.
• stretch (default): Lines stretch to take up the remaining space.

Gaps

The gap property was not available in earlier versions of Flexbox. Previously, developers relied on margin properties to create space between flex items. The introduction of the gap property marked a significant improvement in Flexbox functionality.

It provides a straightforward method for creating space between flex items, simplifying the layout process.

.flex-container {
  display: flex;
  gap: 10px; /* Adds a 10px gap between all flex items */
}

Auto margins

margin: auto:

Last but not least, a commonly used spacing trick

The margin: auto property in Flexbox is a powerful tool for aligning flex items. It automatically uses the leftover space around the item, making it useful for centering or pushing items to opposite sides of a container.

For example, you can use margin-left: auto to push an item to the right side of a flex container:

.flex-container {
  display: flex;
}

.push-right {
  margin-left: auto;
}

This technique allows for quick and easy alignment without the need for additional positioning properties.

Conclusion

In this guide, we explored how Flexbox has simplified the task of aligning and distributing items within a webpage. Flexbox isn't just a layout tool—it's a critical skill for any web developer aiming to create responsive, well-structured designs. I hope this guide has helped you understand the power of Flexbox.

Try these demos and feel free to share your thoughts or questions. Thanks!

以上がCSS の Flex プロパティを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。