CSS 요소의 배치 방식

display

    - 요소가 표시될 방식을 지정
    - 값
        block           : 해당 요소를 포함하고 있는 부모 요소의 줄 전체를 차지하는 플로우 컨텐츠. <div>, <section>, <header> 태그 등이 이에 속한다.
        inline          : 텍스트의 흐름에 포함되는 구문 컨텐츠. <a>, <b>, <span>등이 이에 속한다. 단, display 속성 값이 inline인 태그는 크기 설정(width, height)이 불가능
        inline-block    : inline의 속성을 가지는 구문 컨텐츠면서 크기 설정 등이 가능하도록 일부 block의 속성도 가지는 속성값
        
        none            : 요소 표시 X. 크기 또한 X, 자리 차지도 아예 안함

        flex            : 해당 요소를 플로우 컨텐츠형 플렉스 컨테이너로 표시
        inline-flex     : 해당 요소를 구문 컨텐츠형 플렉스 컨테이너로 표시
        
        grid            : 해당 요소를 플로우 컨텐츠형 그리드 컨테이너로 표시
        inline-grid     : 해당 요소를 구문 컨텐츠형 그리드 컨테이너로 표시

 

flex

    - 이가 가지는 자식 요소들에 대한 배치를 보다 유연하고 쉽게함
    - 플렉스 컨테이너가 될 요소의 display값을 flex혹은 inline-flex로 설정

플렉스 컨테이너(부모)

    

align-items

        - 플렉스 컨테이너의 flex-direction에 대해 수직한 방향으로의 정렬을 위한 속성, flex-direction값에 따라 세로, 가로가 정해짐
        - 값
            flex-start      : 흐름 방향에서 시작하도록 정렬
            flex-end        : 흐름 끝 방향에서 시작하도록 정렬
            center          : 가운데 정렬
            space-between   : 각 플렉스 아이템의 사이에 균등한 공간을 배분한다.
            space-around    : 각 플렉스 아이템의 사이에 균등한 공간을 배분하고, 각 끝 아이템의 외부 여백 또한 배분하는데, 외부 여백은 각 플렉스 아이템 사이 여백의 절반
            space-evenly    : 각 플렉스 아이템의 사이및 각 끝에 균등한 공간을 배분
            stretch         : 플렉스 컨테이너의 크기에 맞게 늘이거나 줄임 요소를  

    

flex-direction

        - 플렉스 컨테이너에 부여하는 속성, 이가 포함하고 있는 아이템들의 흐름 방향을 지정
        - 값
            row             : [기본값] 가로방향
            row-reverse     : 가로 역방향. 요소의 순서도 함께 반전됨
            column          : 세로방향
            column-reverse  : 세로 역방향. 요소의 순서도 함께 반전됨

    

gap

        - 플렉스 컨테이너가 포함하는 아이템간의 거리 지정
        - 형태
            [값1]       : 값1이 크기값일 때, 행간, 열간 거리를 모두 값1로 지정
            [값1 값2]   : 값1과 값2가 크기값일 때, 행간거리를 값1, 열간거리를 값2로 지정
    
    

justify-content

        - 플렉스 컨테이너의 flex-direction에 대해 수평한 방향으로의 정렬을 위한 속성, flex-direction값에 따라 세로, 가로가 정해짐
        - 값
            flex-start      : 흐름 방향에서 시작하도록 정렬
            flex-end        : 흐름 끝 방향에서 시작하도록 정렬
            center          : 가운데 정렬
            space-between   : 각 플렉스 아이템의 사이에 균등한 공간을 배분한다.
            space-around    : 각 플렉스 아이템의 사이에 균등한 공간을 배분하고, 각 끝 아이템의 외부 여백 또한 배분하는데, 외부 여백은 각 플렉스 아이템 사이 여백의 절반
            space- evenly   : 각 플렉스 아이템의 사이및 각 끝에 균등한 공간을 배분

플렉스 아이템(자식)

flex

        - flex-basis, flex-grow, flex-shrink 세 가지 속성의 축약 속성
        - 형태
            [flex-basis 값] [flex-shrink 값], [flex-grow값]
               

*{
    flex: 0 0 auto;
}

위 속성은 아래와 같다.

*{
    flex-basis:auto;
    flex-grow:0;
    flex-shrink:0;
}

    

