Как сделать список описания выровненным по парам с Flexbox

Question

Я новичок в flexbox, и я пытался создать список описания, выровненный по парам, сложенным друг на друга, как в таблице.

Я попробовал некоторые техники flexbox, но ничего не работает

Это разметка

<div class="ad-overview">
                    <h3>Overview</h3>
                    <dl>
                        <dt>Mileage(KM)</dt>
                        <dd>4300</dd>

                        <dt>Condition</dt>
                        <dd>Locally used</dd>

                        <dt>Body Type</dt>
                        <dd>4 wheel drives & Suvs</dd>

                        <dt>Colour</dt>
                        <dd>Black</dd>

                        <dt>Fuel</dt>
                        <dd>Diesel</dd>

                        <dt>Transmission</dt>
                        <dd>Automatic</dd>

                        <dt>Duty Type</dt>
                        <dd>Paid</dd>

                        <dt>Interior</dt>
                        <dd>Leather</dd>

                        <dt>Engine size</dt>
                        <dd>2993</dd>

                        <dt>Year</dt>
                        <dd>2012</dd>

                    </dl>
                </div>

Это мой css

.ad-overview,
dl {
    display: flex;
}

dl {
    flex-wrap: wrap;
}

dt {
    font-weight: bold;
}

dt+dd {
    display: flex;
}

Это стиль компоновки, которого я пытаюсь достичь. Некоторая помощь будет оценена

Answer 1

Есть много решений вашей проблемы, самый простой из них - поместить каждую пару td и dd в блок и установить этот блок как flexbox с flex-direction:column, и вам также нужно будет добавить перенос, чтобы сделать это выглядит сложным, это основная идея, тогда вам придется внести некоторые изменения в код для поля, например, ширину ваших блоков и т. д., это ваше дело, следующий код покажет вам решение :

.ad-overview,
dl {
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.col{
display:flex;
flex-direction:column;
text-align:left;
width: 30%;
margin-bottom: 3%;
}

dt {
    font-weight: bold;
}
dd{
margin-left:0px;
width: 100%;
}

<div class="ad-overview">
                    <h3>Overview</h3>
                    <dl>
                        <div class="col">
                          <dt>Mileage(KM)</dt>
                          <dd>4300</dd>
                        </div>
                        <div class="col">
                          <dt>Condition</dt>
                          <dd>Locally used</dd>
                        </div>
                        <div class="col">
                          <dt>Body Type</dt>
                          <dd>4 wheel drives & Suvs</dd>
                         </div>
                         <div class="col">
                          <dt>Colour</dt>
                          <dd>Black</dd>
                          </div>
                          
                       <div class="col">
                          <dt>Fuel</dt>
                          <dd>Diesel</dd>
                          </div>
                          
                       <div class="col">
                          <dt>Transmission</dt>
                          <dd>Automatic</dd>
                       </div>
                       <div class="col">
                          <dt>Duty Type</dt>
                          <dd>Paid</dd>
                       </div>
                       <div class="col">
                          <dt>Interior</dt>
                          <dd>Leather</dd>
                       </div>
                          
                       <div class="col">
                          <dt>Engine size</dt>
                          <dd>2993</dd>
                       </div>
                          
                       <div class="col">
                          <dt>Year</dt>
                          <dd>2012</dd>
                       </div>

                    </dl>
                </div>