Включение горизонтальной прокрутки в flexbox

Я новичок в flexbox, и я пытаюсь сделать горизонтальный прокручиваемый веб-сайт. Идея состоит в том, чтобы показать первый элемент как 100% высоту и ширину, например, покрытие экрана с остальными элементами в правой части, которое будет отображаться только при прокрутке.

Вот образ того, что я пытаюсь сделать: enter image description here

Я попытался установить первый элемент на 100% ширину, но он по-прежнему установлен точно так же, как и другие элементы.

Вот мой CSS-код:

    body
    {
        margin: 0;
        padding: 0;
        background-color: rgb(242, 242, 242);

    }
    .flex-container
    {
        display: -webkit-box;      
        display: -moz-box;         
        display: -ms-flexbox;     
        display: -webkit-flex;     
        display: flex;    

        flex-flow:row;  
        height:100%;
        position:absolute;
        width:100%;


        /*flex-wrap:wrap;*/
    }
    .box
    {
        padding: 20px;
        color:white;
        font-size:22px;
        background-color: crimson;
        border:1px solid white;
        flex:1;
        -webkit-flex:1;
        text-align:center;
    min-width:200px;



    }
    .splash

    {
        background-image: url(1.jpg);
        width:100%;
            background-size:cover;
        background-position:50% 50%;
        background-repeat: no-repeat;
            transition: all 0.6s ease;
            flex:10;
        -webkit-flex:10;

    }

    .flex1:hover
    {
            flex:4;
        -webkit-flex:4; 
    }

И мой HTML-код:

<div class="flex-container">        
    <div class="box splash">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

Ответы

Ответ 1

Элементы Flex имеют "flex-shrink: 1" по умолчанию. Если вы хотите, чтобы первый элемент заполнил контейнер и заставил остальных переполняться (как это звучит, как вы,), вам нужно установить на нем "flex-shrink: 0".

Лучший способ сделать это - с помощью сокращения "flex", которое вы уже используете, чтобы дать ему "flex: 10".

Просто замените это на flex: 10 0 auto - '0', давая ему flex-shrink 0, что предотвращает его сжатие ниже width:100%, которое вы ему дали.

Возможно, лучше: просто дайте ему flex: none, так как я не думаю, что вы действительно получаете какую-либо выгоду от "10" там, так как нет свободного места для распространения в любом случае, поэтому "10" дает вам 10 бесполезных акций ничего.

Итак, это делает ваше правило "всплеска" следующим:

.splash {
    background-image: url(1.jpg);
    width:100%;
    background-size:cover;
    background-position:50% 50%;
    background-repeat: no-repeat;
    transition: all 0.6s ease;
    flex:none;
}

Вот сценарий с этим изменением (но в остальном используйте предоставленный CSS/HTML). Это похоже на ваш макет в Firefox Nightly и Chrome:  http://jsfiddle.net/EVAXW/

Ответ 2

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

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  overflow-x: auto;
}

.item {
/*how you style this does not really matter - depends on your requirements - but essentially you want the items to span full width, and that the default (every flex container item has flex-grow set to 1)*/
}

Не бери здесь: я изменил направление на column, так что flex-wrap теперь оборачивается горизонтально. Кроме того, вы можете изменить overflow-x на hidden, если вы не хотите, чтобы полоса прокрутки показывала - но не опускаете свойство overflow-x, так как это означает, что это будет родительский объект outter для переполнения (что я бы не хотел) желаю)

JS может затем войти.

ура