css類架構顯示

.page-setting-popup { 
    position: absolute; 
    background-color: tomato; 
    padding: 10px 10px 10px 0; 
    height: 120px; 
    display: flex; 
    flex-flow: row; 
    justify-content: space-between; 
    align-items: flex-start; 
} 
.setting-popup-controls { 
    display: flex; 
    flex-flow: row; 
}

我有這樣的代碼在不同的地方。我不喜歡我應該幾乎每塊使用顯示。我覺得如果我這樣做一些課，我會很棒。css類架構顯示

.flex { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-between; 
    align-items: center; 
}

或者它應該是這樣的？

.flex { 
    display: flex; 
} 
.v-centered { 
    align-items:center; 
} 
.h-centered { 
    justify-content: center; 
} 
.stretch-between { 
    justify-content: space-between; 
}

我認爲第二個變體更加靈活。但我需要你的意見）

<div class="page-setting-popup"> 
    <div class="setting-popup-icon"><span class="zmdi zmdi-time-restore"></span></div> 
    <div class="setting-popup-main"><span class="setting-header text-uppercase">Sync. frequency</span> 
    <div class="setting-popup-controls"> 
    <input type="number" min="0"/> 
    <button type="submit">V</button> 
    <button>X</button> 
    </div> 
</div>

來源

2016-11-29 SashaSemanyuk

也分享你的相關HTML代碼。沒有這個。我們無法幫助你。也......用你的代碼來解釋你想要達到的目標 –

如果你造型的組成部分，我會把所有相關的風格融於特定於特定的組件類。但是，您在此使用的是.flex作爲示例，這是非常通用的，因此是否將因素考慮在內是值得商榷的。我不會把它分解出來。

一般來說，這種方法分解出改性劑類，如.flex，.left，right等的有關框架，如bootstrap，因爲沒有假設，如何以及在何處，這些修飾符將被使用。同樣，如果你正在設計一個組件，你就會很好地理解組件的每個部件需要什麼樣式，而且我不會使用修飾符類。

來源

2016-12-01 07:21:15

css類架構顯示

回答

相關問題