Flex
Flex(플렉스)는 Flexible Box,Flexbox라고 부르기도 한다.
float나 inline-block등을 이용한 기존 방식보다 훨씬 편리하다.
기본 html구조
부모 요소를 'Flex Container(플렉스 컨테이너)'라고 부르고,
자식 요소를 'Flex Item(플렉스 아이템)'이라고 부른다.
<div class="container">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">helloflex</div>
</div>
<!-- 컨테이너가 Flex의 영향을 받는 전체 공간,
설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것--!>Flex의 속성
1. 컨테이너에 적용하는 속성
2. 아이템에 적용하는 속성
1. Flex 컨테이너에 적용하는 속성
1) display: flex;
flex 아이템들이 가로 방향으로 배치되고 자신이 가진 내용물의 width 만큼만 차지하게 된다. height는 컨테이너의 높이만큼 늘어난다.
(정렬 속성을 통해 height를 어떻게 처리할지도 조정할 수 있다.)
2) display: inline-flex;
inline-flex는 inline-block처럼 동작한다
3) flex-direction :배치 방향 설정
아이템의 메인축을 가로로 할 것인가 세로로 할 것인가를 정해주는 것
크기가 작은 모바일 기기에서 column으로 배치하다가 일정 폭 이상이 되면
row로 바꿔주는 식으로 반응형 레이아웃을 구현할 수도 있다.
.container {
flex-direction: row; /* 기본값 */
flex-direction: row-reverse /* 역순으로 가로 배치 */
flex-direction: column; /* 열(세로)방향으로 배치 * /
flex-direction: column-reverse; /* 역순으로 열(세로)방향으로 배치 * /
}
4) flex-wrap :줄넘김 처리 설정
컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때
아이템 줄바꿈을 어떻게 할지 결정하는 속성
.container {
flex-wrap: nowrap; /* 줄바꿈을 하지 않음 넘치면 안보임 */
flex-wrap: wrap; /* float,inline-block요소들과 비슷하게 동작 */
flex-wrap: wrap-reverse; /* 줄바꿈을 하면서 아이템을 역순으로 배치 */
}
5) flex-flow :'flex-direction'과'flex-wrap'을 한번에 지정할 수 있는 단축 속성
.container {
flex-flow: row wrap;
/* flex-direction: row;, flex-wrap: wrap; */
}flex 정렬
1) justify-content :메인축 방향으로 아이템을 정렬하는 속성
.container {
justify-content: flex-start;
/* 기본값 */
justify-content: flex-end;
/* 아이템을 끝점으로 연결한다 */
/* flex-direction이 row(가로 배치) -> 오른쪽
flex-direction이 column(세로 배치) -> 아래
justify-content: center;
/* 가운데 정렬 */
justify-content: space-between;
/* 아이템들 "사이"에 균일한 간격을 만듬 */
justify-content: space-around;
/* 아이템들 "둘레"에 균일한 간격을 만듬 */
justify-content: space-evenly;
/* 아이템들의 사이와 양 끝에 균일한 간격을 만듬 */
/* IE와 엣지(Edge)에서는 지원x */
/* 브라우저 폭이 1024px 이상일때 space-evenly가 적용
IE와 엣지에서만 space-around로 적용이 되도록 처리해 두었음 */
}
2) align-items :수직축 방향으로 아이템을 정렬하는 속성
.container {
align-items: stretch;
/* 기본값 */
/* 아이템들이 수직축 방향으로 끝까지 쭈욱 늘어남 */
align-items: flex-start;
/* 아이템들을 시작점으로 정렬 */
align-items: flex-end;
/* 아이템들을 끝으로 정렬 */
align-items: center;
/* 아이템들을 가운데로 정렬 */
align-items: baseline;
/* 아이템들을 텍스트 베이스라인 기준으로 정렬 */
}
가운데정렬하는 방법
.container {
justify-content: center;
align-item: center;
/* 브라우저 정중앙에 위치 */
}3) align-content :여러 행 정렬
flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을
때의 수직축 방향 정렬을 결정하는 속성
.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;
/* ms 계열 브라우저(IE,엣지)에서는 지원x */
}
3. flex 아이템에 적용하는 속성들
1) flex-basis는 flex 아이템의 기본 크기를 설정한다
flex-basis의 값으로는 width, height 등에 사용하는 각종 단위의 수가 들어갈 수 있으며 기본값 auto는 해당 아이템의 width값을 사용한다. width를 따로 설정하지 않으면 컨텐츠의 크기가 된다.
- flex-direction: now; (너비)
- flex-direction: column; (높이)
.item {
flex-basis: auto; /* 기본값 */
flex-basis: 0;
flex-basis: 50%;
flex-basis: 300px;
flex-basis: 10rem;
flex-basis: content;.item {
flex-basis: 100px;
}width가 100px이 안되는 AAA와 CCC는 100px로 늘어났고, 원래 100px이 넘는 BBB는 그대로 유지된다.
.item {
width: 100px;
}width를 설정하면, 원래 100px이 넘는 BBB도 100px로 맞춰진다 BBBB가 다음줄로 넘어가게 하려면 CSS에 'word-wrap: break-word;'를 적용해준다 사용하지 않을 시 100px영역만큼 줄어들고 BBBB는 옆으로 빠져나가는 현상이 생김.
2. flex-grow :유연하게 늘리기
flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다. flex-grow에는 숫자값이 들어가는데 몇이든 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible)박스로 변하고 원래의 크기보다 커지며 빈 공간을 매우게 된다 기본값▶ 0
.item {
flex-grow: 1;
/* flex-grow: 0; */ /*기본값*/
}
/* 1:2:1의 비율로 세팅할 경우 */
.item:nth-child(1) {flex-grow: 1;}
.item:nth-child(1) {flex-grow: 2;}
.item:nth-child(1) {flex-grow: 1;}
flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다고 생각하면 됩니다
3. flex-shrink :유연하게 줄이기
flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다. flex-shrink에는 숫자값이 들어가는데 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템은 유연한(Flexible)박스로 변하고 flex-basis보다 작아진다. 기본값이 1이기 때문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아진다.
.item {
flex-basis: 150px;
flex-shrink: 1; /* 기본값 */
}flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 칼럼을 쉽게 만들 수 있다. 고정 크기는 width로 설정
.container {
display: flex;
}
.item:nth-child(1) {
flex-shrink: 0;
width: 100px;
}
.item:nth-child(2) {
flex-grow: 1;
}
4. flex :flex-grow, flex-shrink, flex-basis를 한번에 쓸 수 있는 축약형 속성
.item {
flex: 1;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0% */
flex: 1 1 auto;
/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
flex: 1 500px;
/* flex-gorw: 1; flex-shrink: 1; flex-basis: 500px; */주의할 점은, flex: 1; 이런 식으로 flex-basis를 생략해서 쓰면 flex-basis의 값은 0이 된다.
.item {
flex: 1 1 0;
}
.item {
flex: 2 1 0;
}flex-basis: 0;기본 점유 크기를 0으로 만들어버려 결국 전체 크기를 1:2:1로 나누어가져서, 영역 자체의 크기를 정확히 1:2:1의 비율로 설정된다 여백의 비가 아닌, 영역 자체를 원하는 비율로 분할하기를 원한다면 이렇게 flex-basis을 0으로 하면 손쉽게 처리할 수 있다.
4. align-self
align-items의 아이템 버전이다. align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬
.item {
align-self: auto;
/* align-self: stretch; */
/* align-self: flex-start; */
/* align-self: flex-end; */
/* align-self: center; */
/* align-self: baseline */
}기본값은 auto로, 기본적으로 align-items 설정을 상속 받는다.
align-self는 align-items보다 우선권이 있고, 전체 설정보다 각각의 개별 설정이 우선한다는 것
5. order :배치순서
각 아템들의 시각적 나열 순서를 결정. 숫자값이 들어가며, 작은 숫자일 수록 먼저 배치된다. "시각적" 순서일 뿐, HTML 자체의 구조를 바꾸는 것이 아니므로 접근성 측면에서 사용에 주의해야한다. 시각 장애인분들이 사용하는 스크린 리더로 화면을 읽을 때, order를 이용해 순서를 바꾼 것은 의미가 없다.
.item:nth-child(1) { order: 3;}
.item:nth-child(2) { order: 1;}
.item:nth-child(3) { order: 2;}6. z-index
positioon에서의 z-index랑 똑같은 의미
.item:nth-child(2) {
z-index: 1'
transform: scale(2);
}