综合教程

Flex Box页面布局实战课程-九宫格布局

时间:2019/1/21 12:37:25  作者:互联网  来源:网络转载  查看:36818  评论:0
内容摘要:效果图HTML代码<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /...
效果图
Flex_Box页面布局实战课程-九宫格布局

HTML代码

<!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 class="rongqi01">

     <div class="rongqi02">

    <div class="xm">01</div>

        <div class="xm">02</div>

        <div class="xm">03</div>

    </div>

     <div class="rongqi02">

    <div class="xm">04</div>

        <div class="xm">05</div>

        <div class="xm">06</div>

    </div>  

     <div class="rongqi02">

    <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 class="rongqi03">

  <div class="xm">01</div>

  <div class="xm">02</div>

  <div class="xm">03</div>

  <div class="xm">04</div>

  <div class="xm">05</div>

  <div class="xm">06</div>

  <div class="xm">07</div>

  <div class="xm">08</div>

  <div class="xm">09</div>

</div>

 

</body>

</html>



相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |