KangKkaem

열심히 하는 강깸의 프로그래밍 블로그입니다.

Flex

  • 레이아웃 배치 전용으로 나온것이 Flex 이다.
  • 간혹 flex 만 가능한 UI 가 있고 Grid 보다 사용하는것이 간단해서 적재적소로 두개를 이용하는것이 가장 좋다.

배치의 흐름 #1

  • 부모(container) , 자식 (item)

  • flex 속성은 컨테이너에 적용하는 속성, 아이템에 적용하는 속성으로 나뉜다.

  • 컨테이너에 적용하는 속성 -> display: flex; → container 의 display 속성을 flex 로 적용

  • flex 옆 컨텐츠에 맞춰서 컬럼이 늘어난다.

  • inline-flex

  • 메인축(main axis) , 교차축(cross axis) → 오뎅꼬치로 생각해보자 배치된 플렉스 아이템들은 오뎅이라고 생각, 꼬치는 메인축, 교차축은 수직방향

  • 배치 방향 설정 : flex-direction → 기본 값은 row 이다. column 은 위아래 , row-reverse는 말그대로 배치방향 반대

  • 줄넘김 처리 설정 : flex-wrap ( 줄바꿈 처리를 결정) → 넓이만큼 넘어가면 밑으로 떨어지게 만들수있는것(자주쓰진않는다.)

  • flex-flow (flex-direction 과 flex-wrap 을 한꺼번에 사용가능) → ex) flex-flow : row wrap;

간단한 예제 #2

  • 반응형 웹을 만들어보자 , 일정폭이상으로 늘어나면 넓어지게!
