Flex 项目属性：flex 布局示例
程序员文章站
2022-07-03 11:15:55
flex属性： flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 下面来看看使用项目属性flex的两个示例： 一、 CSS： ......
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布局属性：
文章乃参考、转载其他博客所得，仅供自己学习作笔记使用！！！