Как с помощью flexbox разместить блоки?

Question

Скажите, пожалуйста, в чем моя ошибка? Пытаюсь на прямой линии разместить текст и картинку таким образом, чтобы картинка была полностью прижата к правой стороне (без отступов), а текст находится между левым краем и изображением. По неизвестной мне причине текст прижимается к левому краю, и я не могу с ним ничего сделать.

Ах, да, поскольку таких полосок будет несколько (и все они будут в классе main), я сделал единый flexbox для main (с выравниванием в колонку), а уже каждую такую полоску выравниваю по вышеописанной схеме.

<main class="main">
    <div class="home">
        <div class="quote">
            <div class="text">
                <a>Здесь какой-то мой текст</a>
            </div>
        </div>
        <div class="image">
            <img src="https://aproekt.ucoz.net/12/man-with-mic-02.png" alt="main home background image" width="50%" height="50%">
        </div>
    </div>
    <div class="home2">
        Ха-ха
    </div>
    <div class="home3">

    </div>
</main>

.main {
    display: flex;
    flex-direction: column;
}

.main .home {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #FF0000;
    color: #FFFFFF;
}

.main .home .image {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.main .home .quote {
}

.main .home .quote a {
    font-size: 24px;
}

Спасибо!

Answer 1

Мне кажется не совсем то что нужно было?

Изображению нужно задать ширину или ограничить максимальную ширину

Не уверен в правильности рещения, так как не совсем вопрос понял

А главное что тег блочный и занимает всю ширину, блок .text или ограничить по ширне нужно или a добавить text-align: center;

.main{
    background-color: #FF0000;
    color: #FFFFFF;
}

.home{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.quote{
  display: flex;
  align-items: center; /* центр по вертикали*/
  justify-content: center;
  border: 1px solid black;
}

.text{
  max-width: 60%; /* Нужно задать ширину блока так как a по умолчанию блочный элемент, без этого можно указать просто text-align: center; */
  background-color: green;
}


.home .image{
  display: flex;
  justify-content: flex-end;
  width: 50%; /* нужно задать ширину фотографии!*/
  
  border: 1px solid black;
}

img{
  width: 100%;
  height: auto;
}

.main .home .quote a {
    font-size: 24px;
}

<main class="main">
    <div class="home">
        <div class="quote">
            <div class="text">
                <a>Здесь какой-то мой текст</a>
            </div>
        </div>
        <div class="image">
            <img src="https://aproekt.ucoz.net/12/man-with-mic-02.png" alt="main home background image">
        </div>
    </div>
    <div class="home2">
        Ха-ха
    </div>
    <div class="home3">

    </div>
</main>

UPD: Добавил для наглядности фон для текста и бордеры для блоков, убрал padding

БЛОГ НА HUSL

Как с помощью flexbox разместить блоки?

Ответы (1 шт):