Bật cuộn ngang trong flexbox

Question

Tôi mới sử dụng flexbox và tôi đang cố tạo một trang web cuộn ngang. Ý tưởng là hiển thị mục đầu tiên là 100% chiều cao và chiều rộng, như che màn hình với các mục còn lại ở bên phải, mục này sẽ chỉ được hiển thị khi tôi cuộn.

Dưới đây là hình ảnh của những gì tôi đang cố gắng để làm:

tôi đã cố gắng thiết lập các mục đầu tiên đến 100% chiều rộng, nhưng nó vẫn trang bị giống như các mặt hàng khác.

Đây là mã của tôi 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; 
    } 

Và mã HTML của tôi:

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

Answer 1

mục Flex có "flex-teo: 1" theo mặc định. Nếu bạn muốn mục đầu tiên điền vào vùng chứa và buộc những người khác tràn (như âm thanh của bạn), thì bạn cần đặt "flex-shrink: 0" trên nó.

Cách tốt nhất để làm điều này là thông qua viết tắt "flex", mà bạn đã sử dụng để cung cấp cho nó "flex: 10".

Chỉ cần thay thế bằng flex: 10 0 auto - chữ '0' sẽ giảm kích thước 0 0, ngăn không cho nó co lại bên dưới số width:100% mà bạn đã cung cấp.

Có lẽ tốt hơn: chỉ cần cung cấp cho nó flex: none, vì tôi không nghĩ rằng bạn thực sự nhận được bất kỳ lợi ích nào từ "10" ở đó, vì không có không gian trống để phân phối, nên "10" đang mang lại cho bạn 10 cổ phiếu vô dụng của không có gì.

Vì vậy mà làm cho quy tắc 'giật gân' của bạn vào đây:

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

Dưới đây là một fiddle với sự thay đổi này (nhưng nếu không sử dụng CSS mà bạn cung cấp/HTML). Điều này hiển thị như mô hình của bạn trong Firefox Nightly và Chrome: http://jsfiddle.net/EVAXW/