コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS Flex レイアウト スペース - 最終行間の左揃え

CSS Flex レイアウト スペース - 最終行間の左揃え

Guanhui
リリース： 2020-07-21 12:48:29
オリジナル
5530 人が閲覧しました

CSS Flex レイアウト スペース - 最終行間の左揃え

最初にコードとエフェクトを見てみましょう

<style>
        .main {
            outline: 1px solid;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .main>p {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            background-color: lightgreen;
        }
        
    </style>
    <body>
        <p class="main">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            <p>7</p>
            <p>8</p>
        </p>
    </body>
ログイン後にコピー

最後の p が中央ではなく、次の位置にあることがわかります。 the end

justify-content を space-between に設定しているため、両側を連結することを意味します

このとき、最も外側の p に疑似要素を設定でき、その幅は内部の p の幅と同じです。わかりました

必要な css は 2 行だけです

.main:after {
    content: "";
    width: 100px;
}
ログイン後にコピー

この時点での効果を見てください

実際には、最後の疑似要素で Squeezed over を配置するのが原則です。

9 人がいても、身長が 0 であるため、影響はありません。下の図を参照してください↓

推奨チュートリアル: 「 CSS チュートリアル >>

以上がCSS Flex レイアウト スペース - 最終行間の左揃えの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
flex
ソース：jb51.net
前の記事：シームレスなスクロールのための CSS Flex レイアウト 次の記事：CSSでの@の使い方を詳しく解説
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
Boostrap 4 に対応するようにこれらのカードを調整するにはどうすればよいですか? 各行に 4 枚のカードを表示し、画面サイズが変更された場合にそれらを重ねて表示するにはどうすればよいですか。理想的には、それらの間にある程度のスペースがある必要があります。研究でき...
から 2024-04-05 10:48:45
0
1
4072
DIV を両側のコンテンツに合わせて中央揃えにします したがって、(含まれる DIV 内に) 5 つの項目があります。項目の並びは以下の通りです。 テキスト 画像 DIV 画像 テキスト DIVを中心にして画像がDIVを「抱き締める」...
から 2024-04-04 23:19:14
0
1
3438
モバイル サイズの画面で段落を左側に移動するための CSS および HTML メソッド 通常の 16:9 のコンピュータ画面では、左側にテキスト、右側に画像が表示され、完璧に見えます。ただし、小さい画面 (携帯電話サイズの画面など) では、希望どおりに段落の上に画像が...
から 2024-04-04 20:25:22
0
1
330
フォームからオプションを選択するときに画像の不透明度を変更する 値 1 (MasterCard) のオプションを選択したときに、idMaster の画像の不透明度を 1 に変更するにはどうすればよいですか?それを、それぞれ独自の ID を持つこ...
から 2024-04-03 23:00:48
0
2
304
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート