用flex布局实现Sticky Footers

Sticky Footer 布局是在开发中经常会用到的一种布局，它的效果简而言之就是当内容的高度小于屏幕的高度时，footer组件会停留在屏幕的最下方，但如果内容高度大于屏幕高度，则footer会被推到内容的最下方本文将讨论如何使用flex布局来解决这个问题。

这里采用了flex布局， flex-flow:column 定义了纵向布局， min-height:100vh 定义了body的最小高度是100%的视窗高度。 main 中的样式 flex 属性是flex-grow,flex-shrink和flex-basis的简写，分别代表项目的放大比例(默认0)，项目的缩小比例(默认1)和项目在分配多余空间之前占据的主轴空间(默认auto，即项目的原大小)，这里 flex:1 等同于 flex:1 1 0% ，如果其他项目的flex都是 flex:1 ，则会等分剩余空间。但假如 <footer> 设置了 flex:2 ，那么页脚的高度将会是主内容高度的2倍。总的来说，为了实现sticky footer, min-height 和 flex 的定义缺一不可。

全屏布局应用：管理系统、监控平台、统计平台等。

全屏布局特点：1、缩放屏幕，页面始终撑满浏览器窗口；2、滚动条控制局部区域。

下面我们来实现一种 全屏布局 ，它的整体宽度自适应、高度固定，横向分为三栏，分别为顶栏、主内容区、底栏，顶栏与底栏定高，主内容区高度自适应。主内容区又分为左边栏和右边栏，左边栏定宽，右边栏宽高自适应。滚动条出现在右边栏。

以下介绍两种方法1、position；2、flex。

1、 使用position 。分为两步，第一步，确定位置，我们可以把整个页面分为上、左、右、下四大块，然后设置position:absolute，使用left、top、right、bottom对每块进行定位。第二步，设置滚动条。在需要设置滚动的right上设置overflow: auto；当right里面内容块的高度超过某个值后，right出现滚动条。 戳我查看演示。

2、 使用flex 。flex有一个属性- flex-direction ，它的值为row | row-reverse | column | column-reverse。可以使用它形成横向布局。 戳我查看演示。

注意：使用flex存在浏览器 兼容性问题 。

设置宽高除了使用px形式，还可以使用百分比形式。

上面假定的是顶栏、底栏、左边栏设置了固定的宽或高，假如我想 自适应宽（高）度 呢？

自适应的话，使用position貌似做不到，因为主内容区的position定位依赖于顶栏与底栏的固定高度。我们可以使用flex来实现上述要求，还有一种Grid方法，但由于Grid在W3c中还是草案，所以也就不做介绍。

使用flex实现全屏布局内容自适应只需要把之前设定的固定宽高值删除，浏览器就会默认该元素宽高自适应。

最后，比较一下使用Position、Flex、Grid三种方案实现全屏布局：

参考网易前端微专业全屏布局。

三星手机折叠屏印大不是67英寸（约1702厘米）。它采用Infinity Flex Display技术，将亚马逊Fire系列手机中的折叠技术应用到自己的行动设备中，改变了传统的手机设计，提供了更丰富的体验和使用情景。

