HTML+CSS / ★flex속성 6가지 / day11 / 25.04.15

티스토리 뷰

HTML+CSS

HTML+CSS / ★flex속성 6가지 / day11 / 25.04.15

one-dy 2025. 4. 15. 12:34

Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 방향이 가로로 바뀝니다.

내용이 이어져서 day10, 25.04.14내용까지 추가

display: flex;

자식 박스를 편리하게 정렬하는 flex속성

어플리케이션 형태의 페이지 또는 반응형 홈페이지에서 많이 쓰인다.

유동 레이아웃 구현 시 편리하게 사용할 수 있다.

figma의 auto layout과 유사하게 동작한다.

flex속성은 익스(인터넷 익스플로러)10 이상에서만 지원된다.

하지만 10버전 이상에도 종종 버그가 발생하므로 익스 환경에서는 float속성(전통방식)을 사용하기를 권장한다.

익스 11버전에서는 -ms-, -webkit-, -moz- 브라우저 접두사 (=벤더프리픽스) 함께 선언해야 하며 모바일 하위 버전에서는 webkit-flex;를 사용해야 정상적으로 작동된다.

· 부모 박스를 '컨테이너(연못)' 안에 있는 여러 개의 '자식박스(연잎)'들을 단방향으로 정렬할 때 사용하는 속성이다.

가로 또는 세로 방향으로 정렬할 수 있고, 기본 값은 가로 방향이다.

· ★★ flex속성은 부모에 적용한다.

· 부모에 flex가 적용되면 그 안에 자식들은 자동으로 가로로 정렬된다.

· 자식들을 여러 방법으로 정렬하고 싶다면 하위정렬 속성을 사용하고, 이 속성들 모두 '부모박스'에 적용해야한다. ★

· 기본 flex의 속성은 자식박스의 총 넓이가 부모컨테이너보다 넓을 경우 자식들에 적용된 width값을 무시하고 무조건 한 줄에 걸쳐 정렬하는 것이 기본값이다.

· 부모박스에 맞춰 한 줄에 맞춰 무조건 정렬하게 되있다. 자식박스가 아무리 많아도 마찬가지로 한 줄에 정렬된다.

· 만약 자식들의 넓이, 높이를 그대로 유지하고 싶거나 또는 자식들 사이에 동일한 간격을 두어 배치하고 싶다면 하위 정렬 속성을 사용한다.

· 하위 정렬 속성들은 반드시 부모 박스에 display: flex;가 걸려 있어야만 쓸 수 있다.

<body>에 box-sizing: border-box넣으면 안된다! 자식한테 상속이 되지 않기 때문 전체선택자에도 넣지 않는다. 다 넣으면 레이아웃 무너졌을 때 컨트롤하기 힘들다. font-family, line-height, font-size지정하는데 flex는 쓰지 않는다!

★ ★ 하위 정렬속성★ ★

