상추의 IT저장소

CSS) flexbox - flexcontainer에 적용되는 속성 본문

CSS

CSS) flexbox - flexcontainer에 적용되는 속성

구너상추 2022. 11. 10. 18:50

flexbox란?

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다.

 

flexbox를 만드는 방법은 정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언하면 된다.

.flex_container {
  display: flex;
}

부모 요소와 자식 요소에 정의하는 속성 구분

flexbox에서 사용하는 속성은 부모 요소인 flex container에 정의하는 속성과 자식 요소인 flex item에 정의하는 속성으로 나누어진다. 전체적인 정렬이나 흐름에 관련된 속성은 flex container에 정의하고, 자식 요소의 크기나 순서에 관련된 속성은 flex item에 정의한다. 이를 분리해 적용하는 것이 중요하다.

  • flex container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content
  • flex item 속성: flex, flex-grow, flex-shrink, flex-basis, order

 

 

display : flex;

 <style>
       .container {
	    display: flex;
        background-color: aquamarine;
	    /* display: inline-flex; */
        } 
        .item{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px 10px 10px 10px ;
            font-size: 3vmax;
            font-weight: bold;
            color: white;
            background-color: red;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="item">AAAA</div>
        <div class="item">BBBBBBBBBBBBBBB</div>
        <div class="item">CCCCCCCC</div> 
    </div>
    
</body>

해당 코드를 입력하니 flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 width만큼만 공간을 차지하게 된다.

 

display를 inline-flex로 바꿔주니 요소들이 끝나는 지점에서 container 박스의 크기가 맞춰진다.

 

 .container {
	    display: flex;
        background-color: aquamarine;
        flex-direction: row;
        }

flex-direction

아이템들이 배치되는 방향을 결정하는 속성이다.

 

flex-direction : row;

아이템들이 가로 방향으로 배치

 

flex-direction : row-reverse;

아이템들이 가로 방향 역순으로 배치

 

flex-direction : column;

아이템들이 새로 방향으로 배치

 

flex-direction : column-reverse;

아이템들이 새로 방향 역순으로 배치

 

flex-wrap

컨테이너가 더이상 아이템들을 한줄에 담을 여유공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성

 

flex-wrap : nowrap;

줄바꿈을 하지않음 넘치면 그냥 공간을 삐져나간다.

flex-wrap : wrap;

줄바꿈을 한다.

 

 

justify-content

메인축 방향으로 아이템을 정렬하는 속성

 

 

justify-content : flex-start;

아이템들을 시작점으로 정렬한다.

 

justify-content : flex-end;

아이템들을 끝점으로 정렬한다.

 

justify-content : center;

아이템들을 가운데로 정렬한다.

 

justify-content : space-between;

아이템들의 사이에 균일한 간격을 형성한다.

 

justify-content : space-around;

아이템들의 둘레에 균일한 간격을 형성한다.

.

justify-content : space-evenly;

아이템들의 양끝과 사이에 균일한 간격을 형성한다.

 

align-items

수직축방향으로 아이템들을 정렬하는 속성이다.

 

stretch (기본값)

아이템들이 수직축 방향으로 끝까지 늘어난다.

 

flex-start

아이템들을 시작점으로 정렬

 

flex-end

아이템들을 끝으로 정렬

center

아이템들을 가운데로 정렬

 

baseline

아이템들을 텍스트 베이스라인 기준으로 정렬

 

 

align-content

flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성

 

align-content : stretch;

align-content : flex-start;

 

align-content : flex-end;

 

align-content : center;

 

align-content : space-between;

 

align-content : space-around;

 

align-content : space-evenly;

 

참조 : https://studiomeal.com/archives/197

 

이번에야말로 CSS Flex를 익혀보자

이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누

studiomeal.com

 https://d2.naver.com/helloworld/8540176

 

'CSS' 카테고리의 다른 글

CSS) Grid 레이아웃  (0) 2023.01.24
CSS) flexbox - flex 아이템에 적용하는 속성들  (0) 2023.01.05
CSS) font-face 사용하기  (0) 2022.12.20
CSS) 선택자  (0) 2022.11.05
CSS) 가상 선택자 정리  (0) 2022.11.04
'CSS' Related Articles more