1. <!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>
  2.  
  3. </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. Xubuntu 计划从 19.04 版本开始停止提供 32 位安装镜像（XDE/LXQt的 Lubuntu 成为了目前唯一仍然提供 32 位安装镜像的 Ubuntu 桌面发行版）

    Ubuntu 17.10 以及其他许多 *buntu 衍生品都已在今年早些时候停止提供 32 位安装镜像.但其中有一个依然坚持提供适用于 i386 架构的镜像,它就是 Xubuntu,但现在 Xubu ...

  2. CSP 201703-4 地铁修建【最小生成树+并查集】

    问题描述 试题编号: 201703-4 试题名称: 地铁修建 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 A市有n个交通枢纽,其中1号和n号非常重要,为了加强运输能力,A市 ...

  3. Swing的Look And Feel机制研究

    首先,参考了一下这篇文章 里面提到需要自己Override L&F的initClassDefaults方法,但是查看了一下NimbusLookAndFeel, 发现它为了没有实现initCla ...

  4. iOS如何查看静态库.a文件支持的cpu类型

    打开终端: 输入 lipo -info 然后将你要查看的静态库.a 文件找到,拖入 -info 后边.假设路径为A,即为 lipo -info A 回车键,然后就会看到静态库是否支持 armv7,ar ...

  5. POJ2352 star

    传送门 这道题有个非常好听的名字,求二维偏序! 听起来似乎很高端,但就是让求满足对于每个i,xi < xj && yi < yj的个数. 这道题特别良心,给的顺序都是y递增 ...

  6. TypeError: expected bytes-like object, not str

    报错内容:TypeError: expected bytes-like object, not str 例: a = base64.b64encode(temp) 改为: a = base64.b64 ...

  7. Python 之reduce()函数

    reduce()函数: reduce()函数也是Python内置的一个高阶函数.reduce()函数接收的参数和 map()类似,一个函数 f,一个list,但行为和 map()不同,reduce() ...

  8. win10设置锁屏时间

    这里应该修改成自己希望的分钟数  比如120分钟

  9. bzoj 2442: [Usaco2011 Open]修剪草坪【单调栈】

    设f[i]为i不选的最小损失,转移是f[i]=f[j]+e[i[(i-j-1<=k) 因为f是单调不降的,所以f[j]显然越靠右越好因为i-j-1<=k的限制,所以单调栈需要弹栈 #inc ...

  10. 例题 5-1 STL

    Raju and Meena love to play with Marbles. They have got a lot of marbles with numbers written on the ...