CSS의 플렉스 레이아웃 단계 설명(코드 포함)

이 글의 내용은 CSS(코드 포함)의 flex elastic 레이아웃 단계에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

html：

nbsp;html>

    
        <meta>
        <meta>
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .wrap{
                width: 300px;
                height: 300px;
                display: flex;
                flex-direction: row; /*默认主轴方向水平向右*/
                flex-direction: row-reverse;  /*可选主轴方向水平向左*/ 
                /* flex-direction: column; */  /*可选主轴方向垂直向下*/
                /* flex-direction: column-reverse; */ /*可选主轴方向垂直向上*/
                
                flex-wrap: wrap;  /*默认侧轴方向与主轴垂直方向向下或者右*/
                /* flex-wrap: wrap-reverse; */ /*可选侧轴方向与主轴垂直方向向上或者左*/
            }
            .wrap div{
                background: skyblue;
                text-align: center;
                line-height: 100px;
                width: 100px;
                height: 100px;
                border: bisque 1px solid;
            }
        </style>
    
    
        <div>
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    

1단계: 첫 번째 설정 디스플레이: flex; 이는 flex elastic 레이아웃을 사용함을 의미합니다.

2단계: 주축 방향 설정
①flex-direction: row(기본 매개변수) 축 방향이 오른쪽으로 수평이면 결과는 다음과 같습니다.

②flex-direction: row-reverse (선택적 매개변수) 주축 방향은 왼쪽으로 수평이며 결과는 다음과 같습니다. :

③flex-direction: 컬럼; (선택적 매개변수) 매개변수 선택) 주축 방향이 수직 방향으로 아래쪽을 향하고 있어 결과는 직접 추측 가능합니다. : column-reverse; (선택적 매개변수) 주축 방향은 수직 위쪽이며 마찬가지입니다

3단계: 측면 축 방향 설정

①flex-wrap: 기본 측면 축 방향은 아래쪽 또는 오른쪽 수직입니다. 결과는 그림과 같습니다.

②flex-wrap: Wrap-reverse; 선택적인 측면 축 방향은 위쪽 또는 왼쪽이며 결과는 브레인스토밍입니다.

참고: 측면 축의 방향은 주 축에 따라 항상 측면 축에 수직입니다. 두 축의 방향은 기본적으로 오른쪽 및 아래쪽입니다.

기타 속성 설정:

flex- flow: 은 두 개의 매개변수가 있는 경우 주축 방향 + 측면 축 방향입니다. 은 단일 매개변수이며 주축 방향입니다.

order:number 확장 가능 항목(예: 하위 컨테이너에 order: 1 추가) 모든 하위 컨테이너의 기본 순서는 0입니다. 첫 번째 컨테이너에 대해 순서를 1로 설정하면 정렬과 같은 효과

justify-content:flex-start(default)||flex-end||center||space-between||space-around flex 컨테이너

위 내용은 CSS의 플렉스 레이아웃 단계 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!