未在移动视图中显示Flexbox

-1

我想为移动视图使用弹性框，但它似乎不适用于特定框（标题flexbox正常工作，但标签flex不显示）。另外，我的div内标签Flexbox的子元素未在移动视图中显示Flexbox

@media screen and (max-width:450px) { 
 
    .title { 
 
    display: flex; 
 
    } 
 
    .click { 
 
    display: none; 
 
    } 
 
    .name { 
 
    display: flex; 
 
    font-size: 50px; 
 
    } 
 
    .labels { 
 
    display: flex; 
 
    width: 100%; 
 
    background-color: aliceblue; 
 
    } 
 
}

<div class="labels"> 
 
    <div class="port social">Social</div> 
 
    <div class="port bio">Bio</div> 
 
    <div class="port web">Website</div> 
 
    <div class="fancybox fancyboxy-iframe port resume" href="image/Weldons%20resume%20final.pdf" data-fancybox="gallery">Resume</div> 
 
</div>

https://codepen.io/ew39020/pen/MmEmyZ

来源

2017-05-05 Eddie Weldon

你有这个codepen吗？ –

你可以分享一个plunkr解决方案，以便我们可以看看 –

你是否在你的后问题中编码整个这样的事情？如果是的话，那是因为代码结构是错误的，你应该把css放到你的''标签上，并用''包装起来...... – iMarkDesigns

我发现了两个问题：

在Codepen CSS，排19：你有diplay代替display
在你的代码片段：媒体查询似乎不能在这里工作，因为结果太宽。

如果你想要元素具有相等的宽度，只需将flex: 1添加到它们。

.title { 
 
    display: flex; 
 
    } 
 
    .click { 
 
    display: none; 
 
    } 
 
    .name { 
 
    display: flex; 
 
    font-size: 50px; 
 
    } 
 
    .labels { 
 
    display: flex; 
 
    width: 100%; 
 
    background-color: aliceblue; 
 
    } 
 
    .labels > * { 
 
    flex: 1; 
 
    }

<div class="labels"> 
 
    <div class="port social">Social</div> 
 
    <div class="port bio">Bio</div> 
 
    <div class="port web">Website</div> 
 
    <div class="fancybox fancyboxy-iframe port resume" href="image/Weldons%20resume%20final.pdf" data-fancybox="gallery">Resume</div> 
 
</div>

来源

2017-05-05 04:36:36 IiroP

在你CodePen代码，你拼错了display财产labels下：

.labels{ 
    diplay:flex; /* missing the `s` */ 
    width:100%; 
    background:blue; 
}

当我纠正这一点，flexbox作品。我还添加了媒体查询条件，在较小的屏幕下进行测试，并且工作正常。

来源

2017-05-05 04:37:09 heyitsjhu

未在移动视图中显示Flexbox

回答

相关问题