CSS Flexbox를 사용하여 두 Div를 나란히 배치하려면 어떻게 해야 합니까?

CSS를 사용하여 두 Div를 나란히 배치

웹 개발에서는 요소를 나란히 배치해야 할 필요성이 발생합니다. CSS에서 이를 달성하는 한 가지 방법은 Flexbox를 사용하는 것입니다.

Flexbox 접근 방식

Flexbox를 사용하면 유연한 그리드형 구조로 요소를 배치할 수 있습니다. 두 개의 div를 나란히 배치하려면:

1. 상위 컨테이너를 Flex로 설정: 상위 div에 display: flex를 추가합니다. 이렇게 하면 가변상자 레이아웃이 가능해집니다.
2. 좁은 Div 정의: 너비가 200픽셀이어야 하는 div의 경우 너비를 200픽셀로 설정합니다. 또한 가시성 목적으로 스타일을 지정할 수 있습니다.
3. 왼쪽 Div가 남은 공간을 채우도록 허용: 나머지 div에 flex: 1을 사용합니다. 이 속성은 상위 컨테이너 내의 남은 사용 가능한 공간을 차지하도록 div를 늘리도록 브라우저에 지시합니다.

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

<div>

이 접근 방식을 따르면 두 개의 div를 나란히 쉽게 배치할 수 있습니다. 하나는 너비가 고정되어 있고 다른 하나는 나머지 화면 공간을 채우고 있습니다.

위 내용은 CSS Flexbox를 사용하여 두 Div를 나란히 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!