宽度单位和像素密度 react的宽度不支持百分比，设置宽度时不需要带单位 {width: 10}， 那么10代表的具体宽度是多少呢 不知道是官网文档不全还是我眼瞎，反正是没找到，那做一个实验自己找吧： 默认用的是iPhone6的模拟器结果是： 我们知道iPhone系列的尺寸如下图： 可以看到iphone 6的宽度为 375pt，对应了上边的375，由此可见react的单位为pt。 那如何获取实际的像素尺寸呢 这对的高清化很重要，如果我的大小为100100 px 设置宽度为100 100 那在iphone上的尺寸就是模糊的。 这个时候需要的图像大小应该是 100 pixelRatio的大小 。 react 提供了PixelRatio 的获取方式 flex的布局 默认宽度 我们知道一个div如果不设置宽度，默认的会占用100%的宽度， 为了验证100%这个问题， 做三个实验 根节点上方一个View， 不设置宽度 固定宽度的元素上设置一个View， 不设置宽度 flex的元素上放一个View宽度， 不设置宽度 结果可以看到flex的元素如果不设置宽度， 都会百分之百的占满父容器。 水平垂直居中 css 里边经常会做的事情是去讲一个文本或者水平垂直居中，如果使用过css 的flexbox当然知道使用alignItems 和 justifyContent 那用react-native也来做一下实验 网格布局 网格布局实验， 网格布局能够满足绝大多数的日常开发需求，所以只要满足网格布局的spec，那么就可以证明react的flex布局能够满足正常开发需求 等分的网格 左边固定， 右边固定，中间flex的布局 嵌套的网格 通常网格不是一层的，布局容器都是一层套一层的， 所以必须验证在real world下面的网格布局 好在没被我玩儿坏，可以看到上图的嵌套关系也是足够的复杂的，(我还加了一个ScrollView，然后再嵌套整个结构)嵌套多层的布局是没有问题的。 布局 首先我们得知道有一个stretchMode 通过ImageresizeMode访问 找出有哪些mode 尝试使用这些mode 100px 高度， 可以看到适应100高度和全屏宽度，背景居中适应未拉伸但是被截断也就是cover。 contain 模式容器完全容纳，自适应宽高 cover模式同100px高度模式 stretch模式被拉伸适应屏幕 随便试验了一下， 发现高度设置到父容器，flex的时候也会等同于cover模式 绝对定位和相对定位 和css的标准不同的是， 元素容器不用设置position：'absoluterelative' 相对定位的可以看到很容易的配合margin做到了。 (我还担心不能配合margin，所以测试了一下：-：) padding和margin 我们知道在css中区分inline元素和block元素，既然react-native实现了一个超级小的css subset。那我们就来实验一下padding和margin在inline和非inline元素上的padding和margin的使用情况。 padding 在View上设置padding很顺利，没有任何问题， 但是如果在inline元素上设置padding， 发现会出现上面的错误， paddingTop和paddingBottom都被挤成marginBottom了。 按理说，不应该对Text做padding处理， 但是确实有这样的问题存在，所以可以将这个问题mark一下。 margin 我们知道，对于inline元素，设置margin-left和margin-right有效，top和bottom按理是不会生效的， 但是上图的结果可以看到，实际是生效了的。所以现在给我的感觉是Text元素更应该理解为一个不能设置padding的block。 算了不要猜了， 我们看看官方文档怎么说Text 也就是如果Text元素在Text里边，可以考虑为inline， 如果单独在View里边，那就是Block。 下面会专门研究一下文本相关的布局 文本元素 首先我们得考虑对于Text元素我们希望有哪些功能或者想验证哪些功能： 文字是否能自动换行 overflow ellipse 是否能对部分文字设置样式 ，类似span等标签 先看看文字有哪些支持的style属性 实验1， 2， 3 从结果来看1，2，3得到验证。 但是不知道各位有没有发现问题， 为什么底部空出了这么多空间， 没有设置高度啊。 我去除numberOfLines={5} 这行代码，效果如下： 所以实际上， 那段空间是文本撑开的， 但是文本被numberOfLines={5} 截取了，但是剩余的空间还在。 我猜这应该是个bug。 其实官方文档里边把numberOfLines={5}这句放到的是长文本的Text元素上的，也就是子Text上的。 实际结果是不生效。 这应该又是一个bug。 Text元素的子Text元素的具体实现是怎样的， 感觉这货会有很多bug， 看官文 Behind the scenes, this is going to be converted to a flat NSAttributedString that contains the following information 好吧， 那对于numberOfLines={5} 放在子Text元素上的那种bug倒是可以解释了。 Text的样式继承 实际上React-native里边是没有样式继承这种说法的， 但是对于Text元素里边的Text元素，上面的例子可以看出存在继承。 那既然有继承，问题就来了! 到底是继承的最外层的Text的值呢，还是继承父亲Text的值呢 结果可见是直接继承父亲Text的。 总结 react 宽度基于pt为单位， 可以通过Dimensions 来获取宽高，PixelRatio 获取密度，如果想使用百分比，可以通过获取屏幕宽度手动计算。 基于flex的布局 view默认宽度为100% 水平居中用alignItems, 垂直居中用justifyContent 基于flex能够实现现有的网格系统需求，且网格能够各种嵌套无bug 布局 通过ImageresizeMode来适配布局，包括contain, cover, stretch 默认不设置模式等于cover模式 contain模式自适应宽高，给出高度值即可 cover铺满容器，但是会做截取 stretch铺满容器，拉伸 定位 定位相对于父元素，父元素不用设置position也行 padding 设置在Text元素上的时候会存在bug。所有padding变成了marginBottom 文本元素 文字必须放在Text元素里边 Text元素可以相互嵌套，且存在样式继承关系 numberOfLines 需要放在最外层的Text元素上，且虽然截取了文字但是还是会占用空间

所有 weex 标签都有以下基本样式规则。

weex 盒模型基于 CSS 盒模型，每个 weex 元素都可视作一个盒子。我们一般在讨论设计或布局时，会提到「盒模型」这个概念。

元素实际的内容（content）、内边距（paddings）、边框（borders）、外边距（margins），形成一层层的盒子包裹起来，这就是盒模型大体上的含义。

注意：目前在 <image> 和 <text> 组件上尚无法只定义一个或几个角的 border-radius。比如你无法在这两个组件上使用 border-top-left-radius。

weex 盒模型的 box-sizing 默认为 border-box，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。

示例：

weex 布局模型基于 CSS 的 Flexbox。以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。

Flexbox 包含 flex 容器和 flex 成员项。如果一个 weex 元素可以容纳其他元素，那么它就成为 flex 容器。需要注意的是，flexbox 的老版规范相较新版有些出入，比如是否能支持 wrapping。这些都描述在 W3C 的工作草案中了，你需要注意下新老版本之间的不同。另外，老版本只在安卓 44 版以下得到支持。

在 weex 中，Flexbox 是默认且唯一的样式模型，所以你不需要手动为元素添加 display: flex; 属性。

flex: <number>

flex 属性定义了 flex 成员项在容器中占据的尺寸。如果所有成员项都设置为 flex: 1，那么它们就有相等的宽度（水平排列）或者相等的高度（垂直排列）。如果一共有两个成员项，其中一个 flex: 1，另一个 flex: 2，那么第一个将占据 1/3 的空间，另一个占据 2/3。如果所有 flex 成员项都不设置 flex 属性，它们将根据容器的 justify-content 属性来决定如何排列。

一组平分了容器的。

一张固定宽度的加上一段流动布局的文本。

复杂的混合布局。

一段文本左对齐，其他内容右对齐。

我们可以使用以下属性来定位一个 weex 元素。

你可以按照以下步骤来规划 weex 页面的样式。

以上就是关于用flex布局实现Sticky Footers全部的内容，包括:用flex布局实现Sticky Footers、全屏布局、三星手机折叠屏印大不等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！