1. justify-content : 가로 정렬 속성(부모박스의 왼쪽, 중앙, 오른쪽과 같이 '가로방향'으로 자식박스들을 일괄 정렬하는 속성

속성값

① flex-start : 기본값, 부모박스의 왼쪽부터 정렬된다.

② flex-end : 자식박스들을 부모박스의 오른쪽으로 정렬한다.

③ center (=margin: 0 auto) : 자식박스들을 부모박스의 가로 중앙에 정렬한다.

④ space-between : 부모박스 안의 자식박스를 양끝 정렬하여 사이사이 동일한 여백을 만든다.

⑤ space-around : 자식 요소들 양 옆으로 동일한 간격을 주어 정렬한다.

⑥space-evenly(고르게) : 자식 요소들을 부모 박스 안에서 좌우 동일한 간격으로 고르게 정렬한다.

2. align-items : 세로 정렬 속성(부모박스의 top, middle, bottom)과 같이 '세로방향'으로 자식박스들을 일괄 정렬하는 속성

속성값

① flex-start : 기본값, 부모박스의 top위치에 정렬된다.

② flex-end : 자식박스들을 부모박스의 bottom위치에 정렬한다.

③ center (=margin: 0 auto) : 자식박스들을 부모박스의 middle위치에 정렬한다.

④ baseline : 요소들을 컨테이너의 시작 위치에 정렬한다.

⑤ stretch : 요소들을 컨테이너에 맞도록 늘린다. 이때, 자식박스의 정렬방향이 row면 자식박스에 height속성이 없어야한다. 자식박스의 정렬방향이 column이면 자식박스에 width이 없어야한다.

*정렬이 가로로 되어 있으면 row 방향, 세로면 column방향이라고 부른다.

*순서는 유지된 상태에서 가로 오른쪽으로 배치해야된다.

justify-content: flex-end;

3. flex-direction : 나열방향속성 *박스들의 순서배치

부모박스 안에 자식박스들 나열 방향을 정하는 속성이다.

기본값은 가로로 정렬되고 상황에 따라 세로 방향으로 바꿀 수 있다.

속성값

① row : 기본값으로 자식 요소들을 부모 박스 안에서 가로로 정렬한다.

② column : 자식 요소들을 부모박스 안에서 세로로(block방향) 정렬한다.

③ row-reverse : 자식 요소를 부모박스에서 가로로 정렬하는데 반대로 정렬한다. (부모박스가 통째로 뒤집어서 반전됐다고 생각해라! 부모가 뒤집혀서 자식박스들도 순서가 바뀌게 된다.)

④ column-reverse : 자식 요소를 부모박스에서 세로로 정렬하는데 반대로 정렬한다.

※flex속성은 (바로 아래계층만) 자손요소까지만 적용된다!

*row-reverse, column-reverse를 사용하면 자식 요소들의 순서도 바뀐다. (start→end)

* 후손과 자손 개념 : 후손은 머나먼 자식들까지, 자손은 직계. 태그를 여러 겹 감싸고 있을 때 후손까지 한꺼번에 정렬되지 않는다.

4. flex-wrap : 감싸기 속성자식요소 넓이 높이 유지 속성

부모박스의 넓이보다 자식박스의 넓이 총 합이 더 넓을 경우 flex를 적용하면 자식박스에 선언된 넓이를 무시하고 자식박스의 넓이를 물리적으로 줄여 한 줄에 정렬한다. 이때, 자식요소에 선언된 넓이를 무시하지 않고 그대로 유지시키기 위해 사용하는 속성.

속성값

① nowrap : (기본값) flex: wrap;을 안 쓴 것과 같다. 요소의 크기와 상관 없이 모든 자식 요소를 한 줄에 정렬한다.

(넓이 유지 x)

② wrap : 자식 요소에 선언된 넓이 높이를 유지하고, 부모박스에 자리가 부족한 경우 여러 줄에 걸쳐 정렬한다.

③ wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬한다. (부모박스를 상하로 뒤집는다고 생각해라!)

④ column-reverse : 자식 요소를 부모박스에서 세로로 정렬하는데 반대로 정렬한다.

5. flex-flow : 나열방향( flex-direction )+ 감싸기 속성( flex-wrap)

그래서 flex-flow를 사용하면 두 속성을 한꺼번에 선언할 수 있다. 속성값을 공백으로 구분하여 한꺼번에 선언한다.

기본형

flex-flow : 나열방향 감싸기속성; ex) flex-flow : row wrap; / flex-flow : column wrap-reverse;

6. align-content : 컨텐츠 세로 정렬속성 자식요소 한 줄이 하나의 contents!

flex된 컨테이너 안에 자식들이 매우 많을 경우 flex-wrap을 사용하면 여러 줄이 형성된다. 그래서 속성 이름이 align-content이다. 컨텐츠들을 각각 세로로 정렬하고 요소 사이에 (between), 요소 주위에(around), 요소를 고르게(evenly) 동일 간격을 주어 배치할 수도 있다.

속성값 (align-items와 justify-contents에 있는 속성값을 함께 사용한다.)

① flex-start : 여러 줄들을 컨테이너의 top 위치에 정렬한다.

② flex-end : 여러 줄들을 컨테이너의 bottom 위치에 정렬한다.

③ center : 여러 줄들을 컨테이너의 middle 위치에 정렬한다.

④ space-between : 여러 줄들을 top, bottom으로 양끝 정렬하여 사이에 동일한 간격을 만든다.

⑤ space-around : 여러 줄들 주위에 동일한 간격을 둔다.

⑥ space-evenly : 여러 줄들의 사이에 동일한 간격을 둔다.

⑦ stretch : 여러 줄들을 컨테이너에 맞도록 늘린다. (비어있는 공간이 width면 width가 없어야하고, height가 비어있으면 height가 없어야 늘어날 수 있다! 늘어날 수 있는 방향을 잘 봐라!)

