CSS Flex 기본 개념 정리

Flex는...

자식요소와 이를 감싸고 있는 부모요소가 있습니다.

부모요소를 플렉스 컨테이너라고하며, 자식요소는 플렉스 아이템이라고 합니다. 부모요소의 CSS 에 display:flex를 정의함으로서 flex를 사용할 수 있습니다.

 

 

 

---

HTML :: 기본구조

<div class="container"> // flex의 부모요소 플렉스 컨테이너. 이곳에 display : flex 를 정의
    <div class="item">1</div> // flex의 자식요소. 플렉스 아이템
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">...</div>
</div>

div.container에 CSS에 display:flex를 정의 하면 div.item들이 정렬됩니다.

 

---

CSS :: 부모 요소 속성들 한눈에 보기

부모요소(플렉스 컨테이너)에 사용하는 CSS 속성.

div.container {
	
    /* 0) flex를 정의하는 속성으로 시작 */
    display: flex; 
    display: inline-flex;
    
    
    /*-------------------------------------------------------------------------*/
    
    /* 1) 아이템의 배치 방향 설정 */
    flex-direction: row;  /* 추가 속성 : column; row-reverse; column-reverse; */
    
    /* 2) 아이템 줄넘김 설정 */
    flex-wrap: no-wrap;  /* 추가 속성 : wrap; wrap-reverse; */
    
    /* 3) 축약형 - flex-direction과 flex-wrap 순서대로 한 칸 떼고 기입*/
    flex-flow: row wrap;
    
    /*-------------------------------------------------------------------------*/

    /* 4) 아이템 좌우방향 정렬 */
    justify-content : flex-star;t 
    /* 추가 속성 : flex-end; center; space-between; space-around; space-evenly */
    
    /* 5) 아이템 위아래 방향 정렬 */
    aline-items : stretch; 
    /* 추가 속성 : flex-start; flex-end; center; baseline; */
    
    /* 6) 2줄 이상의 아이템의 좌우 정렬을 설정 :  ★flex-wrap:wrap 속성과 함께 쓰임★ */
    align-content : stretch; /* 추가 속성 : flex-start; flex-end; center; space-between; space-around; space-evenly */

}

 

CSS :: 자식요소 속성들 한눈에 보기

자식요소(플렉스 아이템)에 사용할 수 있는 CSS 속성

.itme {
	
    /* 7) 아이템의 기본 크기 값 */
    flex-basis : auto; /* 추가 속성 : px; %; rem; em; vh; vw .. 등등 */

    /* 8) 아이템 요소들의 합보다 큰 컨테이너의 빈공간 처리 방법*/
    flex-grow : 1; /* 0 - 안커짐 / 1 - 커짐 */
    
    /* 9) 아이템의 기본 값보다 작아질 수 있게 만드는 설정 */
    flex-shrink : 1; /* 0 - 안커짐 / 1 - 커짐 */
    
    /* 10) 위 3개 축약형 */
    flex : 1 2 50px; /* 순서대로 flex-grow flex-shrink flex-basis */
    
    /* ------------------------------------------------------------ */
    
    /* 11) 위아래 방향 정렬 */
    align-self : auto; /* 추가 속성 : stretch; flex-start; flex-end; center; baseline; */
    
    /* 12) 배치 순서 */
    order : 1 /* 각아이템들이 보여질 시각적 순서를 각각 기입합니다. */
    
    /* 13) z축 순서 */
    z-index : 1 

}

 

 

---

자세한 설명 보기⬇⬇⬇

1) display:

flex; /* display:block과 같은 성격 */
inline-flex; /* display:inline과 같은 성격*/

flex 컨테이너 자체 성격 결정.

block 처럼 한 줄을 다 차지하게 하거나(flex) 다음 컨테이너와 옆에 붙게(inline-flex) 할지 결정.

 

 

2) flex-direction : 

아래는 참고사이트이며, 한눈에 보기 편하게 재정리한 것입니다.
https://studiomeal.com/archives/197