検索
ホームページウェブフロントエンドCSSチュートリアルCSS3 での Flexbox レイアウトのグラフィック コードとテキスト コードの共有

CSS3 は、スケーラブルで柔軟な Webページ レイアウトメソッド フレックスボックス レイアウトを提供し、非常に強力な機能を備えており、多くの複雑なレイアウトを簡単に実装できます。レイアウトの割合が多く、コード量が多くてわかりにくい。 フレックスボックス レイアウトをよりよく理解するために、最初に紹介するいくつかの概念を以下に示します。

表示されている場合:

(1) 主軸 (横軸)、スケーラブルなコンテナが水平方向と垂直方向に配置されます。フレックスボックス レイアウト このコンテナ内のスケーラブルなアイテムを水平方向に拡張可能にしたい場合は、水平方向が主軸、垂直方向が副軸になります。その逆;

(2) 主軸(側軸)の長さ どちらが主軸でどちらが側軸であるかを決定した後、主軸方向の格納式コンテナのサイズ(幅または高さ)を呼びます。主軸の長さ (横軸方向のコンテナのサイズ (幅または高さ)) を横軸の長さと呼びます

(3) 主軸 (横軸) の始点と終点。たとえば、主軸の方向は水平方向であり、通常、Web ページのレイアウトは水平方向に左から右に配置され、スケーラブル コンテナの左側の境界になります。は主軸の始点、右側の境界線は主軸の終点、側軸は垂直方向、通常は上から下にあるため、上の境界線が側軸の始点になります。下の境界線は横軸の終点です。

(4) フレキシブル コンテナ: スケーラブルなボックスを構築したい場合は、これらのスケーラブルな項目を display:flex

attribute

box でラップする必要があります。はスケーラブル コンテナと呼ばれます。( 5) フレキシブル プロジェクト: フレキシブル レイアウトを必要とするフレキシブル コンテナに含まれる要素は、フレキシブル プロジェクトと呼ばれます。上記の概念を明確にした後、フレックスボックス レイアウトを構築できます。フレックスボックス コンテナを構築し、コンテナ内に配置します。 以下のように、その中にスケーラブルなアイテムをいくつか配置します。

CSS コード:

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
        }.flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;        }

HTML コード:

<p class="flex-container">
       <p class="flex-item ">A</p>
       <p class="flex-item ">B</p>
       <p class="flex-item ">A</p>
       <p class="flex-item ">B</p>
   </p>

効果は次のとおりです:

スケーラブルなアイテムは水平方向に一列に配置され、同時にスケーラブルなアイテムは左に整列します。

display: flex は、このコンテナがスケーラブルなコンテナであることを意味し、inline- の値を取ることもできます。 flex の違いは、前者はコンテナをブロックレベル要素としてレンダリングし、後者は

インライン要素

としてレンダリングすることです。

ここにはいくつかのデフォルト属性がありますが、設定されていませんが、デフォルト値は機能します: flex-direction

属性、その値はrow、column、column-reverseです。 、row-reverse、デフォルト値は row です。これは、スケーラブルな項目を水平方向に拡張することを意味します。column を使用する場合、Column-reverse と row-reverse は反対方向に拡張することを意味します。平たく言えば、flex-direction 属性はスピンドル側の軸の方向を定義するために使用されます。

上記の効果に flex-direction を追加します: 列の効果は次のとおりです:

justify-content 属性は、主軸方向のスケーラブルな項目の配置を示すために使用されます。 flex-start、flex-end、center、space-between、space-around です。ここで、flex-start、flex-end は主軸の始点と終点を基準にして整列することを意味し、center は中央に整列することを意味します。 space-between は両端を揃えて残りのスペースを主軸方向に移動することを意味します 均等に分配すること、space-around は中心を揃えて残りのスペースを主軸方向に均等に分配することを意味します

justify-content:space-between

CSS コード:

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-between;
        }.flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;
        }
効果は次のとおりです:

個別に分割されることがわかります。 スケーラブルなアイテムが主軸方向の両端に整列し、残りのスペースを均等に分割します。 -content:space-around

