[css] display:flex - 가로세로가운데정렬 > NOTE

[css] display:flex - 가로세로가운데정렬

페이지 정보

작성자 ROOT
댓글 0건 조회 1,288회 작성일 24-02-29 16:05

본문

박스의 가로세로 정렬뿐 아니라 반응형일 경우 알아서 정렬을 딱!!!

일단 부모클래스를 플렉스로 만듭니다.

.box-wrap {

display:flex;

}

이걸 먼저 선언해줘야 나머지 속성들을 쓸수 있어요.

그 속성으론 justify-content, align-items, flex-direction, flex-wrap

하나씩 알아봅시다.

가장 기본적으로 그냥 코딩한 예를 들께요.

<html>
<head>
<title>TEST</title>
<style>
html, body {
margin:0;
height:100%
}
.box-wrap {
display:flex;
height:100%;
background:#ccc
}
.box {
width:100px;
height:100px;
background:yellow;
border:1px solid #000;
margin:10px
}
</style>
</head>
<body>
<div class="box-wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</body>
</html>

이제 .box-wrap 의 스타일변경만으로 box들의 배열을 자유자재로 바꿔봅시다

flex-direction

정렬의 방향을 결정

.box-wrap {display:flex;height:100%;background:#ccc;flex-direction:column-reverse}

디폴트는 가로방향으로 row입니다. reverse는 박스도 방향도 역순으로 정렬합니다.

flex-direction:row

flex-direction:row-reverse

flex-direction:column

flex-direction:column-reverse

justify-content

수평방향으로 여백을 두는 방식

이건 위에서 정한 방향에 영향을 받습니다.

디폴트는 flex-start 입니다.

justify-content : flex-start - 시작점에 맞춰 정렬 (가로일경우 왼쪽, 세로일경우 위)

justify-content : flex-end - 끝점에 맞춰 정렬

justify-content : center - 가운데 정렬

justify-content : space-around - 자식요소들의 여백을 균등하게 정렬

justify-content : space-between - 여백을 균등하게 정렬

align-items

수직방향 여백을 두는 방식

자식요소를 방향을 기준으로 수직방향 어디에 위치할지 정하는 속성입니다.

vertical-alaign 속성과 유사한거죠

align-items : flex-start

align-items : center

align-items : flex-end

flex-wrap

공간이 좁아질때 줄바꿈여부

flex-wrap:nowrap - 기본값으로 폭이 좁아지면 정해놓은 사이즈도 무시하고 같이 좁아지면서 줄바꿈이 되지 않아요

flex-wrap:wrap - 정해놓은 사이즈를 유지한채 줄바꿈 됩니다.

flex를 통해 레이아웃 구조잡기도 쉬울뿐더러 그동안 골치였던 가로세로 가운데 정렬을 더 쉽게 할수 있죠~

부모에 아래처럼 선언해주고

display:flex;

align-items:center;

justify-content: center

자식요소만 배치하면 바로 가로세로 정렬이 딱!!

부모자식의 관계만 지켜주면

플렉스 속성안에 또 플렉스 속성을 써줘도 됩니당~~

.box-wrap {display:flex;height:100%;background:#ccc;flex-wrap:wrap;align-items:center;justify-content: center}
.box {display:flex;width:100px;height:100px;background:yellow;align-items:center;justify-content: center}
.s_box {width:50px; height:50px; background:red}<div class="box">

<div class="box-wrap">
<div class="box">
<div class="s_box">1</div>
</div>
</div>

댓글목록

등록된 댓글이 없습니다.

페이지 정보

본문

관련링크

댓글목록