웹 페이지를 만들고 코드를 작성하면 그 코드들이 박스형태로 웹브라우저에서 보여지게 된다.
웹의 디자인에 따라서 몇개의 박스는 가로로 배치하고 싶을 수도 있고 세로로 배치하고 싶을 수도 있을 것이다. 이걸 도와주는 css속성이 있는데 display이다. 이 display중에서도 속성값으로 flex를 이용하면 된다.
<body>
<div class="box-wrap">
<div class="blue-box"></div>
<div class="red-box"></div>
<div class="yellow-box"></div>
</div>
</body>*{
box-sizing: border-box;
margin:0;
}
.box-wrap{
margin-left: 40%;
margin-top: 10%;
}
.blue-box{
width:100px;
height:100px;
background-color: #293462;
}
.red-box{
width:100px;
height:100px;
background-color: #F24C4C;
}
.yellow-box{
width:100px;
height:100px;
background-color: #F7D716;
}일단 파란색박스, 빨간색 박스, 노란색 박스를 만들고 box-wrap이라는 부모요소로 감싸주었다.
그런다음 부모요소에 display:flex;를 적용시켜보자
.box-wrap{
margin-left: 40%;
margin-top: 10%;
display: flex;
flex-direction: row;
}
이렇게 세로로 붙어있던 박스들이 가로로 정렬된것을 볼 수 있다. 코드에서 flex-direction이란게 있는데 이건 박스들을 어떻게 배치시킬건가에 대한 속성이다. 가로로 배치하고 싶으면 'row' , 세로로 배치하고 싶으면 'column'을 적어주면 된다.
flex-direction외 속성 중 justify-content 와 align-items가 있다.
justify-content는 만약 내가 박스들을 가로로 배치했다면 가로축으로 박스들을 어떻게 위치 시킬것인가에 대한 속성이다. 속성값이 되게 많은데 일단 left, right,center는 박스들을 부모요소 기준 왼쪽,오른쪽, 가운데로 이동시켜주는 속성값이다.
space-between, space-evenly, space-around 는 부모 요소 기준으로 space-between은 박스들의 사이에 균일한 간격을, space-evenly는 박스들의 사이와 양끝에 균일한 간격을 , space-around는 박스들의 둘레 양옆에 균일한 간격을 만든다.
align-items의 경우 내가 위의 박스처럼 가로로 배치를 했다면 세로축으로 어떻게 배치할것인가에 대한것이다. 이것도 justify-content와 비슷하다. 대표적으로 center,flex-start,flex-end등이 있는데 부모요소의 세로 기준 가운데, 세로축의 시작점, 세로축의 끝점을 의미한다.
정리하면
flex-direction : row;
justify-content = 가로축
align-items = 세로축
flex-direction : column;
justify-content = 세로축
align-items = 가로축
'css' 카테고리의 다른 글
| CSS 탐구생활 : 미디어 쿼리 사용하기 (0) | 2022.07.12 |
|---|---|
| CSS 탐구생활 : flex-shrink 와 flex-grow (0) | 2022.07.06 |
| CSS 탐구생활 : 폰트 바꾸기 (0) | 2022.06.24 |
| CSS 탐구생활 : Background에 image 넣기 (0) | 2022.06.20 |
| CSS 탐구생활 : content-box vs border-box (0) | 2022.06.20 |