flex相关

作者: 一蓑烟雨任平生_cui | 来源:发表于2018-11-23 14:48 被阅读0次

flex
flex详解
flex相关
css-cmd
Flex布局
flex 布局 -- flex 相关属性
小程序开发必备知识总结-思维导图-布局篇
React Native 页面布局简介
React Native 页面布局
CSS flex相关

1、flex实现tab固定底部

tab固定底部一直以来使用fixed进行固定定位，下面是flex实现：

<div class="main">
        <div class="haeder"></div>
        <div class="footer"></div>
</div>

 html,
 body {
   height: 100%; // 必须
 }
.main 
   height: 100%; // 必须
   width: 100%;
   display: flex;
   flex-direction: column;
 }
.haeder {
   flex: 1;
   overflow: auto; /* 必须 */
 }
 .footer {
   width: 100%;
   height: 50px;
   background-color:red;
 }

flex
1. flex相关概念 flex容器(flex container)：对一个DOM元素添加display:flex...
flex详解
flex概念 flex布局是块级元素；inline-flex是行内元素不会换行 flex相关属性 flex-dir...
flex相关
1、flex实现tab固定底部 tab固定底部一直以来使用fixed进行固定定位，下面是flex实现：
css-cmd
flex布局详解 align-content (底部可以测试flex相关属性)
Flex布局
flex布局前提条件--display: flex（react native 不用设置）与flex布局相关的属性...
flex 布局 -- flex 相关属性
flex 直接子元素中的块级元素不再霸道的占据一行，并且高度自动等于父元素的高度。 flex-direction ...
小程序开发必备知识总结-思维导图-布局篇
Flex布局使用 CSS技巧相关
React Native 页面布局简介
本文主要讲解与flex布局相关的属性，包括flex，flexDirection，alignItems，justif...
React Native 页面布局
本文主要讲解与flex布局相关的属性，包括flex，flexDirection，alignItems，justif...
CSS flex相关
order用于定义排列顺序越小越靠前 flex-grow放大比例如果所有项目的flex-grow属性都为1，则它...