프론트엔드/css

[유노코딩 css 15강] flexbox 주축,교차축 요소 배치 방법

응개야 2023. 8. 4. 11:31

css의 꽃 

flexbox

유연한 박스

 

div 아이템들을 박스에 담으려면

div class="container"

박스 안에 또 박스를 넣으려면

div.container>div.item.tiem

 

레이아웃에 워낙 다양한 경우의 수가 있으니

(하위속성 공부하려면 정리 않고 직접 해보기!) 

직접 체험하는게 체득하기 용이할 것임

연습량을 늘려가는 것이

flexbox에 익숙해지는 정답

justfy-content는 flexbox 주축에서의 요소 배치 방법 정의한다.
align-items는 flexbox 교차축에서 요소 배치 방법 정의한다.
align-self는 flexbox 내 개별 요소 교차축 배치 방법 정의한다.
flex-wrap은 개별 요소들의 도합 크기가 컨테이너 주축 길이보다 커졌을 때의 처리 방법 및 방향을 정의한다.

 

flex-direction: column;
flex-direction: row;

 

colmn

column은 교차축(세로)으로 변경됨.

row

row는 주축으로 변경됨

 

 

 

 

 

 
justify-content: center;
justify-content: flex-start
justify-content: flex-end;

justify-content:는  주축에서의 정렬 방법

flex-start
flex-end

 

space-around
space-between

 

이러면 대충 감이 오지요

align-items는 (교차축의 변경방법)

하위속성들

flex-end

flex-start

center

.

.

.

item 태그를 따로 놓고

align-self: flex-end; 하면 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{ display: flex;
            flex-direction: row;
            width: 300px; height: 300px;
            border: 1px solid black;
            justify-content: space-around;
            align-items: flex-end;
           

        }
        .item{
            width: 60px; height: 60px;
            background-color: teal;
        }
        .self{
            align-self: center;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item self">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

align-self :&nbsp; center ;

 

 

부모보다 자식이 클 경우에도

부모보다 커지지 않음

 

flex-wrap: nowrap; (이게 기본 값)

 

플렉스 컨테이너의 하위요소들이 컨테이너보다 커져버렸을 때 변경하는 값

wrap;하면 초과되었을 때 두 행으로 변경 가능함.

wrap-reverse;