Колонны и ряды сгибаются

64
9

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

Вот скриншот того, как это выглядит сейчас: http://prntscr.com/ndig4v (by lightshot) enter image description here

Вот HTML-код:

/* Stats */
#stats-container {
width: 100%;
height: 100%;
border: 1px black solid;
}
#free-stats {
width: 100%;
height: 45%;
border: 1px black solid;
}
#stats-column-one,
#stats-column-two {
display: flex;
flex-direction: column;
}
#stats-column-one {
width: 75%;
}
#stats-column-two {
width: 25%;
}
#stats-flex-one,
#stats-flex-two {
display: flex;
flex-direction: row;
}
#str-row,
#end-row,
#dex-row,
#eva-row,
#int-row,
#res-row,
#has-row {
background: black;
display: flex;
flex-direction: row;
position: relative;
width: 55px;
border: 1px yellow solid;
}
<div id="stats-container" class="yellow-black-shadow">
<div id="free-stats">FS</div>
<div id="stats-column-one">
<div id="stats-flex-one">
<div id="str-row">
<div class="stat-icon"></div>
<div id="str">SR</div>
</div>
<div id="dex-row">
<div class="stat-icon"></div>
<div id="dex">DR</div>
</div>
<div id="int-row">
<div class="stat-icon"></div>
<div id="int">IR</div>
</div>
</div>
<div id="stats-flex-two">
<div id="end-row">
<div class="stat-icon"></div>
<div id="str">ER</div>
</div>
<div id="eva-row">
<div class="stat-icon"></div>
<div id="eva">VR</div>
</div>
<div id="res-row">
<div class="stat-icon"></div>
<div id="res">RR</div>
</div>
</div>
</div>
<div id="stats-column-two">
<div id="has-row">
<div class="stats-icon"></div>
<div id="has">HR</div>
</div>
</div>
</div>

В основном все правильно, пока он не достигнет блока HR, он ДОЛЖЕН быть на правой стороне. Я хочу избежать использования float: right;

Я почти уверен, что делаю это не в том порядке, но я не уверен, в каком порядке я все испортил. Я играл с этим немного, но каждая другая вещь, которую я пробую, кажется, ломается немного больше, это самое близкое, что я получил.

спросил(а) 2021-01-25T08:07:11+03:00 5 месяцев назад
1
Решение
77

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

HTML:

<div id="stats-container" class="yellow-black-shadow">
<div id="free-stats">FS</div>
<div id="stats-column-container">
<div id="stats-column-one">
<div id="stats-flex-one">
<div id="str-row">
<div class="stat-icon"></div>
<div id="str">SR</div>
</div>
<div id="dex-row">
<div class="stat-icon"></div>
<div id="dex">DR</div>
</div>
<div id="int-row">
<div class="stat-icon"></div>
<div id="int">IR</div>
</div>
</div>
<div id="stats-flex-two">
<div id="end-row">
<div class="stat-icon"></div>
<div id="str">ER</div>
</div>
<div id="eva-row">
<div class="stat-icon"></div>
<div id="eva">VR</div>
</div>
<div id="res-row">
<div class="stat-icon"></div>
<div id="res">RR</div>
</div>
</div>
</div>
<div id="stats-column-two">
<div id="has-row">
<div class="stats-icon"></div>
<div id="has">HR</div>
</div>
</div>
</div>
</div>

Я просто завернул все это в другое содержимое div и добавил:

#stats-column-container {
display: flex;
flex-direction: row;
}

Я также полностью удалил это

#stats-column-one,
#stats-column-two {
display: flex;
flex-direction: column;
}

Для справки о том, как это должно было выглядеть http://prntscr.com/ndijk0 (by lightshot)

Надеюсь, что это поможет кому-то лучше понять порядок в будущем, потому что это иногда смущает меня.

ответил(а) 2021-01-25T08:07:11+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема