티스토리 뷰

수업/└HTML&CSS

[CSS]박스_레이아웃 속성 : flex

onlyun 2022. 1. 3. 15:49

1분코딩 CSS Flex 참고하여 정리

https://studiomeal.com/archives/197

 

| Flexible Box(Flexbox)

레이아웃 배치 전용 속성

플렉스 속성을 부여한 영역 내의 요소들의 배치를 플렉스 속성을 이용하여 할 수 있음.

 

 

1. 기본 구조

Flex Container 부모 요소 Flex 속성을 부여하여 자식 요소들을 Flex 속성에 따라 배치, 정렬할 수 있음
Flex Item 자식 요소 Flex 속성값에 따라 정렬, 배치되는 요소

 

-기본 구조 예시

<body>
	<div class="container"> <!-- 부모 요소 -->
    	<div class="item"></div> <!--자식 요소 1-->
        <div class="item"></div>  <!--자식 요소 2-->
        <div class="item"></div>  <!--자식 요소 3-->
    </div>
</body>

 

 

 

2. Flex 속성

-Flex 적용 및 Flex 속성 예시

<style>
    .container { /* 부모 영역에 설정 속성 */
    	display : flex;   /* Flex 속성 부여 */
        flex-direction : row;   /* 정렬 방향 가로, 세로 */
        flex-wrap : wrap;   /* 줄넘김 처리 */
        justify-content : flex-start;   /* 정렬축 방향으로 정렬 */
        align-items : stretch;   /* 정렬축 기준으로 수직 정렬 */
        algin-content : stretch
    }
    .item {
    	flex-basis : auto;   /* item의 기본 크기 설정 */
        flex-grow : 0;   /* flex-basis보다 커질 수 있는지 결정 */
        flex-shrink : 1;   /* flex-basis보다 작아질 수 있는지 결정 */
        align-self : auto;   /* 해당 아이템의 수직축 방향 정렬 */
    }
</style>

 

(1) 속성 : 컨테이너 속성(부모 요소)

-Flex 적용

.container {
	display : flex | inline-flex;
}

inline-flex는 자식 요소에 맞춰 변하는 것

 

-Flex 방향 설정과 줄넘김 처리 설정

.container {
    flex-direction : row | column | row-reverse | column-reverse;
    flex-wrap : nowrap | wrap | wrap-reverse;
    
    /* 위의 둘을 축약해서 아래와 같이 쓸 수 있다 */
    
    flex-flow : row wrap;
}
flex-direction : 아이템들이 배치되는 축 방향 결정
row column row-reverse column-reverse
가로 정렬 세로 정렬 자식 요소들을
역순으로 가로 정렬		 자식 요소들을
역순 세로 정렬

 

flex-wrap : 컨테이너가 아이템들을 한 줄에 다 담을 수 없을때 어떻게 할지 결정
nowrap wrap wrap-reverse
넘치면 삐져나가는 것
(기본값)		 넘친 게 삐져나가지 않도록 감쌈
줄바꿈 일어남		 줄바꿈이 일어나는데
역순 배치

 

-메인축, 수직축 방향 설정

.container {
    justify-content : flex-start | flex-end | center | space-between | space-around | space-evenly;
    align-items : stretch | flex-start | flex-end | center | baseline;
}
메인축(Main Axis) 방향 정렬 : 아이템들이 배치된 방향의 축(가로축, 세로축) 정렬
flex-start flex-end center space-between space-around space-evenly
시작점 정렬
row - 왼쪽
column - 위		 끝점 정렬
row - 오른쪽
column - 아래		 가운데 정렬 사이에
균일한 간격		 둘레에
균일한 간격		 엣지와 IE
적용 x

 

교차축(Cross Axis) 방향 정렬 :  메인축의 수직 방향 정렬
stretch flex-start flex-end center baseline
수직축으로
쭉 뻗침
(부모 영역 내)		 시작점 정렬
row - 위
column - 왼쪽		 끝점 정렬
row - 아래
column - 오른쪽		 가운데 정렬 텍스트
베이스라인
기준 정렬

 

cf) 한 가운데 정렬

.container {
    justify-content:center;
    align-items:center;
}

 

-여러 행 정렬(align-content)

아이템 행이 2줄 이상일 때 수직축 방향 정렬

.container {
    align-content : stretch;
}
strech flex-start flex-end center space-between space-around space-evenly
             

 

(2) 속성 : 아이템

flex-basis flex-grow flex-shrink
유연한 박스 아이템의
기본 크기 설정		 유연하게 늘리기
flex-basis보다 커질 수 있음		 유연하게 줄이기
flex-basis보다 작아질 수 있음

-flex-basis

.item {
    flex-basis : auto | 0 | px | rem | % | content;
}

└auto : 해당 아이템의 width값이고 width값이 설정되어 있지 않다면 컨텐츠 크기

유연하게 크기가 설정됨. 설정된 값보다 아이템이 작으면 커짐. 설정된 값보다 큰 아이템의 크기가 작아지진 않음.

 

cf) flex-basis와 width

.item {
    width:100px; /*item 크기 100px 고정*/
    flex-basis:100px; /*100px보다 작은 건 100px로 커지나
                        100px보다 큰 건 100px 줄어들지 않음.*/
}

 

-flex-grow

.item {
    flex-grow : 0 | 1 | …;
}

부모 영역 크기를 아이템 박스들이 유연하게 늘어나 채운다.

아이템 크기가 늘어날 때 실제 컨텐츠 영역을 제외한 여백 부분을 flex-grow에 지정한 숫자의 비율로 나누어 가짐.

 

-flex-shrink

.item {
    flex-grow : 1 | 0 | …;
}

flex-shrink 기본값은 1이라 flex-basis보다 작아질 수 있음.

flex-shrink : 0; 속성을 주면 크기 고정할 수 있음.

 

cf) flex

flex-grow, flex-shrink, flex-basis를 한번에 쓸 수 있는 축약형

.item { flex:1; }
    /* flex-grow:1; flex-shrink:1; flex-basis:0% */

 

-align-self

해당 아이템의 수직축 방향 정렬

.item {
    align-self : auto | stretch | flex-start | flex-end | center | baseline;
 }
아이템 수직축 방향 정렬
auto stretch flex-start flex-end center baseline
align-items
설정 상속		 쭉 뻗음 시작점 정렬 끝점 정렬 가운데 정렬 베이스라인
기준 정렬

 

-배치 순서(order)

각 아이템들의 시각적 나열 순서 결정. order값이 작은 숫자일수록 먼저 배치.

실제 HTML 문서상 구조를 바꾸는 것은 아님.

 

 

cf) flex를 이용해 웹페이지 구조 만들 때

웹 페이지 출력 화면 예시

 

 

수직으로 나뉠 영역, 수평으로 나뉠 영역 계산

-수직 : header / nav & section & aside / footer  → 3개

-수평 : nav / section / aside  → 3개

 

저작자표시

'수업 > └HTML&CSS' 카테고리의 다른 글

[CSS]박스_레이아웃 속성 : table  (0) 2022.01.03
[CSS]박스_레이아웃 속성 : z-index  (0) 2022.01.03
[CSS]박스_레이아웃 속성 : float  (0) 2022.01.03
[CSS]박스_레이아웃 속성 : position  (0) 2022.01.03
[CSS]박스(Box Model)  (0) 2022.01.03
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함