Flex의 사용에 대한 포괄적인 이해

1. flex를 사용하여 다른 div 내에서 가로 및 세로 중앙에 div를 배치할 수 있습니다.

예: html 코드:

<div class="container">
    <div class="box">
 
    </div>
    </div>

css 코드:

.container{
    width:600px;
    height:400px;
    border:1px solid blue;
    display: flex;
    justify-content:center;
    align-items:center;
    }
    .box{
    width:200px;
    height:100px;
    border:1px red solid;

ps: 이렇게 하면 가로 및 세로 중앙에 배치할 수 있습니다.

2. flex의 속성

<div class="items">
    <div class="item">1</div>
    <div class="item">23</div>
    <div class="item">4</div>
    </div>

항목에 쓸 수 있는 속성은 6가지가 있습니다:

•flex-direction
•flex-wrap
•flex -flow
•justify-content
•align-items
•align-content

항목에 쓸 수 있는 항목은 6개입니다:

•order//this 해당 항목의 순서를 변경하려면 해당 항목에 이 속성을 부여하세요.
•flex-grow
•flex-shrink
•flex-basis
•flex
• align-self

위 내용은 모두 flex의 사용법을 이해하기 위해 편집자가 가져온 내용입니다. PHP 중국어 사이트에 많은 지원 부탁드립니다~

flex의 사용법을 제대로 이해하기 위한 더 많은 관련 글 PHP 중국어 홈페이지를 주목해주세요!