CSS3 が柔軟なレイアウトを実装する方法の詳細な説明-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3 が柔軟なレイアウトを実装する方法の詳細な説明

青灯夜游

Jul 11, 2020 pm 04:33 PM

css3 flexbox 柔軟なレイアウト

CSS3 が柔軟なレイアウトを実装する方法の詳細な説明

1. CSS3 フレキシブルボックス

フレキシブルボックスは、CSS3 の新しいレイアウトモードです。

CSS3 フレキシブルボックス (フレキシブルボックスまたはフレックスボックス) は、ページがさまざまな画面サイズやデバイスの種類に適応する必要がある場合に、要素が適切に動作するようにするレイアウト方法です。

フレキシブルボックスレイアウトモデルを導入する目的は、コンテナ内のサブ要素に空きスペースを配置、整列、割り当てるためのより効率的な方法を提供することです。

2. ブラウザのサポート

表内の数字は、この属性をサポートする最初のブラウザのバージョン番号を示します。

数字の直後にある -webkit- または -moz- は、指定されたブラウザーのプレフィックスです。

#属性##基本サポート (単一行フレックスボックス)複数行フレックスボックス


29.0 21.0 -webkit-	11.0	22.0 18.0 -moz-	6.1 -webkit-	12.1 -webkit-
29.0 21.0 -webkit-	11.0	28.0	6.1 -webkit-	17.0 15.0 -webkit- 12.1

#3. CSS3 フレキシブルボックスの内容

フレキシブルボックスは、フレキシブルコンテナ (Flex コンテナ) とフレキシブルサブ要素で構成されます。 (フレックス項目) 。

フレキシブルコンテナは、display プロパティの値を flex または inline-flex に設定することによって、フレキシブルコンテナとして定義されます。

フレキシブルコンテナには、1 つ以上のフレキシブルサブ要素が含まれています。

注: フレキシブルコンテナの外側とフレキシブルサブ要素の内側は通常どおりレンダリングされます。フレックスボックスは、フレックス子要素がフレックスコンテナ内でどのようにレイアウトされるかを定義するだけです。

フレキシブルサブ要素は通常、フレキシブルボックス内に 1 行で表示されます。デフォルトでは、コンテナーごとに 1 行のみが存在します。

次の要素は、左から右に一列に表示されたエラスティック子要素を示しています:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FLEX</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 1200px;
            height: 640px;
            background-color: lightsteelblue;
        }
        .flex-container .flex-item {
            width: 320px;
            height: 240px;
            margin: 10px;
            background-color:lightsalmon;
        }
    </style>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

ログイン後にコピー

CSS3 が柔軟なレイアウトを実装する方法の詳細な説明

4. CSS3 フレキシブルボックス一般的に使用される属性

属性説明# #flex -directionフレキシブルコンテナ内の子要素の配置を指定しますフレキシブルコンテナの子要素をラップするかどうかを設定します親コンテナを超える場合のフレキシブルボックスflex-direction および flex-wrap の略語フレックスボックス要素の横軸（縦軸）方向の配置を設定します動作を変更しますflex-wrap 属性の、align-items と同様ですが、子要素の配置を設定する代わりに、行の配置を設定しますフレキシブルボックス要素の主軸（横軸）方向の位置合わせ

flex-wrap

flex-flow

align-items

align-content

justify-content

1. flex-direction 属性

决定项目的方向。

注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

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

ログイン後にコピー

CSS3 が柔軟なレイアウトを実装する方法の詳細な説明

属性值

值	描述
row	默认值。元素将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	元素将垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。

2. flex-wrap 属性

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

值	描述
nowrap	默认值。规定元素不拆行或不拆列。
wrap	规定元素在必要的时候拆行或拆列。
wrap-reverse	规定元素在必要的时候拆行或拆列，但是以相反的顺序。

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

ログイン後にコピー

可以取三个值：

（1） nowrap (默认)：不换行。

CSS3 が柔軟なレイアウトを実装する方法の詳細な説明

（2）wrap：换行，第一行在上方。

