位置:电子教程 > Flex Box实战教程 推荐学习资源
网页布局实战
九宫格实战
当前阅读教程:Flex Box实战教程 > 九宫格布局
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 九宫格实战 下一篇: 一个项目的布局


image.png

代码:

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>九宫格布局</title>
</head>
 
<body>
<pre>
九宫格布局
flex-direction属性决定主轴的方向(即项目的排列方向):(左中右    上中下)
flex-direction: row | row-reverse | column | column-reverse;
</pre>
 
<style>
.rongqi01{ width:250px; height:250px; background-color:#CCC; display:flex; flex-direction: column; }
.rongqi02{ display:flex;}
.xm{ width:70px; height:70px; margin:5px; background-color:#0CF;}
</style>
 
<div>
     <div>
     <div>01</div>
        <div>02</div>
        <div>03</div>
    </div>
     <div>
     <div>04</div>
        <div>05</div>
        <div>06</div>
    </div>  
     <div>
     <div  class="xm">07</div>
        <div  class="xm">08</div>
        <div  class="xm">09</div>
    </div>
</div><hr>
 
<style>
.rongqi03{ width:250px; height:250px; background-color:#CCC; display:flex; flex-wrap:wrap;}
</style>
<div>
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
  <div>07</div>
  <div>08</div>
  <div>09</div>
</div>
 
</body>
</html>


上一篇: 九宫格实战 下一篇: 一个项目的布局
QQ交流群:147415688             广告联系QQ:45157718(微信同号)