[Bootstrap v5.0] 플렉스를 이용한 요소 배치 방법(d-flex)

"d-flex"는 `<div>` 태그 내부의 요소들을 인라인으로 배치시키는 기능을 가지고 있다. `<a>` 태그로 다른 태그를 감싸게 되면 인라인 판정이 감싼 태그 전체로 적용되지만, 이를 막기 위해 `<a>` 태그를 `<div>` 내부에 위치시켜 원하는 레이아웃을 설정할 수 있다.

DriedPollack

Apr 12, 2024

[Bootstrap v5.0] 플렉스를 이용한 요소 배치 방법(d-flex)

Contents

d-flex란??예시 코드1 예시 코드2

d-flex란??

d-flex는 해당 <div> 태그 내부의 요소들을 in-line으로 배치시켜준다.

예시 코드1


<div class="card d-flex">
    <div th:each="orderItem : ${order.orderItemDtoList}" class="d-flex mb-3">
        <a th:href="'/item/' +${orderItem.itemId}" class="text-dark">
            <div class="repImgDiv">
                <img th:src="${orderItem.imgUrl}" class="rounded repImg" th:alt="${orderItem.itemNm}">
            </div>
            <div class="align-self-center w-75">
                <span th:text="${orderItem.itemNm}" class="fs24 font-weight-bold"></span>
                <div class="fs18 font-weight-light">
                    <span th:text="${orderItem.orderPrice} +'원'"></span>
                    <span th:text="${orderItem.count} +'개'"></span>
                </div>
            </div>
        </a>
    </div>
</div>

위 코드를 실행할 경우 <a> 태그로 다른 태그를 감싸게 되면 in-line 판정이 감싼 태그 전체로 적용된다.

예시 코드2


<div class="card d-flex">
    <div th:each="orderItem : ${order.orderItemDtoList}" class="d-flex mb-3">
            <div class="repImgDiv">
                <a th:href="'/item/' +${orderItem.itemId}" class="text-dark">
                    <img th:src="${orderItem.imgUrl}" class="rounded repImg" th:alt="${orderItem.itemNm}">
                </a>
            </div>
            <div class="align-self-center w-75">
                <a th:href="'/item/' +${orderItem.itemId}" class="text-dark">
                    <span th:text="${orderItem.itemNm}" class="fs24 font-weight-bold"></span>
                    <div class="fs18 font-weight-light">
                        <span th:text="${orderItem.orderPrice} +'원'"></span>
                        <span th:text="${orderItem.count} +'개'"></span>
                    </div>
                </a>
            </div>
    </div>
</div>

이를 막기 위해 <a> 태그를 <div> 내부에 위치시켜서 원하는 레이아웃을 설정할 수 있다.