CSS3 が柔軟なレイアウトを実装する方法の詳細な説明

（3）wrap-reverse：换行，第一行在下方。

CSS3 が柔軟なレイアウトを実装する方法の詳細な説明

3. flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.flex-container { flex-flow: <flex-direction> <flex-wrap> }

ログイン後にコピー

4. align-items属性

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

值	描述
stretch	默认值。项目被拉伸以适应容器。
center	项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
baseline	项目位于容器的基线上。

1CSS3 が柔軟なレイアウトを実装する方法の詳細な説明

5. justify-content属性

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器的中心。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

1CSS3 が柔軟なレイアウトを実装する方法の詳細な説明

五、弹性子元素属性

属性	描述
order	设置弹性盒子的子元素排列顺序。
flex-grow	设置或检索弹性盒子元素的扩展比率。
flex-shrink	指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-basis	用于设置或检索弹性盒伸缩基准值。
flex	设置弹性盒子的子元素如何分配空间。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。

1. order属性

.flex-container .flex-item { order: <integer>; }

ログイン後にコピー

：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

1CSS3 が柔軟なレイアウトを実装する方法の詳細な説明

2. flex-grow属性

.flex-container .flex-item { flex-grow: <integer>; }

ログイン後にコピー

：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

1CSS3 が柔軟なレイアウトを実装する方法の詳細な説明

3. flex-shrink属性

.flex-container .flex-item { flex-shrink: <integer>; }

ログイン後にコピー

：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

1CSS3 が柔軟なレイアウトを実装する方法の詳細な説明

4. flex-basis属性

.flex-container .flex-item { flex-basis: <integer> | auto; }

ログイン後にコピー

：一个长度单位或者一个百分比，规定元素的初始长度。

auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。

5. flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

.flex-container .flex-item {
flex:flex-grow flex-shrink flex-basis|auto|initial|inherit;
}

ログイン後にコピー

值	描述
flex-grow	一个数字，规定项目将相对于其他元素进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他元素进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。
inherit	从父元素继承该属性。

6. align-self属性

.flex-container .flex-item {
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
}

ログイン後にコピー

值	描述
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch	元素被拉伸以适应容器。
center	元素位于容器的中心。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的结尾。
baseline	元素位于容器的基线上。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

1CSS3 が柔軟なレイアウトを実装する方法の詳細な説明

取值同 align-items。

参考

本文转载自：https://www.jianshu.com/p/5856c4ae91f2

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7505

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

CSS レイアウトプロパティの最適化のヒント: 位置スティッキーとフレックスボックス Oct 20, 2023 pm 03:15 PM

CSS レイアウト属性の最適化のヒント:positionsticky と flexbox Web 開発において、レイアウトは非常に重要な側面です。優れたレイアウト構造により、ユーザーエクスペリエンスが向上し、ページがより美しく、ナビゲートしやすくなります。 CSS レイアウトプロパティは、この目標を達成するための鍵となります。この記事では、一般的に使用される 2 つの CSS レイアウトプロパティ最適化手法、positionsticky と flexbox を紹介し、具体的なコード例を示します。 1. ポジション

H5の位置属性の柔軟な応用スキル Dec 27, 2023 pm 01:05 PM

H5 でposition 属性を柔軟に使用する方法. H5 開発では、要素の配置とレイアウトが関係することがよくあります。このとき、CSS の位置プロパティが機能します。 Position 属性は、相対配置、絶対配置、固定配置、スティッキー配置など、ページ上の要素の配置を制御できます。この記事では、H5開発においてposition属性を柔軟に活用する方法を詳しく紹介します。

HTMLでdivを中央に配置する方法 Apr 05, 2024 am 09:00 AM

HTML で div を中央に配置するには 2 つの方法があります: text-align 属性 (text-align: center) を使用します: より単純なレイアウトの場合。柔軟なレイアウト (Flexbox) を使用する: より柔軟なレイアウト制御を提供します。手順には、親要素で Flexbox (表示: flex) を有効にすることが含まれます。 div を Flex アイテム (flex: 1) として設定します。縦方向と横方向の中央揃えには、align-items プロパティと justify-content プロパティを使用します。