7. gap 속성 : 컨텐츠 사이 간격(gutter)을 만들어주는 속성

컨텐츠 사이 간격을 만드는 속성으로 row-gap과 column-gap으로 나눠진다.

gap은 상하 좌우에 동일한 간격을 만들며 단위는 px, %, vw, vh와 같은 단위를 사용할 수 있다.

gap: 00px;

*앞에서 배운 속성들은 flex가 적용된 부모박스에 적용하는 정렬 속성이고,

아래 두 속성은 '자식박스'에 직접 적용하는 속성이다.

마찬가지로 반드시 부모박스에 flex가 적용되어야만 쓸 수 있다.

<!DOCTYPE html>

<head>

<title>하위정렬속성</title>

<style>

* {

margin: 0;

padding: 0;

}

/* 부모박스 */

.container1,

.container2 {

/* 그룹선택자 */

width: 1000px;

height: 700px;

background-color: coral;

margin: 50px auto;

/* 부모박스 display적용 */

display: flex; /* 부모박스 안에 자식박스에 flex를 주는 개념이라 자식박스 중에 inline속성이 들어가 있으면 적용이 안된다.*/

flex-direction: column;

flex-direction: column-reverse;

flex-direction: row;

/* ★★★★★★flex-direction이 column이면 부모박스를 옆으로 굴렸다고 생각해 justify content가 세로의 방향, start가 왼쪽 위, end가 왼쪽 아래, align-items는 굴려서 가로가 된다. align-items top방향은 가로 왼쪽, end는 가로의 가장 끝 오른쪽 맨위 부모박스가 통째로 돌아가고! 위에 붙어 있는 투명 테잎을 다시 가로세로 스위치해서 붙였다고 생각하기,첫번째 박스가 있는 곳이 start위치이다.★★★★★ */

}

.container2 {

/* 감싸기 속성 */

flex-wrap: nowrap;

flex-wrap: wrap-reverse;

flex-direction: column;

flex-direction: column-reverse;

/* 나열방향+감싸기 */

flex-flow: column wrap;

/* 컨텐츠 세로 정렬 속성 */

align-content: flex-start;

align-content: center;

align-content: flex-end;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

align-content: stretch; /* 스트레치 쓸 때 항상 비어있는 공간 확인해라. height로 늘어나야 되면 height가 없어야 되고, width로 늘려야된다면 width가 없어야된다. */

}

/* 자식박스 */

.container1 div,

.container2 div {

width: 100px;

height: 100px;

text-align: center;

line-height: 100px;

}

.box1 {

background-color: rgb(252, 192, 192);

}

.box2 {

background-color: rgb(179, 166, 236);

}

.box3 {

background-color: rgb(243, 155, 224);

}

.box4 {

background-color: rgb(174, 246, 255);

}

.box5 {

background-color: rgb(248, 234, 154);

}

.box6 {

background-color: rgb(252, 192, 192);

}

.box7 {

background-color: rgb(179, 166, 236);

}

.box8 {

background-color: rgb(243, 155, 224);

}

.box9 {

background-color: rgb(174, 246, 255);

}

.box10 {

background-color: rgb(248, 234, 154);

}

.box11 {

background-color: rgb(252, 192, 192);

}

.box12 {

background-color: rgb(179, 166, 236);

}

.box13 {

background-color: rgb(243, 155, 224);

}

.box14 {

background-color: rgb(174, 246, 255);

}

.box15 {

background-color: rgb(248, 234, 154);

}

.box16 {

background-color: rgb(252, 192, 192);

}

.box17 {

background-color: rgb(179, 166, 236);

}

.box18 {

background-color: rgb(243, 155, 224);

}

.box19 {

background-color: rgb(174, 246, 255);

}

