未在移動視圖中顯示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

回答

相關問題