<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main {
            height: 500px;
            background-color: blue;
            display: flex;
        }
        .left {
            width: 200px;
            height: 500px;
            background-color: blue;
        }
        .middle {
            flex: 1;
            height: 500px;
            background-color: yellow;
        }
        .right {
            width: 200px;
            height: 500px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

</body>
</html>

flex 三列布局的更多相关文章

  1. flex实现三列布局

    css3新引入的flex在某些情况下布局非常实用 因为它是弹性盒子所以自适应效果会很棒 不过各项布局方案还是各有优劣 <!DOCTYPE html> <html lang=" ...

  2. 两列布局（浮动、定位、flex）和三列布局（圣杯、双飞翼、flex）

    demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/ 两栏布局 浮动 <div class="box1"> <d ...

  3. CSS三列布局

    × 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...

  4. Layout 不可思议（二）—— 两侧定宽的三列布局

    三列布局作为网页设计中最常见的布局,其实现方法早已被诸位前端大神摸透 网上相关的文章很多,原本已无必要再做赘述 不过既然开了 Layout 系列,三列布局就是必修课 本文整理了一些常用的实现方法,然后 ...

  5. css常见的各种布局下----三列布局

    css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...

  6. CSS实现三列布局

    三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...

  7. CSS三列布局之左右宽度固定，中间元素自适应问题

    最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...

  8. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  9. css 三列布局

    前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中间自适应.两列定宽一侧自适应.中间定宽两侧自适应.一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中 ...

随机推荐

  1. 【bzoj1149】 [CTSC2007]风玲Mobiles

    题目意为:给一颗二叉树,每一次操作可以交换该子树的左右两颗子树,要将该树变为完全二叉树,求最小操作次数.从根开始进行一遍DFS.记录每棵子树的大小size,如果左子树的size小于右子树的size那么 ...

  2. python的一些常用函数

    1 filter(function, iterable) 等价于(item for item in iterable if function(item)) 就是说,filter会遍历iterable中 ...

  3. YTU 2639: 改错题：类中私有成员的访问

    2639: 改错题:类中私有成员的访问 时间限制: 1 Sec  内存限制: 128 MB 提交: 431  解决: 297 题目描述 /* 改错题: 设计一个日期类和时间类,并编写全局函数displ ...

  4. YTU 2626: B 统计程序设计基础课程学生的平均成绩

    2626: B 统计程序设计基础课程学生的平均成绩 时间限制: 1 Sec  内存限制: 128 MB 提交: 427  解决: 143 题目描述 程序设计基础课程的学生成绩出来了,老师需要统计出学生 ...

  5. hdoj--2187--悼念512汶川大地震遇难同胞——老人是真饿了（贪心）

     悼念512汶川大地震遇难同胞--老人是真饿了 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  6. Linux压缩命令（zip/gz/bz2/tar/tar.gz/tar.bz2）

    一.Linux的压缩格式 .zip . gz . bz2    .tar 1..zip格式(Linux和Windows是可以互传的) 压缩命令 语法:zip 文件名.zip 文件名  ------压缩 ...

  7. sql数据库如何在数据库里面把其中一个数据库的表复制到另一个数据库里面

    在sqlserver数据库里面,我们肯定有这样一个情况,假如我用的是SQL2008,如何把数据库里面的整个表以及表内数据复制到另外一个表中.那应该如何操作??有两种方法,我们一起来看一下 复制表结构: ...

  8. 商品期货高频交易策略Tick框架

    原帖地址:https://www.fmz.com/bbs-topic/1184在商品期货高频交易策略中, Tick行情的接收速度对策略的盈利结果有着决定性的影响,但市面上大多数交易框架,都是采用回调模 ...

  9. SQL 设置登录名和密码

    1.打开SQL Server Manager管理器,在左面找到 ‘安全性’ 单击右键 选择‘新建”->“登录”, 如下图 2.弹出对话框,在登录名中输入你的登录号,选择'SQLSERVER身份验 ...

  10. 转】 Kafka文件存储机制那些事

    原博文出自于:http://tech.meituan.com/kafka-fs-design-theory.html    感谢! Kafka是什么 Kafka是最初由Linkedin公司开发,是一个 ...