CSS Flex レイアウトを使用して同じ高さの列レイアウトを実現する方法 Sep 27, 2023 pm 03:17 PM

CSS Flexible Layout を使用して同じ高さの列レイアウトを実装する方法 CSS Flexible Box Layout (CSS FlexibleBox Layout) は、Flex レイアウトと呼ばれ、ページレイアウトに使用されるモジュールです。フレックスレイアウトを使用すると、同じ高さの列レイアウトを簡単に実装できるため、コンテンツの高さに関係なく同じ高さで列を表示できます。この記事では、CSSFlex レイアウトを使用して、同じ高さの列レイアウトを実現する方法を紹介します。以下に具体的なコード例を示します。 HTML 構造: &

CSS Flex レイアウトを使用して不規則なグリッドレイアウトを実装する方法 Sep 28, 2023 pm 09:49 PM

CSSFlex エラスティックレイアウトを使用して不規則なグリッドレイアウトを実装する方法。Web デザインでは、ページのセグメント化とレイアウトを実現するためにグリッドレイアウトを使用する必要があることがよくあります。通常、グリッドレイアウトは規則的で、各グリッドは同じサイズです。場合によっては、実装が必要になる場合があります。不規則なグリッドレイアウト。 CSSFlex エラスティックレイアウトは、不規則なグリッドレイアウトを含むさまざまなグリッドレイアウトを簡単に実装できる強力なレイアウト方法です。以下では、CSSFlex エラスティックレイアウトを使用してさまざまな方法を実現する方法を紹介します。

CSS フレキシブルレイアウトプロパティのガイド: 位置スティッキーとフレックスボックス Oct 27, 2023 am 10:06 AM

CSS フレキシブルレイアウトプロパティのガイド:positionsticky と flexbox フレキシブルレイアウトは、現代の Web デザインにおいて非常に人気のある便利なテクニックとなっています。これは、Web ページがさまざまなデバイスや画面サイズで適切に表示および応答できるように、適応型 Web ページレイアウトを作成するのに役立ちます。この記事では、position:sticky と flexbox という 2 つの柔軟なレイアウトプロパティに焦点を当てます。具体的なコード例を使用して、その使用法について詳しく説明します。

HTML チュートリアル: Flexbox を使用して等高さ、等幅、等間隔のレイアウトを適応させる方法 Oct 27, 2023 pm 05:51 PM

HTML チュートリアル: Flexbox を使用して等高さ、等幅、等間隔のレイアウトを適応させる方法、特定のコード例が必要ですはじめに: 最新の Web デザインでは、レイアウトは非常に重要な要素です。大量のコンテンツを表示する必要があるページでは、要素の位置や大きさをいかに合理的に配置し、視認性や使いやすさを実現するかが重要な課題となります。 Flexbox (フレキシブルボックスレイアウト) は、さまざまな柔軟なレイアウトのニーズを簡単に実現できる非常に強力なツールです。この記事ではFlexboxについて詳しく紹介します

CSS Flex レイアウトを使用してウォーターフォールフローレイアウトを実装する方法 Sep 27, 2023 pm 04:22 PM

CSSFlex エラスティックレイアウトを使用してウォーターフォールフローレイアウトを実装する方法 Web デザインの継続的な開発により、ウォーターフォールフローレイアウトは非常に人気のあるページレイアウト方法になりました。従来のグリッドレイアウトとは異なり、ウォーターフォールフローレイアウトは画面サイズに適応でき、独特の流れの感覚を表現できます。この記事では、CSSFlex エラスティックレイアウトを使用してウォーターフォールフローレイアウトを実装する方法と、具体的なコード例を紹介します。 CSSFlex エラスティックレイアウトは、次のような機能を適用する強力なレイアウトモデルです。

See all articles

CSS3 が柔軟なレイアウトを実装する方法の詳細な説明

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック