通用实战

Flex Box页面布局实战课程-九宫格布局-一个项目的布局

时间:2019/1/21 17:18:24  作者:互联网  来源:网络转载  查看:36900  评论:0
内容摘要:效果图Html代码<!DOCTYPE"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8&q...
效果图
Flex_Box页面布局实战课程-九宫格布局-一个项目的布局

Html代码

<!DOCTYPE">

<html>

<head>

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

<title>一个项目的布局(1</title>

</head>

 

<body>

<pre>

flex-direction属性决定主轴的方向(即项目的排列方向):(左中右    上中下)

flex-direction: row | row-reverse | column | column-reverse;

 

justify-content属性定义了项目在主轴上的对齐方式。(左中右)

justify-content: flex-start | flex-end | center | space-between | space-around;

 

align-items属性定义项目在交叉轴上如何对齐。(上中下)

align-items: flex-start | flex-end | center | baseline | stretch;

</pre>

 

<div class="rongqi">

     <div class="xm" style="flex-direction:row;justify-content:flex-start;align-items:flex-start;">01</div>

</div><hr>

<div class="rongqi" style="flex-direction:row;justify-content:center;align-items:flex-start;">

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

</div><hr>

<div class="rongqi" style="flex-direction:row;justify-content:flex-end;align-items:flex-start;">

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

</div>

 

 

 

<hr>

<style>

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

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

</style>

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

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