<!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. RPC和微服务

    1 什么是RPC 是remote procedure call的缩写. 2 什么是微服务 所谓的微服务就是说,把一个应用分解成一组小的服务,每个服务运行在自己的进程中.每个服务都可以单独部署,可以用自 ...

  2. HDU 4850 Wow! Such String!(欧拉道路)

    HDU 4850 Wow! Such String! 题目链接 题意:求50W内的字符串.要求长度大于等于4的子串,仅仅出现一次 思路:须要推理.考虑4个字母的字符串,一共同拥有26^4种,这些由这些 ...

  3. 【ZJOI2009】【Codevs 2347】假期的宿舍

    http://codevs.cn/problem/2347/ Solution 二分图板子 连边:i认识j并且j是在校有床 i→j+n i有床i→i+n 还有就是找要在学校的人,1.有床不回2.没床的 ...

  4. SPI操作flash MX25L64读写数据

    STM32F10X SPI操作flash MX25L64读写数据 简单的一种应用,ARM芯片作为master,flash为slaver,实现单对单通信.ARM主控芯片STM32F103,flash芯片 ...

  5. 1998 NOIP 拼数 string 和sort的新理解

    题目:https://www.luogu.org/problemnew/show/P1012 今天真是长了见识.这道题做了十几分钟,用模拟愣是调不出来.直到我看了题解——(当场去世)…… 题的意思是n ...

  6. 安装Git（转载）

    转自:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396287703 ...

  7. P4576 [CQOI2013]棋盘游戏

    传送门 很显然,除非白子和黑子相邻,否则必然是黑子获胜虽然我并没有看出来 那么现在对黑子来说它要尽可能快的赢,对白子它要多苟一会儿 然后就是这个叫做对抗搜索的东西了 //minamoto #inclu ...

  8. Linux学习之02_Linuxd的文件权限与目录配置

    这里一些基本介绍就不介绍了,还是来介绍一下相关的命令 这一节重要的命令有这些: chgrp chown chmod 1.改变文件属性和权限 chgrp----改变文件所属用户组 chown----改变 ...

  9. 状态压缩+枚举 POJ 3279 Fliptile

    题目传送门 /* 题意:问最少翻转几次使得棋子都变白,输出翻转的位置 状态压缩+枚举:和之前UVA_11464差不多,枚举第一行,可以从上一行的状态知道当前是否必须翻转 */ #include < ...

  10. 石墨烯（转自wiki）

    石墨烯(Graphene)是一种由碳原子以sp2杂化轨道组成六角型呈蜂巢晶格的平面薄膜,只有一个碳原子厚度的二维材料[1].石墨烯一直被认为是假设性的结构,无法单独稳定存在[1],直至2004年,英国 ...