flex-basis

        - 플렉스 아이템의 초기 크기 지정
        - 플렉스 컨테이너의 flex-direction 속성 값이 row일때 이는 width와 동일, column일때 height와 동일
        - 값
            auto    : [기본값] 요소가 가지는 내용에 따라 자동 조절
            크기 값 
            
    

flex-grow

        - 플렉스 아이템이 플렉스 컨테이너 안에서 flex-direction 방향에 따라 남는 여유공간을 차지하기 위해 늘어날 비율
        - 값
            0이상의 정수    : 기본값은 0

    

flex-shrink

        - 플렉스 아이템이 플렉스 컨테이너 안에서 flex-direction 방향에 따라 줄어들 비율을 지정. 단, 이가 가진 내용을 표시하기 위한 최소한의 크기 미만으로 줄지 않음
        - 값
            0이상의 정수    : 기본값은 1

grid

    이가 가지는 자식요소들에 대한 반복되는 격자배치를 보다 쉽게 함
    그리드 컨테이너가 될 요소의 display속성 값을 grid 혹은 inline-grid로 설정

그리드 컨테이너(부모)

grid-template-columns

        - 그리드 컨테이너에 부여하는 속성, 그리드 열의 구조를 설정
        - 값
            크기 값 
            fr 값   
        - 형태
            [값 ...]

    

grid-template-rows

        - 그리드 컨테이너에 부여하는 속성, 그리드 행의 구조를 설정
        - 값
            크기 값 
            fr 값   
        - 형태
            [값 ...]
    

gap

        - 그리드 컨테이너가 포함하는 아이템간의 거리를 지정
        - 형태
            [값1]       : 값1이 크기 값일 떄, 행간, 열간 거리를 값1로 지정
            [값1 값2]   : 값1, 값2가 크기 값일 때, 행간 거리를 값1, 열간 거리를 값2로 설정

그리드 아이템(자식)

grid-column

        - 해당 아이템이 차지해야하는 열의 번호 지정
        - 형태
            [시작 번호] / [끝 번호]
            슬래쉬(/)의 좌우에는 반드시 공백이 있어야 함에 유의한다

    

grid-row

    - 해당 아이템이 차지해야하는 행의 번호 지정
    - 형태
        [시작 번호] / [끝 번호]
        슬래쉬(/)의 좌우에는 반드시 공백이 있어야 함에 유의한다.

    

order

        - 해당 아이템의 태그 순번과 관계 없이, 시각적으로 배치되어야 하는 순서를 지정
        - 단, grid-column, grid-row 속성이 적용되어 있다면 order 속성은 무시된다.
        - 속성 값이 같은 아이템끼리는 태그의 배치 순서에 따라 표시
        - 값
            [정수]  : 숫자가 작을수록 우선 배치된다. 기본값은 0

 

 

아래는 flex의 사용 예시이다.

<div class="flex-column">

        <div class="flex-row">

                <div class="child">a</div>

                <div class="child">b</div>

                <div class="child">c</div>

        </div>

        <div class="spring"></div>

        <div class="flex-row">

                <div class="child">d</div>

                <div class="child">e</div>

                <div class="child">f</div>

        </div>

</div>

.flex-column{

            width: 100px;

            height: 100px;

            background-color: #d0d0d0;

            align-items: center;

            display: flex;  

            flex-direction: column;    

            gap: 10px;

}

.flex-column > .flex-row{

            background-color: #3498db;

            color: #ffffff;

            align-items: center;

            display: flex;

            flex-direction: row;

}

.flex-column > .spring{

            flex-grow: 1;

}

이 코드를 실행하면 다음과 같다

다음은 grid의 사용 예시이다.

<div class="container">

        <div class="item">1</div>

        <div class="item">2</div>

        <div class="item minor">3</div>

        <div class="item">4</div>

        <div class="item">5</div>

        <div class="item">6</div>

</div>

.container{

            width: 400px;

            display: grid;

            background-color: #a9cce3;

            gap: 1rem;

            grid-template-columns: 1fr 1fr 1fr 1fr;

}

.container > .item{

            background-color: #f6ddcc;

            padding: 1rem 2rem;

}

.container > .item:first-child{

            grid-column: 2/4;

            grid-row: 1/3;

}

.container > .item.minor{

            order:1;

}

이를 실행하면 

이런 결과가 나온다.