CSS Flex レイアウトスペース - 最終行間の左揃え-CSSチュートリアル-php.cn

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

Guanhui

リリース： 2020-07-21 12:48:29

オリジナル

5488 人が閲覧しました

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 サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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

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

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