.box20 {

background-color: rgb(248, 234, 154);

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

자식박스에 적용하는 flex속성

(부모박스에 display: flex;가 적용된 상태여야 자식박스에 order, align-self 쓸 수 있다.)

1. order : 순서 변경 속성

order 속성을 통해 flex안쪽 자식요소의 순서를 직접 변경할 수 있다.

order의 기본값은 0이며 양수나 음수로 순서를 바꿀 수 있다.

작은 수일수록 나열 순서가 앞으로 온다.

...

.container {

width: 700px;

height: 500px;

background-color: lavender;

margin: 50px auto;

display: flex;

}

.box1 {

background-color: rgb(25, 94, 94);

order: 1;

}

.box2 {

background-color: rgb(112, 34, 34);

order: -2;

}

.box3 {

background-color: rgb(101, 39, 158);

order: -1; /* order는 단위(px)가 없다. only숫자만 적어줘라!

숫자가 적을수록 나머지 박스보다 가장 앞으로 위치 */

}

.box4 {

background-color: rgb(138, 73, 27);

order: 2; /* 모바일 환경에서 아이콘의 위치(검색,로그인 아이콘)를 바꾸고 싶거나 카드의 순서 중 맨 아래에 있던 카드를 맨 위로 배치하고 싶을 때 등 필요하고 자주 사용한다. */

}

.box5 {

background-color: rgb(167, 139, 47);

}

</style>

☜기본값은 0

box2: order -2;

box3: order -1;

box5: order 0;

box1: order 1;

box4: order 2;

적용된 상태

즉, 숫자가 가장 낮은 게 가장 맨 앞에 위치하고

숫자가 높을 수록 뒤에 위치

2. align-self : 개별 요소 세로 정렬속성

(*부모에게 쓰는 건 align-items, 자식에게 쓰는 건 align-self)

align-self는 개별 요소를 세로로 각각 정렬할 때 사용하는 속성

align-self는 align-items에서 사용하는 속성값을 똑같이 사용한다.

값을 지정한 해당 태그의 세로 위치를 바꿀 수 있다.

속성값

① flex-start(기본값) : 해당 자식 요소를 부모 박스의 top 위치에 정렬한다.

② center : 해당 자식 요소를 부모박스의 middle위치에 정렬한다.

③ flex-end : 해당 자식 요소를 부모박스의 bottom위치에 정렬한다.

④ baseline : 해당 자식 요소를 부모박스의 글자 시작 위치에 정렬한다. = flex-start와 같다.

⑤ stretch : 해당 자식 요소를 부모박스에 맞게 늘린다.

<title>flex 자식박스에 적용하는 속성</title>

<style>

* {

margin: 0;

padding: 0;

}

.container div {

color: white;

font-size: 30px;

text-align: center;

line-height: 100px;

}

.container {

width: 700px;

height: 500px;

background-color: lavender;

margin: 50px auto;

display: flex;

}

.box1 {

background-color: rgb(25, 94, 94);

order: 1;

align-self: baseline;

width: 100px;

height: 100px;

}

.box2 {

background-color: rgb(112, 34, 34);

order: -2;

align-self: flex-start;

width: 100px;

height: 100px;

}

.box3 {

background-color: rgb(101, 39, 158);

order: -1; /* order는 단위(px)가 없다. only숫자만 적어줘라!

숫자가 적을수록 나머지 박스보다 가장 앞으로 위치 */

align-self: center;

width: 100px;

height: 100px;

}

.box4 {

background-color: rgb(138, 73, 27);

align-self: stretch; /* height 속성 자체가 없어야 한다. height:0 이나 auto;로 만든다고 해서 늘어나지 않는다. */

width: 100px;

}

.box5 {

background-color: rgb(167, 139, 47);

align-self: flex-end;

width: 100px;

height: 100px;

}

</style>

</head>

<body>

</div>

</body>

https://flexboxfroggy.com/#ko CSS:flex이해에 도움이 되는 게임

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

Overflow속성

컨텐츠 내부요소가 부모박스의 범위를 벗어났을 때 어떻게 처리할 것인지 지정하는 속성이다.

웹페이지를 만들다 보면 컨텐츠 성격에 따라 항상 높이가 고정되어 있는 박스가 있고 컨텐츠의 내용이 자주 업데이트가 되면서 높이가 일정하지 않은 박스도 있다. ex)게시판 글

웹페이지에서 기본 구조를 만드는 박스들은 대부분 높이가 고정되어 있고 게시판, 뉴스 페이지 등 어떤 박스들은 내용에 따라 박스 높이가 바뀔 수 있다. 이런 경우 overflow 속성을 사용한다.

속성값

①★hidden : 부모 박스에 width와 height속성이 있을 때 내부 요소가 부모 영역을 벗어날 경우 벗어난부분을 숨긴다. 만약 부모박스에 height속성이 지정되지 않으면 내부요소만큼 부모영역이 늘어난다. ***피그마 프레임에 이미지 넣을 때 액자모양만큼만 보여지는 기능/ 컨텐츠내용이 유동적으로 늘어나는 경우

