複習display與visibility

display: none;–元素的摧毀(元素消失)
display: block;–元素的重建(設定為塊級元素,元素出現)

visibility: hidden;–元素的隱藏(佔有元素原有位置,實質則是不透明度
opacity為0的改變)
visibility: visible;–元素可見(佔有元素原有位置,實質則是不透明度
opacity為1的改變)

瞭解display: flex

css3中伸縮佈局的概念,也即:display: flex;–改變元素的模式為伸縮容器
設為Flex佈局以後，元素將會以塊級伸縮容器顯示,子元素的float、clear和vertical-align屬性將失效,

關聯display: block

需要注意的是display: flex已經包括了display: block的過程.
在給元素設定樣式的時候,後設置的display樣式會覆蓋之前的display樣式.
因此,你會發現自己在js樣式中寫show()或者hide()方法,或者重設了display:block時,之前的display:flex失效了,為了更好的保留flex樣式,就要避免再一次設定display的樣式:
用原生再次設定: 獲取的元素.style.display = flex;
或者js方法設定:$(‘xx’).css(‘display’,‘flex’);
當然你要是一心想設定display: none;了,再討論設定display: flex;也毫無意義了.