Flex 项目属性：flex 布局示例

发布时间：2020-12-15 01:50:08 所属栏目：百科来源：网络整理

导读：flex属性： flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可

flex属性：

flex属性是flex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

下面来看看使用项目属性flex的两个示例：

一、

CSS：

1 <style>
2         body{ margin: 0;padding: 0;font-size: 20px;font-weight: 600;text-align: center;line-height: 40px; }
3         #header,#footer{ height: 80px;background-color: #aaa; }
4         #content{ width: 100%;height: 600px;display: flex; }
5         #content div:first-of-type{ width: 300px;background-color: #bbb;flex: 0 0 auto; }
6         #content div:last-of-type{ background-color: #ccc;flex: 1; }
7 </style>

HTML：

 1 <body>
 2     <div id="header">页眉</div>
 3     <div id="content">
 4         <div>左侧固定</div>
 5         <div>
 6             右侧自适应<br />
 7             左侧CSS属性：flex: 0 0 auto;<br />
 8             右侧CSS属性：flex: 1;
 9         </div>
10     </div>
11     <div id="footer">页脚</div>
12 </body>

页面：

二、

CSS：

1 <style>
2         body{ margin: 0;padding: 0;overflow-x: hidden;font-size: 20px;font-weight: 600;text-align: center;line-height: 40px;}
3         #header,#footer{ height: 80px;background: #aaa; }
4         .content{ width: 100%;height: 500px;display: flex; }
5         .content div:nth-of-type(1),.content div:nth-of-type(3){ width: 300px;flex: 0 0 auto;background-color: #bbb; }
6         .content div:nth-of-type(2){ width: 500px;flex: 1 0 auto;background-color: #ccc; }
7 </style>

HTML：

 1 <body>
 2     <div id="header">头部</div>
 3     <div class="content">
 4         <div>左侧固定</div>
 5         <div>
 6         中间自适应<br>
 7         左侧：flex: 0 0 auto;<br>
 8         中间：flex: 1 0 auto;<br>
 9         右侧：flex: 0 0 auto;<br>
10         </div>
11         <div>右侧固定</div>
12     </div>
13     <div id="footer">底部</div>
14 </body>

页面：

代码可以直接复制到HTML页面运行，如果有不懂的地方请回顾Flex布局属性：http://www.voidcn.com/article/p-qmytnbsu-bnx.html

文章乃参考、转载其他博客所得，仅供自己学习作笔记使用！！！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!