flex
사이트를 보면, 대부분 레이아웃은 수직으로 구성되어 있기 때문에 위에서 아래로 스크롤 합니다. 이처럼 레이아웃은 저희가 많이 사용하는 요소들이 기본적으로 블록 개념으로 쌓여 있기 때문에 '수직'은 상대적으로 쉽게 만들 수가 있는데요? flex 알기 전 저는 메뉴나 이미지 등을 수직이 아닌 '수평'으로 구성하기 위해선 float을 left로 지정해 줬습니다. 근데 이제부턴 이러한 구성 방법 말고 오늘 제가 배운 Flex(Flexible Box)를 이용해 레이아웃을 쉽게 수평으로 구성할 수 있게 됐습니다.
먼저 수직으로 쌓인 박스들을 수평으로 구성하기 위해 박스부터 한 5개 쌓아 봤습니다.
<body>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
그리고 평소 같으면 li에 float: left;로 왼쪽에서 오른쪽으로 쌓이게 했겠지만, 오늘 배운 flex를 이용해 한 번 가로로 정렬해 보도록 하겠습니다.
ul {
list-style: none;
width: 500px;
margin: 0 auto;
display: flex;
}
flex로 원하는 속성을 부여하고자 할 땐, 가로(왼쪽-오른쪽)로 배치하고자 하는 대상의 부모 박스에 정의해 줘야 하며, 부모 박스에 display: flex;를 적용해 줍니다.
대상을 수평으로 정렬할 땐 flex-direction: row;로 지정해 주면 되고, 거꾸로 지정해줄 수도 있습니다. 이럴 땐 flex-direction: row-reverse;로 지정해 주면 됩니다. 이름 그대로 reverse입니다. 제가 지금 저 밝은 색에서 어두워지는 박스에 적용을 하면 어두워지면서 점점 밝아지겠죠?
ul {
list-style: none;
width: 500px;
margin: 0 auto;
display: flex;
flex-direction: row-reverse;
}
CSS 색상을 일일이 다시 지정해 줄 필요가 없습니다. 지금은 코드가 매우 짧고 박스도 몇 개 없지만, 정말 색을 반전을 줘야 하는 상황이라면 reverse를 꼭 잊으면 안될 것 같습니다. 뭐 그 이전에 다들 구글 검색으로 답을 찾으시겠지만요.
flex-flow
flex-flow 속성은, flex의 방향과(row, colum) 줄 배치를 한 꺼번에 지정할 수 있습니다.
줄 배치 부분에는 nowrap과 wrap을 입력할 수 있습니다. 여기서 nowrap은 그 줄 안에 가로로 넣고자 하는 박스를 너비 상관 없이 억지로 꾸겨 넣는 것이고요, wrap은 박스의 너비를 그대로 가져갑니다. 당연히 사이즈를 초과하면 밑으로 떨어지겠죠?
예를 들어, 제가 li는 각각 100px씩 줬는데, ul의 크기는 400px입니다. 이것을 row로 가로로 정렬하게 되면 당연히 4개의 박스만 쌓이고 밑에 나머지 1개가 떨어지겠죠?
ul {
list-style: none;
width: 400px;
margin: 0 auto;
display: flex;
}
하지만 저는 모양이 조금 찌부 되더라도, 박스 너비를 무시한 채 저 5개의 박스를 가로 정렬 하고 싶으면, 이럴 때 다음과 같이 flex-flow: row nowrap;을 해 주시면 됩니다.
ul {
list-style: none;
width: 400px;
margin: 0 auto;
display: flex;
flex-flow: row nowrap;
}
이처럼요. 제가 다룬 내용이 얼마 없지만, 크게 flex란 어떤 것인지 같이 아셨으면 좋겠습니다. 물론 이 안에도 다양한 문법, 속성들이 많아서 제가 현 포스팅에 다 다루진 못했지만, 앞으로 클론코딩도 하고, 반응형도 만들고 하면서 수평 정렬을 할 일이 보통 많을까요 ㅎ 그럴 때마다 최대한 float 말고 flex를 사용하도록 노력해야겠습니다.
'FE > HTML5 CSS3' 카테고리의 다른 글
| [HTML5 CSS3] 복습 (0) | 2021.06.25 |
|---|
댓글