css3新引入的flex在某些情况下布局非常实用

因为它是弹性盒子所以自适应效果会很棒

不过各项布局方案还是各有优劣

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>flex三列布局</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        #head{

            width: 100%;

            height: 100px;

            border: 1px solid;

            background-color: red;

        }

        #content{

            width: 100%;

            border: 1px solid;

            display: flex;

        }

        #content>.item:nth-child(1){

            order: 2;

            word-wrap:break-word;

            flex: 1;

        }

        #content>.item:nth-child(2){

            min-width: 300px;

            order: 1;

        }

        #content>.item:nth-child(3){

            min-width: 300px;

            order: 3;

        }

        #footer{

            width: 100%;

            height: 100px;

            border: 1px solid;

            background-color: blue;

        }

    </style>

</head>

<body>

<div id="head"></div>

<div id="content">

    <div class="item">middlemiddlemiddlemiddlemiddlemiddlem

        ddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddle

        middlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemi

        dlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddl

        emiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemi

        ddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemid

        dlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlem

        iddlemiddlemiddlemiddlemiddlemiddlemiddl emiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemidd

        le middlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemi

        ddlemiddlemiddlemiddle</div>

    <div class="item">left</div>

    <div class="item">right</div>

</div>

<div id="footer"></div>

</body>

</html>

实现的是基本版的三列布局

很简单

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

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

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

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

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

  3. CSS三列布局

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

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

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

  5. CSS实现三列布局

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

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

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

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

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

  8. css 三列布局

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

  9. 【css】css2实现两列三列布局的方法

    前言 对于 flex 弹性布局相信大家都有所了解,它是 css3 中的属性,然而它具有一定的兼容性问题.楼主前几天面试时遇到了面试官需要设计一个两列布局,我当然就说父元素 flex 吧哩吧啦,然而需要 ...

随机推荐

  1. golang socket编程 net.Conn IO.EOF解读

    结论 首先,先定义下我的理解,当在Read时,收到一个IO.EOF,代表的就是对端已经关闭了发送的通道,通常来说是发起了FIN. 那么根据自己的实际业务,就可以进行判断,这里的IO.EOF到底该怎么利 ...

  2. spring的ioc依赖注入的三种方法(xml方式)

    常见的依赖注入方法有三种:构造函数注入.set方法注入.使用P名称空间注入数据.另外说明下注入集合属性 先来说下最常用的那个注入方法吧. 一.set方法注入 顾名思义,就是在类中提供需要注入成员的 s ...

  3. CVE-2019-3396：Confluence未授权模板注入_代码执行

    title: Confluence未授权模板注入/代码执行(CVE-2019-3396) tags: [poc,cve] 简介 Confluence是一个专业的企业知识管理与协同软件,也可以用于构建企 ...

  4. Redis总结--【持续更新】

    # 什么是Redis? Redis 是完全开源免费的,是一个高性能的key-value内存数据库,读的速度是110000次/s,写的速度是81000次/s     它有以下三个特点:   Redis不 ...

  5. 两行代码统计模型参数量与FLOPs，这个PyTorch小工具值得一试

    你的模型到底有多少参数,每秒的浮点运算到底有多少,这些你都知道吗?近日,GitHub 开源了一个小工具,它可以统计 PyTorch 模型的参数量与每秒浮点运算数(FLOPs).有了这两种信息,模型大小 ...

  6. 【Pytest01】全网最全最新的Pytest框架快速入门

    一.Pytest简介pytest是一个非常成熟的全功能的Python测试框架,主要有一下几个特点:1.简单灵活,容易上手,支持参数化2.能够支持简单的单元测试和复杂的功能测试,还可以用来做seleni ...

  7. Matlab 编程简介与实例

    函数作图 二维平面曲线作图函数  plot(x, y, 's') x, y是长度相同的向量,s表示线型和颜色 如果作多条曲线在同一图上,则用函数: plot(x1, y1, 's1', x2, y2, ...

  8. iOS 页面流畅技巧(1)

    一.屏幕显示图像原理 首先明确两个概念:水平同步信号.垂直同步信号. CRT 的电子枪按照上图中的方式,从上到下一行一行的扫描,扫描完成后显示器就呈现一帧画面,随后电子枪回到初始位置继续下一次的扫描. ...

  9. linux svn 批量添加

    近期开始用svn来进行代码版本的维护管理,之前一直用git,两个感觉大同小异.用svn命令行来添加文件的话需要一个一个的选,很是蛋疼,于是就写了个shell脚本,批量添加文件,还在改进中... #!/ ...

  10. 爬虫scrapy框架的使用

    第一步 下载scrapy模块: pip install scrapy 第二步 创建项目 在终端/cmd进入创建项目的目录:scrapy startproject douban(项目名) 导入pycha ...