flex文檔看完了,不知道flex佈局如何啓用
html code
<div class="home"> <div class="home_header"> <h1>this home is default</h1> </div> <div class="home_banner"> <h1>this home is default</h1> </div> <div class="home_center"> <h1>this home is default</h1> </div> <div class="home_contact"> <h1>this home is default</h1> </div> </div>
css code 主要就是display :flex 就開啓了flex佈局,默認是橫向的
<style> .home { display: flex; background-color: red; >div{ height: 200px; width: 200px; } .home_header { background-color: yellow; } .home_banner { background-color: blue; } .home_center { background-color: yellow; } .home_contact{ background-color: black; } } </style>
界面效果,已經是橫向佈局了,因爲是默認的橫向佈局
友情鏈接
帶思維導圖支持點擊效果的鏈接
https://codepen.io/justd/full/yydezN/
對於flex屬性描述的鏈接
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
國內知名博主的語法實例鏈接
語法
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
實例