0

Всех приветствую. Есть контейнер с максимальной шириной. И в нем два блока. Все это flex. Как это все передвинуть к концу экрана вправо? Justiny пробовал, не работает. Извиняюсь за тупые вопросы, я учусьблок

2
  • 2
    Что Вы имеете ввиду под "то все передвинуть к концу экрана вправо", что именно Вы хотите передвинуть вправо? Предоставьте лучше ваш html код. 30 апр 2021 в 20:47
  • Если вы имеете ввиду левый блок "The Cabins" и второй блок от него изображение, тогда их обёртке задайте justify-content: space-between; и текст встанет с левой стороны как и стоял, а изображение сдвинется в самый край. Если же как вы сказали они оба должны переместиться в право, тогда justify-content: flex-end; . Их обёртка при этом должна быть width: 100%; - так как я сейчас вижу, что она растянута не на всю ширину экрана. 1 фев 2023 в 5:45

2 ответа 2

2

Не волнуйтесь, не существует глупых вопросов, особенно когда вы учитесь. Давайте рассмотрим, как можно выравнять ваши блоки вправо в контейнере с максимальной шириной, используя CSS и flexbox.

Предположим, у вас есть следующая разметка HTML:

<div class="container">
    <div class="block">Блок 1</div>
    <div class="block">Блок 2</div>
</div>

А CSS может выглядеть так:

.container {
    max-width: 1000px; /* Максимальная ширина контейнера */
    display: flex; /* Используем flexbox для выравнивания внутренних блоков */
    justify-content: flex-end; /* Это свойство выравнивает блоки к концу контейнера (вправо) */
}

.block {
    margin: 10px; /* Добавьте отступы, если это необходимо */
    padding: 10px; /* Добавьте внутренний отступ, если это необходимо */
    border: 1px solid black; /* Добавьте границы для видимости блоков */
}

В этом примере justify-content: flex-end; в CSS определяет выравнивание блоков к концу контейнера (вправо).

2
  • 1
    Плюсик я поставил но вот есть ньюанс, вопрос старый 2 окт 2023 в 12:58
  • И глупые вопросы существуют. Достаточно посмотреть вопросы с отрицательным рейтингом.
    – Глеб
    2 окт 2023 в 13:05
0

Попробуй:

   align-self: flex-end
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.