通用实战

Flex Box页面布局实战课程-百分比布局

时间:2019/1/21 12:27:56  作者:互联网  来源:网络转载  查看:36905  评论:0
内容摘要:某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。效果图如下html代码如下<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="...
某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。
效果图如下
Flex_Box页面布局实战课程-百分比布局
html代码如下

<!DOCTYPE>

<html>

<head>

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

<title>百分比布局</title>

</head>

 

<body>

<pre>

百分比布局

某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。

flex: none |  flex-grow flex-shrink flex-basis

该属性有两个快捷值:auto (1 1 auto) none (0 0 auto)

</pre>

 

<style>

.rongqi{ background-color:#CCC; display:flex; margin:5px;}

.xiangmu{ background-color:#3CF; margin:5px;flex:1;}

.c-1of3{flex:0 0 33.3%;}

.c-1of4{flex:0 0 25%;}

</style>

 

<div class="rongqi">

     <div class="xiangmu">1/2</div>

    <div class="xiangmu">1/2</div>

</div>

 

<div class="rongqi">

     <div class="xiangmu c-1of3">1/3</div>

    <div class="xiangmu">auto</div>

</div>

 

<div class="rongqi">

     <div class="xiangmu c-1of4">1/4</div>

    <div class="xiangmu">auto</div>

    <div class="xiangmu">auto</div>

    <div class="xiangmu">auto</div>

</div>

 

</body>

</html>


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