overflow: hidden;을 높이값 대신에 쓰기도 한다. 유동적으로 보여주기 위해.

②★scroll : 영역을 벗어나는 부분은 스크롤바를 통해 나타나게 만든다.

③ visible : 기본값, 부모영역에서 벗어나더라도 그대로 보여준다.

④★auto : width,height이 있는 부모영역을 벗어나면 스크롤을 만들어 보여주고, 벗어나지 않으면 스크롤을 만들지 않는다.

⑤ initial : 기본값으로 설정한다.

⑥ inherit : 부모요소의 속성을 상속받는다.

...

.content1{

width: 200px;

height: 200px;

}

.content2{

width: 200px;

height: 200px;

overflow: visible;

}

.content3{

width: 200px;

/* 높이가 없을 경우 컨텐츠에 맞춰서 부모박스가 늘어난다. 즉 유동레이아웃을 만드는 방법 */

overflow: hidden;/* 높이를 대신해서 쓰기도 한다. */

}

.content4{

width: 200px;

height: 200px;

overflow: hidden;

}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel nesciunt rem harum mollitia, architecto, perferendis molestias voluptatum, earum beatae sint labore. Exercitationem ullam eaque id deleniti nobis odio. Quasi, ut.</p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel nesciunt rem harum </p>

</div>

<h4>박스의 지정된 높이만큼만 보여짐</h4>

</div>

글자 컨텐츠로는 가로 스크롤을 만들 수 없다. 알아서 아랫줄로 내려오기 때문에

이미지로 overflow: scroll;기능 사용한다.

▶스크롤 만들기 속성 overflow: scroll;

overflow: scroll;속성을 사용하면 지정한 부모박스의 넓이, 높이에서 자식 컨텐츠가 넘치는만큼 가로, 세로 스크롤을 만들어 보여준다. 이 때 박스 내부에 가로 또는 세로 스크롤을 만들어 보여주고 싶다면 overflow-x 또는 overflow-y속성을 사용할 수 있다. 원하는 스크롤만 나오게끔.

기본형

① overflow: hidden 또는 scroll;

: 영역을 벗어나는 가로 또는 세로 부분 스크롤을 숨기거나 나타나게 함.

② overflow-x : hidden 또는 scroll;

: 가로 스크롤을 숨기거나 보여준다.

③ overflow-y : hidden 또는 scroll;

: 세로 스크롤을 숨기거나 보여준다.

가로세로 스크롤이 모두 나오는게 기본값. 특정 스크롤만 보여주고 싶은 경우 어떤 스크롤은 숨기고 어떤 스크롤은 나타내야할지 정확히 지정해주기 !

*visual studio code : prettier : 틀린거 잡아줌.

.scroll_box1{

width: 250px;

height: 250px;

border: 3px solid black;

box-sizing: border-box;

float: left;

margin: 20px;

overflow: scroll;

}

.scroll_box2{

width: 250px;

height: 250px;

border: 3px solid black;

box-sizing: border-box;

float: left;

margin: 20px;

overflow-y: hidden; /* overflow-y:hidden만 써주어도 가로스크롤이 나타나게 되지만 나중에 오류가 생길 수도 있어서 정확하게 어떤 스크롤은 숨기고, 어떤 스크롤은 보여줘라 정확하게 표시해줘야한다. */

overflow-x: scroll;

}

.scroll_box3{

width: 250px;

height: 250px;

border: 3px solid black;

box-sizing: border-box;

float: left;

margin: 20px;

overflow-x: hidden;

overflow-y: visible;

}

</style>

</head>

<body>

▶overflow: auto;

ex)회원가입 시 이용양관 동의 페이지 흘러넘치게 되면 스크롤바를 만들어주겠다!라는 뜻

'HTML+CSS' 카테고리의 다른 글

구조&형태구조 / 제외.속성.상태.가상요소선택자 / day13 / 25.04.17 (1)	2025.04.17
#대남병원 / list-style속성 / day12 / 25.04.16 (1)	2025.04.16
HTML+CSS / 레이아웃 만들기 / flex / day10 / 25.04.14 (0)	2025.04.15
HTML CSS 기초 / day09 /25.04.11 (0)	2025.04.14
CSS 기초 / 블록속성특징 / css박스모델 / day07 / 25.04.09. (0)	2025.04.13

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/02 »
일	월	화	수	목	금	토
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

글 보관함

1D

티스토리 뷰