[CSS] Flex 속성 사용 방법

CSS Flex 속성 사용 방법

 

🩸이슈 발생

이제 잘 안 쓰인다는 테이블, float 대신 flex 사용해 보기

1. Flex 기본 사용 구조

2. Container 적용 속성
- 배치방향 :  flex-direction
- 줄 넘김 : flex-wrap
- 정렬 : 메인 축 방향 / 수직 축 방향/ 여러 행 정렬

3. 예시

 

728x90

 

* Grid 속성과의 차이점

	Flex	Grid
레이아웃 방향	수평	모든 방향
아이템 크기	자유로움 (유동적)	미리 정의됨 (고정적)
특징		레이아웃 변화 없을 때 사용

 

---

🩹이슈 해결

1. Flex 사용 기본 구조 : html, css

 

<div class="container">
    <div class="item">아이템1</div>
    <div class="item">아이템2</div>
    <div class="item">아이템3</div>
</div>

.container{
	display: flex;
}

 

 

2. Container 적용 속성

 

1. 배치 방향 : flex-direction

.container {
	flex-direction: row; 		/* 행 가로 방향 (기본)*/
	flex-direction: column; 	/* 행 가로 방향 - 역순*/
	flex-direction: row-reverse;	/* 행 세로 방향*/
	flex-direction: column-reverse; /* 행 세로 방향 - 역순*/
}

 

2. 줄넘김 : flex-wrap

.container {
	flex-wrap: nowrap;	/* 부모보다 크면 레이아웃 탈출 (기본) */
	flex-wrap: wrap;	/* 부모보다 크면 자식 다음 줄로 넘어감 */
	flex-wrap: wrap-reverse;/* 부모보다 크면 자식 다음 줄로 역순배치 */
}

 

3. 정렬

* 아래 주석에서의 row, column 은 위 flex-direction 속성(배치방향)을 얘기함.

(1) 메인 축 방향 : justify-content

.container {
	justify-content: flex-start;	/* row-왼쪽, column-위쪽 (기본)*/
	justify-content: flex-end;	/* row-오른쪽, column-아래 */
	justify-content: center;	/* 가운데 정렬 */
	justify-content: space-between;	/* 아이템 사이에 간격 생김 */
	justify-content: space-around;	/* 아이템 둘레에 간격 생김 */
	justify-content: space-evenly;	/* 아이템 사이+둘레에 간격 생김 */
}

 

(2) 수직 축 방향 : align-items

.container {
	align-items: stretch;	/* 수직축 방향으로 끝까지 늘어남 (기본)*/
	align-items: flex-start;/* row-위쪽, column-왼쪽 */
	align-items: flex-end;	/* row-아래쪽, column-오른쪽*/
	align-items: center;	/* 수직 가운데 정렬*/
	align-items: baseline;	/* 텍스트 베이스라인 기준 정렬*/
}

 

(3) 여러 행 정렬 : align-content

* flex-wrap: wrap 속성 필수 (아이템 행 2줄 이상일 때의 정렬)
* 속성 justify-content, align-items와 동일함

.container {
	flex-wrap: wrap;
    
	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; 
}

 

 

3. 예시

<div class="section-bottom">
    <div>
        <span>아이템1</span>
        <imgsrc="/img/main/checked.png">
    </div>
    <div>
        <span>아이템2</span>
        <img src="/img/main/checked.png">
    </div>
    <div>
        <span>아이템3</span>
        <img src="/img/main/checked.png">
    </div>
    <div>
        <span>아이템4</span>
        <img src="/img/main/checked.png">
    </div>
</div>

.section-bottom {
    display: flex;
    flex-wrap: wrap;		/*줄바꿈*/
    align-items: flex-start;	/*수직 축 방향 정렬*/
    align-content: flex-start;	/*메인 축 방향 정렬*/
    justify-content: center;	/* 가운데 정렬*/
    gap: 32px 74px;		/*div 사이 간격*/
}

 

---

💡유의사항

아이템 적용 속성은 많이 안 써서 일단 빼두었다.