[ Web : CSS ] flexbox

Notice

Recent Posts

Recent Comments

Link

github

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

개발야옹

[ Web : CSS ] flexbox 본문

WEB/CSS

[ Web : CSS ] flexbox

kitez 2021. 11. 29. 17:05

flexbox

flexbox는 viewport( 웹페이지가 사용자에게 보여지는 영역 )나 요소의 크기가 불명확 또는 동적으로 변하는 경우 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다.

아래는 flexbox 사용 예시이다.

.flex-container{
	display : flex;
}

.flex-items{
	<!-- flex item에 대한 css 속성 설정 -->
    width : 50px;
    height : 50px;
}

display : flex 속성이 적용된 요소는 flex -container가 되고, flex-container의 자식 요소들은 flex-item이 된다.

flex item은 메인축에 따라 결정되는데 메인축의 방향은 flex-direction 속성으로 결정되며 기본값은 row이다.

flex-container 속성

1. flex-direction ( main axis )

- row ( 기본값 ) : 왼쪽 -> 오른쪽

.flex_container{
    display : flex;
    flex-direction : row;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- column : 위 -> 아래

.flex_container{
    display : flex;
    flex-direction : column;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- row-reverse : 오른쪽 -> 왼쪽

.flex_container{
    display : flex;
    flex-direction : row-reverse;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- column-reverse : 아래 -> 위

.flex_container{
    display : flex;
    flex-direction : column-reverse;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

결과에서 flex-item 2는 반정도만 보이고, flex-item3가 안보이는 이유는 flex-container의 height이 50px로, flex-item 3개의 크기보다 작기 때문에 더이상 보이지 않는다. height의 값을 더 크게 해주면 flex-item3까지 모두 보이는 것을 확인할 수 있다.

2. flex-wrap

위에서 본 flex-direction 예제에서는 flex-wrap값을 따로 지정해주지않아 기본값인 nowrap으로 설정되어서 flex-item이 flex-container의 크기를 벗어나 한줄에 배치가 되어 있는 것을 확인할 수 있다.

- nowrap ( 기본값 ) : flex-item이 부모요소인 flex-container를 벗어나더라도 한 줄에 배치

- wrap : flex-item이 부모요소인 flex-container를 벗어나면 여러 행에 걸쳐서 배치된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    width : 100px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- wrap-reverse : 여러행에 걸쳐 요소가 나열되는 순서가 시작점과 끝점이 반대로 되어 배치된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap-reverse;
    width : 100px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

3. justify-content

justify-content는 메인축 방향으로 item들의 정렬을 결정하는 속성이다.

- flex-start ( 기본값 ) : item들을 시작점으로 정렬 ( flex-direction 기준으로 )

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-end : flex-item들을 끝점으로 정렬

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-end;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- center : item 들을 가운데로 정렬

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : center;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-between : item들의 사이에 균일한 간격을 만들어준다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-between;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-around : item들의 둘레에 균일한 간격을 만들어줌

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-around;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-evenly : itme들 사이와 양 끝에 균일한 간격을 만들어 준다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-evenly;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

4. align-items

align-itmes 속성은 cross-axis 항목의 정렬을 제어한다. cross-axis는 flex-direction 속성 값과 반대이다.

- normal ( stretch ) ( 기본값 ) : 아이템들이 수직축 방향으로 끝까지 늘어난다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : stretch;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- center : item들을 가운데로 정렬

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : center;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-start : item들을 시작점으로 정렬한다. flex-direction이 row일 경우 위, column일 경우 왼쪽

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : flex-start;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-end : item들을 끝점으로 정렬한다. flex-direction이 row일 경우 아래, column일 경우 오른쪽

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : flex-end;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

5. align-content

flex-wrap 속성이 wrap으로 설정된 상태에서, item들의 행이 2 이상일 경우 수직축 방향 정렬을 결정하는 속성이다.

- stretch ( 기본값 )

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : stretch;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-start

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : flex-start;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-end

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : flex-end;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- center

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : center;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-between

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-between;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-around

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-around;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-evenly

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

flex-item 속성

1. flex-basis

flex-basiss 속성은 flex-item의 기본 크기를 설정하는 속성이다.flex-direction이 row일 경우에는 너비의 기본 크기를 지정하고, flex-direction속성이 column일 경우에는 높이의 기본 크기를 지정한다.

기본 크기를 지정해주는것이기 때문에 원래 flex-item의 크기가 flex-basis로 지정한 값보다 작다면 flex-basis에 맞춰서 크기가 늘어나지만 flex-item의 크기 값이 flex-basis로 설정한 값보다 크다면 원래 item의 크기로 유지된다.

만약 모든item들의 크기를 하나로 고정하고 싶을 경우에는 그냥 width를 사용하여 속성을 설정해주면 된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

2. flex-grow

flex-grow 속성은 flex-basis 속성으로 정해놓은 크기 값보다 커질 수 있는지를 결정하는 속성으로 flex-grow의 기본값은 0이다. flex-grow속성이 적용되어 있지 않거나 값이 0 인 경우에는 flex-container의 너비가 flex-item들의 너비의 합보다 크더라도 여백을 매워주지 않는다. 아래 예시 그림을 참고하면 더 쉽게 이해된다.

만약 flex-grow값을 1로 설정한 경우 아래 그림과 같이 위 그림에서는 남았던 container의 여백을 item들의 너비를 넓혀서 채우게 된다. 모든 item들에게 flex-grow : 1 속성을 줬기 때문에 모두 같은 크기로 여백을 채우게 된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 1000px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    flex-grow : 1;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

flex-item5 에만 flex-grow 속성을 주게 되면 아래와 같은 결과가 나오게된다. 다른 flex-item 1,2,3,4의 크기는 flex-basis로 설정한 100px; 이 되고, flex-item5 의 경우 flex-grow 값을 1로 주었기 때문에 container의 여백을 혼자서 모두 채우게 너비가 커지게 된다. container 의 너비는 1000px, flex-item 1,2,3,4 는 각각 flex-basis가 100px 임으로 총 400px이기 때문에 flex-item5의 너비는 600px이 되게 된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 1000px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

.flex_item5{
    color : red;
    flex-grow : 1;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

3. flex-shrink

flex-shrink는 flex-grow와 반대로 flex-basis 속성으로 정해진 값보다 작아질 수 있는지를 결정하는 속성이다. flex-shrink 속성의 기본값은 flex-grow 속성과 다르게 기본값은 1 로, flex-basis보다 작아질 수 있다.

아래 예시를 보면 flex-item5에만 flex-shrink 속성 값을 0으로 주어 다른 flex-item1,2,3,4 와 달리 너비가 유연하게 줄어들지 않고 width : 100px 값그대로 고정되어 있는 것을 확인할 수 있다. 그와 반대로 flex-item 1,2,3,4의 경우 container 너비가 60px로, flex-basis 값보다 20px 작아져 그에 맞춰 너비가 줄어든 것을 확인할 수 있다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    width : 60px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 80px;
    flex-shrink : 1;
}

.flex_item5{
    color : red;
    width : 100px;
    flex-shrink : 0;
    padding : 5px;
    border: 1px solid black;
}

출처 :

https://studiomeal.com/archives/197

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

https://d2.naver.com/helloworld/8540176

flex - CSS: Cascading Style Sheets | MDN

flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다.

developer.mozilla.org

728x90

'WEB > CSS' 카테고리의 다른 글

[SCSS] SCSS 문법 정리 (0)	2024.06.27
[ Web : CSS ] positon (0)	2022.07.27
[ Web - CSS media queries ] 반응형 웹 (0)	2021.11.17
[ Web - SCSS ] & Ampersand (0)	2021.11.16

'WEB/CSS' Related Articles

개발야옹

[ Web : CSS ] flexbox 본문

[ Web : CSS ] flexbox

flexbox

flex-container 속성

1. flex-direction ( main axis )

2. flex-wrap

3. justify-content

4. align-items

5. align-content

flex-item 속성

1. flex-basis

2. flex-grow

3. flex-shrink

'WEB > CSS' 카테고리의 다른 글

티스토리툴바