Flex 项目属性:flex 布局示例

前端之家收集整理的这篇文章主要介绍了Flex 项目属性:flex 布局示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

属性:

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

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

属性flex的两个示例:

{:;:;:;:;:;:; } {:;:; } {:;:;:; } {:;:;:; } {:;:; }

HTML:

页眉 左侧固定 右侧自适应 左侧CSS属性:flex: 0 0 auto; 属性:flex: 1; 页脚

页面

二、

CSS:

<div class="cnblogs_code">

 
 {:;:;:;:;:;:;:;}
 {:;:; }
 {:;:;:; }
 {:;:;:; }
 {:;:;:; }
 

HTML:

头部 左侧固定 中间自适应 左侧:flex: 0 0 auto; 中间:flex: 1 0 auto; 右侧:flex: 0 0 auto; 右侧固定 底部

页面

代码可以直接复制到HTML页面运行,如果有不懂的地方请回顾Flex布局属性

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

猜你在找的CSS相关文章