CSS Flex 레이아웃 공간 - 마지막 행 사이 왼쪽 정렬-CSS 튜토리얼-php.cn

CSS Flex 레이아웃 공간 - 마지막 행 사이 왼쪽 정렬

Guanhui

풀어 주다： 2020-07-21 12:48:29

원래의

5424명이 탐색했습니다.

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가 중간이 아닌 끝에 있다는 것을 알 수 있습니다

justify-content를 space-between으로 설정했기 때문에 이는 welting을 의미합니다. 양쪽

이때 가장 바깥쪽 p에 의사 요소를 설정할 수 있으며 너비는 내부 p의 너비와 동일합니다.

CSS는 두 줄만 필요합니다

.main:after {
    content: "";
    width: 100px;
}

로그인 후 복사

이제 효과를 살펴보겠습니다.

사실 원리는 마지막 의사요소가 그를 압도했습니다

9개 있어도 상관없습니다 키가 0이니까 아래 사진을 보세요↓

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

CSS Flex 레이아웃 공간 - 마지막 행 사이 왼쪽 정렬