div 묶음을 여러개 그냥 만든다고 했을 때 구역이 나눠지면서 세로로 나열되는데
나는 이것을 가로 배열로 만들기 위해서 dixplay:flex; flex-direction: row/column; align-items: center; justify-content
만 생각했었다..
근데 단순하게 float: left
와 같이 해도 된다는 것을 깨달았다..
display는 배열이고 float는 정렬이다.
그래도 배열맞추는데 고생을 해봐서 다음에는 좀 더 수월할거라고 기대한다.
<body>
<div class="flex">1</div>
<div class="flex">2</div>
<div class="flex">3</div>
<div class="flex">4</div>
</body>
1
2
3
4
<style>
.display_flex{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
</style>
<body>
<div class="display_flex"> <!-- 정렬할 것들을 모아줘야함. -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
1234
<style>
.float{
float: left;
}
</style>
<body>
<div class=float>1</div>
<div class=float>2</div>
<div class=float>3</div>
<div class=float>4</div>
</body>
1234