CSS コード:

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
        }.flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;
        }

効果は次のとおりです:

この属性により、スケーラブルなアイテムが許可されることがわかります。主軸に沿って中心に配置され、残りのスペースが均等に分散されます。

align-items

属性: この属性は、横軸方向のスケーラブルな項目の配置を示すために使用されます。可能な値は、flex-start、flex-end、center、baseline、stretch です。説明が必要なものです。はベースライン値であり、計算されたベースラインに基づいてこれらのアイテムをこのベースラインに沿って配置します。ベースラインの計算は、次のように、スケーラブルなアイテムのサイズと内容によって異なります。 CSSコード:

.flex-container{
            display:flex;     
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;;        }
        .a{
            margin-top: 10px;
            height: 100px;
        }
        .b{
            margin-top: 20px;
            height: 150px;
        }
        .c{
            margin-top: 30px;
            height: 80px;
        }

HTML代码:

 <p class="flex-container">
       <p class="flex-item a">A</p>
       <p class="flex-item b">B</p>
       <p class="flex-item c">A</p>
       <p class="flex-item a">B</p>
   </p>

效果如下:

可以看到四个可伸缩项目在侧轴方向上(垂直方向)高度不一,margin不一样,但是最后都按照计算出来的一个基准线对齐;

align-items:stretch;

这个是取值会让可伸缩项目在侧轴方向上进行拉伸,前提是这些项目在侧轴方向上没有设置尺寸,否则会按照你设置的尺寸来渲染。

css代码:

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:stretch;
        }
        .flex-item{
            background-color:blue;
            width: 100px;            /*height: 100px;*/
            margin: 5px;;        }

 HTML代码:

<p class="flex-container">
       <p class="flex-item ">A</p>
       <p class="flex-item ">B</p>
       <p class="flex-item ">A</p>
       <p class="flex-item ">B</p>
   </p>

效果如下:

 可以看到这些可伸缩项目在侧轴方向上被拉伸了,因为在垂直方向上没有设置高度。

到目前为止,我们所有的伸缩项目都是在一行或者一列上进行的,并没有进行换行和换列,flex-wrap属性表示是否支持换行或者换列,它有nowrap,wrap,wrap-reverse三个取值,nowrap是默认值,表示不换行或者换列,wrap表示换行或者换列,wrap-reverse表示支持换行或者换列,但是会沿着相反方向进行排列(如主轴是垂直方向换行后就按照先下后上的顺序来排列伸缩项)

css代码:

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-wrap: wrap;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;        }

HTML代码:

<p class="flex-container">
    <p class="flex-item ">A</p>
    <p class="flex-item ">B</p>
    <p class="flex-item ">A</p>
    <p class="flex-item ">B</p>
    <p class="flex-item ">A</p>
    <p class="flex-item ">B</p>
    <p class="flex-item ">A</p>
    <p class="flex-item ">B</p></p>

效果如下:

可以看到伸缩项增多之后一行难以放下的时候会接着换行。wrap属性保证换行后按照正常的从上到下顺序排列

align-content属性用来表示换行之后各个伸缩行的对齐方式,它的取值有 stretch,flex-start,flex-end,center,space-between,space-around,意义和align-items属性取值意义相同,上面我们将7个伸缩项目分成了两行来排列,

将css代码添加align-content属性,html代码不变,如下

CSS代码:

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-wrap: wrap;
            align-content: space-between;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;        }

效果如下:

可以看到两个伸缩行在侧轴(垂直)方向上两端对齐了。

flex-flow属性,该属性是个复属性,它是flex-direction和flex-wrap的复合属性,flex-direction:row;flex-wrap:wrap就等同于flex-flow:row wrap

order属性该属性用来表示伸缩项目的排列方式,正常情况下伸缩项目会按照主轴起点到主轴终点排列,遇到换行或者换列会按照从侧轴起点到终点进行排列(除非设置了某些 对齐方式的reverse),但是某些情况下这种默认显示顺序不符合要求,可以采用给伸缩项添加order属性来指定排列顺序,默认情况下,每个伸缩项的order都是0,改属性可正可负,越大的值会被排列在越后面。

