我是flexBox的新手，我正在努力做一个水平的滚动网站。这个想法是将第一个项目显示为100％的高度和宽度，如覆盖屏幕，剩余的项目在右侧，这只会在滚动时显示。
这是我想要做的一个形象：
我尝试将第一个项目设置为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>
解决方法
默认情况下，Flex项目具有“flex-shrink：1”。如果您希望第一个项目填充容器并强制别人溢出(就好像您所做的那样)，那么您需要设置“flex-shrink：0”。
最好的方法是通过“flex”的简写，您已经用它来“flex：10”。
只需用flex替换它：10 0 auto – ‘0’，它的flex-shrink为0，这样可以防止它在宽度以下缩小：100％。
也许更好：只是给它flex：没有，因为我不认为你真的从“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/
