FLEX实现两侧边栏固定中间自适应布局

来源：互联网发布：oracle distinct 优化编辑：程序博客网时间：2024/05/21 22:51

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
    #outer{
        display: flex;
        width: 100%;
        flex-flow: row nowrap;
    }
    .left,.right{
        width:200px;
        height:50px;
        background: red;
    }
    .middle{
        flex-grow: 1;          //决定如何分配剩余空间
        background: yellow;
    }
</style>
<body>
    <div id="outer">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>

阅读全文

0 0

FLEX实现两侧边栏固定中间自适应布局
Flex布局实现圣杯布局，左右两列固定、中间列自适应的三列式布局
三栏自适应布局实现(左右固定宽度,中间自适应)
中间固定，两边自适应的三列布局、两边固定，中间自适应的三列布局、左侧栏固定，右侧自适应的两列布局
三栏布局，中间自适应，左右固定实现方法
如何实现两边固定，中间自适应的三栏布局？
三栏布局：左右固定，中间自适应
左右固定，中间自适应布局（方法5以后进阶，实现中间栏优先加载）
如何实现：左右固定，中间自适应布局，中间栏优先加载？
前端面试之两栏布局，左侧固定右侧自适应；三栏布局，左右定宽，中间自适应
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
DIV布局之三行三列左右两栏固定中间自适应
两栏布局——实现左边固定，右边自适应（右边固定，左边自适应）
纯CSS实现三列布局(两边固定，中间自适应)
margin负值实现左右固定中间自适应布局
一列固定一列自适应布局-flex布局实现
css 一列固定一列自适应布局-flex布局实现
fastboot权限问题
ElasticSearch数据备份与恢复
monkey测试
MyEclipse使用总结——MyEclipse10安装SVN插件
深入AOP开发的基石 java动态代理
FLEX实现两侧边栏固定中间自适应布局
dubbo+springmvc+mybatis集成demo
分析HTML的加载从而优化
myEclipse Tomcat端口冲突报错
权重标签
Android基础之用Eclipse搭建Android开发环境和创建第一个Android项目（Windows平台）
javaScript中的this总结
IIS勾选
Nginx学习（3）