Как выровнять правый последний элемент flexbox, когда margin-left: auto не работает из-за flex-wrap: wrap?

Question

Я попытался выровнять изображение по правому краю в своем контейнере flexbox (благодаря мобильному подходу сначала я использую flex-wrap: wrap, и теперь у меня есть два столбца с шириной 100%, которые изменят ширину до 50% в некоторой точке останова) и странно это работает только когда я использую text-align: right.

Я попробовал margin-left: auto на img или justify-content: space -ween на родительском элементе, но img все еще остается позиционированным при таком подходе.

Если бы кто-нибудь мог помочь мне найти лучшее решение, я был бы счастлив.

Вот что у меня есть:

<div class="hero">

    <div class="hero__col hero__message">

        <h1>Hello world</h1>

    </div>

    <div class="hero__col hero__image">

        <!-- You need at least 10 reputation to post images -->

    </div>

</div>

<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

.hero {
    display: flex;
    flex-wrap: wrap;
    background: #ddd;
}

.hero__col {
    width: 100%;
}

.hero__message {
    text-align: center;
}

.hero__image {
    text-align: right;
}
</style>

Answer 1

Я попробовал поле слева: авто на img

Автоматические поля не работают для встроенных элементов.

Вам нужно сделать изображение display: block, чтобы получить желаемый эффект.