复习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;也毫无意义了.