Flex 项目属性：flex 布局示例

levinit 发布于2019-04-23 11:54 / 3383人阅读

flex属性：

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

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

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

一、

CSS：

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：

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.ruanyifeng.com/blog/2015/07/flex-grammar.html

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

私有云超融合服务器 flex布局 flex flex40 flex 教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1334.html

弹性布局示例

摘要：弹性布局背景模块目前为旨在提供一种更有效的方式来布置，对齐和分配容器中的项目之间的空间，即使其尺寸未知和或动态因此单词。主轴弹性容器的主轴是弹性项目布局的主要轴子项目默认按照主轴排列。判断哪个是起始点，主要看弹性布局的流动方向。原文章地址https://css-tricks.com/snippe...根据原文章翻译并添加自己的理解，有不对的欢迎指正。弹性布局-背景 Flexbox ...

qqlcbb 2019-08-29 15:08 评论0 收藏0
弹性布局示例

摘要：弹性布局背景模块目前为旨在提供一种更有效的方式来布置，对齐和分配容器中的项目之间的空间，即使其尺寸未知和或动态因此单词。主轴弹性容器的主轴是弹性项目布局的主要轴子项目默认按照主轴排列。判断哪个是起始点，主要看弹性布局的流动方向。原文章地址https://css-tricks.com/snippe...根据原文章翻译并添加自己的理解，有不对的欢迎指正。弹性布局-背景 Flexbox ...

piglei 2019-08-02 10:15 评论0 收藏0
弹性布局flex 兼容写法

摘要：设置在弹性项目上的属性属性定义项目的排列顺序。属性定义了项目的缩小比例，默认为，即如果空间不足，该项目将缩小。属性允许单个项目有与其他项目不一样的对齐方式，可覆盖属性。兼容浏览器版本 Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+ 浏览器对最新flexbox规范的支持情况： Chrome 29+ Firefox 28+...

shiweifu 2019-08-30 11:21 评论0 收藏0
Flexbox完全指南（译）

摘要：本文译自这里，针对本文介绍的属性列个提纲伸缩容器属性伸缩项目属性以后再布局时可以考虑用啦背景布局模块目前上一次工作草案的叫法旨在提供一种更高效的方式来布局排列及分配容器中项目的空间，即便容器大小是未知或动态变化的因此称为。本文译自 A Complete Guide to Flexbox这里，针对本文介绍的属性列个提纲：伸缩容器属性： display flex-direction...

pekonchan 2019-08-30 13:09 评论0 收藏0