Flex(2)
(본 글은 1분코딩님의 https://studiomeal.com/archives/197를 참조하였습니다.)
[Item에 적용하는 속성]
- flex-basis ( 유연한 박스의 기본 영역 )
.item {
flex-basis: auto; /* 기본값 */
/* flex-basis: 0; */
/* flex-basis: 50%; */
/* flex-basis: 300px; */
/* flex-basis: 10rem; */
/* flex-basis: content; */
}
: Flex Item의 기본 크기를 설정합니다. (flex-direction이 row -> width
column -> height)
- auto일 때는 content의 크기로 된다.
- 100px으로 설정하면, 100px이 안되면 100px이 되고, 넘으면 그대로 유지!
- width : 100px; 으로 하면 모두다 100px으로 된다.
- flex-grow ( 유연하게 늘리기 )
.item {
flex-grow: 1;
/* flex-grow: 0; */ /* 기본값 */
}
: flex-basis보다 커질 수 있는지 결정하는 속성 (0 / 0보다 큰 수)
- 숫자의 의미는 flex-basis를 제외한 여백 부분을 나누는 비율을 의미한다.
/* 1:2:1의 비율로 세팅할 경우 */
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }
- flex-shrink ( 유연하게 줄이기 )
.item {
flex-basis: 150px;
flex-shrink: 1; /* 기본값 */
}
: flex-basis보다 작아질 수 있는지 결정하는 속성 (0 / 0보다 큰 수)
- 기본값이 1이기 때문에 flex-basis보다 작아질 수 있다.
- flex ( basis + grow + shrink )
.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-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}
: flex-basis + flex-grow + flex-shrink 한번에 사용하는 속성
- 여백의 비가 아닌 영역 자체를 원하는 비율로 분할하기 위해서는 flex-basis를 0으로 한다!
.item {
flex: 1 1 0;
}
.item:nth-child(2) {
flex: 2 1 0;
}
- align-self ( 수직축으로 아이템 정렬 )
.item {
align-self: auto;
/* align-self: stretch; */
/* align-self: flex-start; */
/* align-self: flex-end; */
/* align-self: center; */
/* align-self: baseline; */
}
: Item 하나하나 각각 개별에 대해 수직축으로 정렬을 시키는 속성
(Container의 전체 아이템 수직 정렬인 align-items보다 우선순위이다!)
- order ( 배치 순서 )
.item:nth-child(1) { order: 3; } /* A */
.item:nth-child(2) { order: 1; } /* B */
.item:nth-child(3) { order: 2; } /* C */
: 각 아이템들의 시각적 나열순서를 결정하는 속성
- z-index ( Z축 정렬 )
.item:nth-child(2) {
z-index: 1;
transform: scale(2);
}
/* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */
: z축으로 정렬을 할 수 있다. (1만 설정해도 나머지 아이템보다 위로 올라온다!)
Author And Source
이 문제에 관하여(Flex(2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@neity16/CSS-Flex2
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- flex-basis ( 유연한 박스의 기본 영역 )
.item {
flex-basis: auto; /* 기본값 */
/* flex-basis: 0; */
/* flex-basis: 50%; */
/* flex-basis: 300px; */
/* flex-basis: 10rem; */
/* flex-basis: content; */
}
: Flex Item의 기본 크기를 설정합니다. (flex-direction이 row -> width
column -> height)
- auto일 때는 content의 크기로 된다.
- 100px으로 설정하면, 100px이 안되면 100px이 되고, 넘으면 그대로 유지!
- width : 100px; 으로 하면 모두다 100px으로 된다.
- flex-grow ( 유연하게 늘리기 )
.item {
flex-grow: 1;
/* flex-grow: 0; */ /* 기본값 */
}
: flex-basis보다 커질 수 있는지 결정하는 속성 (0 / 0보다 큰 수)
- 숫자의 의미는 flex-basis를 제외한 여백 부분을 나누는 비율을 의미한다.
/* 1:2:1의 비율로 세팅할 경우 */
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }
- flex-shrink ( 유연하게 줄이기 )
.item {
flex-basis: 150px;
flex-shrink: 1; /* 기본값 */
}
: flex-basis보다 작아질 수 있는지 결정하는 속성 (0 / 0보다 큰 수)
- 기본값이 1이기 때문에 flex-basis보다 작아질 수 있다.
- flex ( basis + grow + shrink )
.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-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}
: flex-basis + flex-grow + flex-shrink 한번에 사용하는 속성
- 여백의 비가 아닌 영역 자체를 원하는 비율로 분할하기 위해서는 flex-basis를 0으로 한다!
.item {
flex: 1 1 0;
}
.item:nth-child(2) {
flex: 2 1 0;
}
- align-self ( 수직축으로 아이템 정렬 )
.item {
align-self: auto;
/* align-self: stretch; */
/* align-self: flex-start; */
/* align-self: flex-end; */
/* align-self: center; */
/* align-self: baseline; */
}
: Item 하나하나 각각 개별에 대해 수직축으로 정렬을 시키는 속성
(Container의 전체 아이템 수직 정렬인 align-items보다 우선순위이다!)
- order ( 배치 순서 )
.item:nth-child(1) { order: 3; } /* A */
.item:nth-child(2) { order: 1; } /* B */
.item:nth-child(3) { order: 2; } /* C */
: 각 아이템들의 시각적 나열순서를 결정하는 속성
- z-index ( Z축 정렬 )
.item:nth-child(2) {
z-index: 1;
transform: scale(2);
}
/* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */
: z축으로 정렬을 할 수 있다. (1만 설정해도 나머지 아이템보다 위로 올라온다!)
Author And Source
이 문제에 관하여(Flex(2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@neity16/CSS-Flex2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)