css - flexbox 在容器内拉伸(stretch)

Question

我正在尝试对齐容器内的 2 个 figure。

这里是 jade/pug 布局。

.container-fluid
    section#feeds_container
            section.row
                section.col-sm-12.d-flex
                        figure#pagination_up.d-flex.justify-content-center
                        figure#button_wrapper.d-flex.justify-content-end

尝试了 align-self-center 和 end 但无法定位这两个元素，一个位于最大宽度的中心，另一个位于右侧。

请帮忙。

Answer 1

justify-content属性应该设置为 display: flex 指向的父元素已应用，即 section.col-sm-12在这种情况下。

但是，您不需要设置它来实现您想要的输出，而是添加类 mx-auto到第一个<figure>元素。

.container-fluid
    section#feeds_container
            section.row
                section.col-sm-12.d-flex
                        figure#pagination_up.mx-auto First figure here
                        figure#button_wrapper Second figure here

CODEPEN

希望这对您有所帮助。