2023/08/11 개발일지(배열 / 정렬)

장현웅·2023년 8월 11일
0

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

0개의 댓글