如何启用flex布局
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
实例