Html, CSS - 如何使用 flex css 在一行中显示一行？

Question

我正在尝试显示一行内的用户列表，这将是一行中的一行。显然，我的用户列表是使用 jinja2 从数据存储中提取的。如何在同一行中垂直显示用户。

$base-spacing-unit: 20px;
$half-spacing-unit: $base-spacing-unit / 2;

$color-alpha: #1772FF;
$color-form-highlight: #EEEEEE;

*, *:before, *:after {
    box-sizing:border-box;
}

.container {
    max-width: 900px;
    margin-right:auto;
    margin-left:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:20vh;
}

.table {
    width:100%;
    border:1px solid $color-form-highlight;
}

.table-header {
    display:flex;
    width:100%;
    background:#000;
    padding:($half-spacing-unit * 1.5) 0;
}

.table-row {
    display:flex;
    width:100%;
    padding:($half-spacing-unit * 1.5) 0;

    &:nth-of-type(odd) {
        background:$color-form-highlight;
    }
}

.table-data, .header__item {
    flex: 1 1 20%;
    text-align:center;
}

<!--    List dashboard form here   -->
    <h4 style="margin-top: 25px;">Your Dashboard:</h4>
    <div class="container">
        <div class="table">
            <div class="table-header">
                <div class="header__item"><a id="name" class="filter__link" href="#">Board name</a></div>
                <div class="header__item"><a id="wins" class="filter__link filter__link--number" href="#">Users</a></div>
                <div class="header__item"><a id="draws" class="filter__link filter__link--number" href="#">Account</a></div>
            </div>

            <div class="table-content">
                <div class="table-row">
                    <div class="table-data">{{ board.tasks }}</div>
                    {% for i in board.users %}
                    <div class="table-data">{{ i }}</div>
                    {% endfor %}
                    <div class="table-data">{{ board.title }}</div>
                </div>
            </div>

        </div>
    </div>
    <!--    End of list dashboard   -->

我已经尝试了以下愚蠢的方法，看看它是否有效：

<br> 在 html
flex-direction: column in css 只是为了那个特定的 table-data class

有办法吗？我是初学者，欢迎任何建议

Answer 1

分配新的 class 并将 display: block; 应用到用户数据 div。
您可能需要使用 !important 强制应用样式。

Html, CSS - 如何使用 flex css 在一行中显示一行？

Html, CSS - How to display row within a row with flex css?

html

css

jinja2