css代码:

 .flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;    
            flex-flow: row wrap;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;        }
        .order1{
            order:1;
        }
        .order2{
            order:2;
        }

HTML代码:

<p class="flex-container">
    <p class="flex-item order1">1</p>
    <p class="flex-item  order2">2</p>
    <p class="flex-item ">3</p>
    <p class="flex-item ">4</p>
    <p class="flex-item ">5</p>
    <p class="flex-item ">6</p>
    <p class="flex-item ">7</p>
    <p class="flex-item ">8</p></p>

效果如下:

默认情况下,会按照HTML的顺序1-8进行显示,但是由于给p1和2设置了大于0的order,所以他们被放在了最后显示(因为其他没有被设置的p的order默认属性都是0)

margin属性在flexbox布局中有很强大的作用,如果给某个可伸缩项设置某个方向上的margin为auto,那么这个可伸缩项就会在这个方向上占用该方向的剩余空间来作为自己的这个方向上的margin。

css代码:

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-flow: row wrap;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;        }
        .a{
            margin-right:auto;
        }

HTML代码:

<p class="flex-container">
    <p class="flex-item a">1</p>
    <p class="flex-item  ">2</p>
    <p class="flex-item ">3</p></p>

效果如下:

由于给伸缩项1添加了margin-right为auto,所以它独占了本行的剩余空间作为它的right margin值。

利用这个特性,我们在flexbox布局中很容易实现可伸缩元素的垂直水平居中,

css代码;

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-flow: row wrap;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;        }
        .a{
            margin:auto;
        }

 HTML代码:

<p class="flex-container">
    <p class="flex-item a">1</p></p>

效果如下:

align-self属性,该属性是给各个可伸缩项设置自己的在侧轴上的对齐方式的,之前在容器上设置的align-item属性是作为一个整体设置的,所有的元素对齐方式都一样,align-self属性会覆盖之前的align-item属性,让每个可伸缩项在侧轴上具有不同的对齐方式,取值和align-item相同:

css代码:

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;        }
        .a{
            align-self:flex-start ;
        }
        .b{
            align-self:flex-end;
        }
        .c{
            align-self:center;
        }

html代码:

<p class="flex-container">
    <p class="flex-item a">1</p>
    <p class="flex-item  b">2</p>
    <p class="flex-item c">3</p></p>

效果如下:

可以看到三个伸缩项在侧轴上被赋予了不同的对齐方式。

flex属性,这个属性是加在伸缩项上面的,它定义了伸缩项如何分配主轴尺寸,通常取值为auto或者数字,auto浏览器会自动均分,数字会按照伸缩项所占的数字比重来分配空间,

这个属性会覆盖伸缩项在主轴上设定的尺寸,当给主轴上伸缩项设定了尺寸(宽或高)和这个属性的时候,事实上还是会按照这个属性来进行空间分配。

css代码:

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;        }
        .a{
            align-self:flex-start ;
            flex:1;
        }
        .b{
            align-self:flex-end;
            flex:2;
        }
        .c{
            align-self:center;
            flex:1;
        }

HTML代码:

<p class="flex-container">
    <p class="flex-item a">1</p>
    <p class="flex-item  b">2</p>
    <p class="flex-item c">3</p></p>

效果如下:

可以看到伸缩项尽管设置了宽度,但是最终还是按照我们设置的flex比例对水平空间进行了分割。

以上がCSS3 での Flexbox レイアウトのグラフィック コードとテキスト コードの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
cohost.orgの失われたCSSトリックcohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AM

この投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。

カーソルの次のレベルCSSスタイリングカーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee&#039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますUI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか?微笑んでいますか?Apr 23, 2025 am 09:57 AM

まあ、SVG&#039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にあります「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう:サファリテクノロジーのプレビューにかなり着陸してください!しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますCSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind&#039;の@Apply機能は、響きよりも優れていますTailwind&#039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind&#039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター