Flexbox的序位水平

我使用Flexbox的并排Flexbox的序位水平

<div class="artist-wrapper"> 
    <div class="artist"></div> 
    <div class="artist"></div> 
    <div class="artist"></div> 
</div> 

.artist-wrapper { 
    display: flex; 
    height: 100%; 
    width: 100%; 
} 

.artist { 
    flex: 1; 
    height: 100%; 
}

它工作的很好放置一些元素的一面！在小屏幕上（如手机），`.artist-elements不应该并排存在，而应该放在彼此之间。有没有办法通过使用flexbox来做到这一点？

来源

2016-03-20 Jonas

你说的*彼此之间意味着*？您可能需要媒体查询.... –

一个元素应该位于另一个元素的下面。是啊！但我需要CSS flexbox命令... – Jonas

您需要媒体查询，然后允许包装在父级中。

JSFiddle Demo

.artist-wrapper { 
 
    display: flex; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.artist { 
 
    flex: 1; 
 
    height: 100px; 
 
    border: 1px solid grey; 
 
} 
 
@media screen and (max-width: 480px) { 
 
    .artist-wrapper { 
 
    flex-wrap: wrap; 
 
    } 
 
    .artist { 
 
    flex: 0 0 100% 
 
    } 
 
}

<div class="artist-wrapper"> 
 
    <div class="artist"></div> 
 
    <div class="artist"></div> 
 
    <div class="artist"></div> 
 
</div>

来源

2016-03-20 19:46:09

不需要媒体查询，只需添加min-width：400px;用于儿童和柔性包装：包装;为容器。媒体查询增加了更多的代码。维持这样的混乱很难。 –

真的吗？你想添加一个硬编码的值...这更容易维护......我想不是。 –

添加变量...大声笑，媒体查询强制为相同的事情写入2x代码，甚至更多。 –

Is this what you are after?这是使用display: inline-block

但这里是一个solution using flexbox，这个属性是flex-wrap: wrap，如果您删除min-width和min-height你可以有一个更流畅的布局。

来源

2016-03-20 20:08:24 lili2311

您可以使用min-width代替或使用媒体查询。

（见注释）

.artist-wrapper { 
 
    display: flex; 
 
    flex-wrap:wrap; 
 
} 
 
.artist { 
 
    flex:1; 
 
    min-width:250px;/* whatever breaking points you look for : here we have for 3 elements a first-breakpoint at 500px then another at 250 */ 
 
    min-height: 50px;/* demo purpose use content instead*/ 
 
    box-shadow:0 0 0 1px gray; 
 
} 
 

 
/* extra */ 
 
.artist-wrapper { 
 
    margin:1em; 
 
} 
 
.artist { 
 
    color:#444; 
 
    font-size:1.5em; 
 
    font-family:'lucida console', courier; 
 
    background:tomato; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
} 
 
.artist:nth-child(odd) { 
 
    background:orange 
 
    } 
 
.artist:nth-child(4n) { 
 
    background:turquoise; 
 
    min-width: 500px; 
 
    max-width:100%;/* allows it to shrink on small device , can be set to all of them */ 
 
    }

<div class="artist-wrapper"> 
 
    <div class="artist"></div> 
 
    <div class="artist">breaks at 250px;</div> 
 
    <div class="artist"> breaks at 500px </div> 
 
</div> 
 

 
<div class="artist-wrapper"> 
 
    <div class="artist"></div> 
 
    <div class="artist">breaks at 250px;</div> 
 
    <div class="artist">breaks at 500px;</div> 
 
    <div class="artist"> breaks at 1250px;</div> 
 
    <div class="artist"> and so on ... </div> 
 
    <div class="artist"></div> 
 
    <div class="artist"></div> 
 
    <div class="artist"></div> 
 
    <div class="artist"></div> 
 
    <div class="artist"></div> 
 
    <div class="artist"></div> 
 
    <div class="artist"></div> 
 
</div>

来源

2016-03-20 20:28:09

Flexbox的序位水平

回答

相关问题