코드와 효과를 먼저 살펴보세요
<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이니까 아래 사진을 보세요↓
추천 튜토리얼: "CSS Tutorial"
위 내용은 CSS Flex 레이아웃 공간 - 마지막 행 사이 왼쪽 정렬의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