<html>
	<body>
		<style>
			.flex-container {
				display: flex;
				flex-direction: column;
			}
			@media (min-width: 600px) {
				.flex-container {
					flex-direction: row;
				}
				.flex-item {
					flex: 1;
				}
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
				<div class="flex-item">AAAAAAAAAAAA</div>
				<div class="flex-item">BBB</div>
				<div class="flex-item">CCCCCCC</div>
		</div>
	</body>
</html>

전체 아이템 정렬 #3

  • justifiy 는 메인축(오뎅꼬치) 방향으로 정렬
  • align 은 수직축(오뎅을 뜯어지는 방향) 으로 정렬

메인축 방향 정렬 ( justify-content)

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around; (아이템 주변에 여백을가짐 between과 다름)

justify-content: space-evenly; (모든 여백이 동일함)

수직축 방향 정렬 ( align-items)

align-items: stretch;

align-items: flex-start; (위)

align-items: flex-end; (아래)

align-items: center;

align-items: baseline; (text 베이스라인)
  • 아이템을 한가운데로 옮기는법
justify-content: center;
align-item: center;
  • 여러 행 정렬 ( align-content) → flex-wrap:wrap; 으로 설정된 상태에서 행이 2줄이상 되었을때 수직축 방향 정렬을 결정하는 속성
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;

유연한 박스 #4

  • 유연한 박스의 기본 영역 ( flex-basis) → 기본 크기를 설정
flex-basis: auto;
flex-basis: 0;
flex-basis:50%;
flex-basis: 300px;
flex-basis: 10rem;
flex-basis: content;

  • 유연하게 늘리기 (flex-grow) → basis 값보다 커질 수 있는지 결정하는 속성

    → 지정된 숫자의 비율로 나누어 가진다고 생각하면 된다.

  • 유연하게 줄이기 (flex-shrink) →basis 값보다 작아질 수 있는지 결정하는 속성

    → 다른점은 기본값은 1이기 때문에 세팅하지 않아도 작아질수있다.

Flex 속성 활용 #5

  • flex-basis, flex-grow, flex-shrink 한번에 쓰는 속성 : flex
flex: 1;
/* flex-grow: 1; flex-shrink; flex-basis: 0%; */
flex: 1 1 auto;
/* flex-grow: 1; flex-shrink: 1; flex-basis:auto; */
flex: 1 500px;
/* flex-grow: 1; flex-shrink; flex-basis: 500px; */

→ 속성 사용에 정답은 없지만 각속성별 특징을 알고있으면 적절하게 이용할수있다.

반응형 컬럼 #6

  • width 랑 basis 는 차이가 별로없다. 하지만다름. basis 기본값은 auto 인데 width가 설정된 값에 따라서 basis가 바뀐다. ( 만약 width 50%로설정되면 basis : auto → 50%임 ) . 결론적으로 같은 말이지만 다른 의미이니까 구분 할 필요성이있다.
<html>
<head>
	<style>
		.flex-container {
			display: flex;
			flex-direction: column;
			min-height: 100vh;
			/* border: 10px solid red; */
		}
		.flex-item {
			flex: 1 auto;
		}
		@media (min-width: 600px) {
			.flex-container {
				flex-direction: row;
				flex-wrap: wrap;
			}
			.flex-item {
				width: 50%;
				/* flex-grow: 0; */
				/* flex: 0 auto; */
				/* flex-basis: 50%; */
			}
		}
		@media (min-width: 900px) {
			.flex-item {
				width: 30%;
			}
		}
	</style>
</head>
<body>
	<div class="flex-container">
		<div class="flex-item">AAAAAAAAAA</div>
		<div class="flex-item">BB</div>
		<div class="flex-item">CCCCCC</div>
		<div class="flex-item">AAAAAAAAAA</div>
		<div class="flex-item">BB</div>
		<div class="flex-item">CCCCCC</div>
		<div class="flex-item">AAAAAAAAAA</div>
		<div class="flex-item">BB</div>
		<div class="flex-item">CCCCCC</div>
	</div>
</body>
</html>

유용한 기법들 #7

  • A, B, C 똑같은 크기의 상자를 C만 오른쪽으로 보내보기
    • margin-left: auto; 를 이용
<html>
<head>
	<style>
		.flex-container {
			display: flex;
			/* justify-content: space-between; */
			/* width: 600px; */
			/* margin: 0 auto; */
			/* margin-left: auto; */
		}
		.flex-item {
			width: 150px;
		}
		.flex-item:last-child {
			margin-left: auto;
		}
	</style>
</head>
	<body>
		<div class="flex-container">
			<div class="flex-item">A</div>
			<div class="flex-item">B</div>
			<div class="flex-item">C</div>
		</div>
	</body>
</html>
  • 고정폭칼럼과 가변폭 칼럼
    • 가운데는 가변칼럼, 양 사이드는 고정폭칼럼
<html>
<head>
	<style>
		.flex-container {
			display: flex;
		}
		.flex-item {
			
		}
		.flex-item:nth-child(1) {
			flex-shrink: 0;
			/* flex: 0 0 auto; */
			width: 150px;
		}
		.flex-item:nth-child(2) {
			flex-grow: 1;
		}
		.flex-item:nth-child(3) {
			flex-shrink: 0;
			width: 200px;
		}
	</style>
</head>
<body>
	<div class="flex-container">
		<div class="flex-item">
			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti, molestiae.
		</div>
		<div class="flex-item">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores ex cum tenetur ea commodi inventore nam doloribus dolores sit saepe.
		</div>
		<div class="flex-item">
			Lorem ipsum dolor sit, amet consectetur adipisicing.
		</div>
	</div>
</body>
</html>

개별 아이템 속성 #8

  • 수직축 정렬 ( align-self )
    • align-self 는 align-items 보다 우선권이 있다.
align-self: auto;

align-self: stretch;

align-self: flex-start; (위)

align-self: flex-end; (아래)

align-self: center;

align-self: baseline; (text 베이스라인)
  • 아이템 배치 순서 ( order ) → 시각적 나열 순서를 결정한다.
  • z-index → z축 정렬을 할수있다. 숫자클수록 위로 올라옴

태그:

카테고리:

업데이트:

댓글남기기

참고

CSS - Grid

참고 : https://studiomeal.com/archives/533