목록으로

div에 flex로 묶고 안에 div 에 border를 줬을때 가운데 간격을 2px 띄울수 없을까요? 채택완료

강력드라이브

프로필 보기 이 회원 글보기 이 회원의 댓글보기

1년 전 조회 4,193

답변 2

http://sir.kr/data/editor/2404/981365793_1711981454.1447.png" />

http://sir.kr/data/editor/2404/981365793_1711981460.7143.png" />

위 캡쳐처럼 div에 flex 로 묶고 안에 두개의 div를 border 1로 줬을때 가운데 2px 정도 띄우려고 하는데

잘 안되네요..ㅠ

</p>

<p><div class="w-100 d-flex flex-wrap justify-content-between">

    <div style="height:65px; padding:2px 0 2px 0; border-radius:5px;" class="w-50 box border border-secondary d-flex justify-content-center align-items-center text-center align-middle">1</div>

    <div style="height:65px; padding:2px 0 2px 0; border-radius:5px;" class="w-50 box border border-secondary d-flex justify-content-center align-items-center text-center align-middle">2</div>

</div></p>

<p>

flex를 쓸때 가운데 간격을 주려면 어떻게 하면 좋을까요?

#css

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

채택된 답변

+20 포인트

설국열차

프로필 보기 이 회원 글보기 이 회원의 댓글보기

1년 전

<div class="w-100 d-flex flex-wrap justify-content-between" style="box-sizing: border-box;">

    <div style="height: 65px; width: calc(50% - 5px); margin-right: 5px; padding: 2px 0; border-radius: 5px; box-sizing: border-box;" class="box border border-secondary d-flex justify-content-center align-items-center text-center align-middle">1</div>

    <div style="height: 65px; width: calc(50% - 5px); margin-left: 5px; padding: 2px 0; border-radius: 5px; box-sizing: border-box;" class="box border border-secondary d-flex justify-content-center align-items-center text-center align-middle">2</div>

</div>

마진 만큼을 width에서 뺴주고 width 을 지정 하면 됩니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

배르만

프로필 보기 이 회원 글보기 이 회원의 댓글보기

1년 전

</p>

<p><link href="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"</a> rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"></p>

<p> </p>

<p><style>

.flex-01 .flex-01-01 {

    height:65px; padding:2px 0 2px 0; border-radius:5px;

}

</style></p>

<p> </p>

<p><!-- <div class="w-100 d-flex flex-wrap justify-content-between"> -->

<div class="w-100 d-flex justify-content-between gap-1 flex-01">

    <div class="w-50 box border border-secondary d-flex justify-content-center align-items-center text-center align-middle flex-01-01">1</div>

    <div class="w-50 box border border-secondary d-flex justify-content-center align-items-center text-center align-middle flex-01-01">2</div>

</div></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인