@miko0ffff

Как сделать блочный элемент в блоке flex контейнера шириной не во весь блок?

<div class = "container1">
        <div class="content1">
            <div class ="travel">ПУТЕШЕСТВИЯ ПО РОССИИ</div><br>
         <div class="block"></div>
            <p>
                Самые интересные уголки России<br>
                Самые необычные маршруты<br>
            </p>
        </div>
        <div class="content2">
            <div class ="travel">ПУТЕШЕСТВИЯ ПО ЕВРОПЕ</div><br>
            <p>
                Разные страны, разные культуры, исторические<br>
                места и все самое интересное в современной<br>
                Европе
            </p>
        </div>
        <div class="content3">
             <div class ="travel">ПУТЕШЕСТВИЯ ПО АФРИКЕ</div><br>
            <p>
                Дикая природа, крокодилы, обезьяны, сафари<br>
                на джипах, гостиницы на деревьях и самые<br>
                опасные приключения ждут тебя
            </p>
        </div>
    </div>


.container1 {
    width:1200px;
    display: flex;
   }
.container1 div {
    width: 400px;
    color: darkblue;
    box-sizing: border-box;
}
img {
    margin: 15px;
}
.content1 {
     text-align: center;
     border: 4px solid darkblue;
}
.travel {
    font-size: 16px;
    padding-top: 5px;
}
.block {
    height: 5px;
    background: gold;
    flex-shrink: 50px;
}
.content1 p {
    color: darkblue;
    padding-top: 15px; 
    font-size: 14px;  
    }
  • Вопрос задан
  • 109 просмотров
Пригласить эксперта
Ответы на вопрос 1
@ognennyibayan
Во-первых, не кроссбраузерно. Надо прописывать display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; Также кроссбраузерность нужна для этого свойства -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
Если нужно на обычном ПК не на всю ширину, поставьте flex-grow: 0; Я пользуюсь более краткой записью flex: 0 1 32%;. Для примера зайдите на страницу kstb26.ru/catalog/cement и посмотрите, как я реализовал это для карточки товара для ПК и планшета, а также для смартфона.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы