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

Question

[miko0ffff]

<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;  
    }

Comments

[Destell]

Какой именно блок вы хотите сделать не во всю страницу? Если .container1, то вам надо прописать свойство display: flex его родителю. И в следующий раз заливайте пример на codepen.

Answer 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 и посмотрите, как я реализовал это для карточки товара для ПК и планшета, а также для смартфона.