Flex Box页面布局实战课程-九宫格布局-六个项目的布局_通用实战_Flex Box教程

联系我们我要留言

通用实战: Flex Box页面布局实战课程-九宫格布局-六个项目的布局
时间：2019/1/21 17:20:45  作者：互联网  来源：网络转载  查看：37009  评论：0
内容摘要：效果图html代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition...
效果图

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>六个项目的布局（1）</title>

</head>

<body>

<div class="rongqi" style="flex-wrap:wrap;justify-content:space-around;align-content:space-between;flex-direction: column;">

<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><hr>

<div class="rongqi" style="flex-wrap:wrap;justify-content:space-around;align-content:flex-end;flex-direction: column;">

<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><hr>

<div class="rongqi" style="flex-wrap:wrap;justify-content:space-around;align-content:flex-start;flex-direction: column;">

<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><hr>

<div class="rongqi" style="flex-wrap:wrap;align-items: flex-start;align-content: space-between;">

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

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

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

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

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

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

</div><hr>

<div class="rongqi" style="flex-wrap:wrap;align-items: flex-start;align-content: flex-start;">

<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><hr>

<div class="rongqi" style="flex-wrap:wrap;align-items: flex-start;">

<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><hr>

<style>

.rongqi{ width:250px; height:250px; background-color:#CCC; display:flex;}

.xm{ width:70px; height:70px; background-color:#39F; margin:5px;}

</style>

<div class="rongqi" style="flex-wrap:wrap;justify-content:space-around;">

<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><hr>

<div class="rongqi" style="flex-wrap:wrap;justify-content:flex-start;">

     <div   style="display:flex;">

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

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

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

   </div>

     <div   style="display:flex;">

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

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

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

   </div>

     <div   style="display:flex;">

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

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

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

   </div>

</div><hr>

</body>

</html>

标签：Flex Box入门教程 Flex布局设计教程 flexbox在线视频教程
上一篇：Flex Box页面布局实战课程-九宫格布局-五个项目的布局
下一篇：Flex Box页面布局实战课程-九宫格布局-七个项目的布局

相关文章

相关评论

本类更新

本类推荐

本类排行

: 小白教程 | 计算机毕业设计作品网 | 小程序中文网 | 洪荒毕设网 | 毕业设计资料下载 | 网页模版下载 |

联系我们 - 服务报价 - 关于我们 - 留言本

咨询QQ/微信：45157718