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. mysql8 修改root密码

    Navicat工具里选中mysql数据库 执行: ALTER user 'root'@'localhost' IDENTIFIED BY 'newpassward'; //newpassward 新密 ...

  2. CodeMixerPro工具,完美替代ChaosTool，iOS添加垃圾代码工具，代码混淆工具，代码生成器，史上最好用的垃圾代码添加工具，自己开发的小工具

    新工具 ProjectTool 已上线 这是一款快速写白包工具,秒级别写H5游戏壳包,可视化操作,极易使用,支持Swift.Objecive-C双语言 扣扣交流群:811715780 进入 Proje ...

  3. JavaScript(8)--- 闭包

    JavaScript(8)--- 闭包 理解闭包 我的理解是:闭包就是能够读取其他函数内部变量的函数.由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以简单这样理解 &q ...

  4. vunlhub-DC-1-LinuxSuid提权

    将靶场搭建起来 桥接看不到IP 于是用masscan 进行C段扫描 试试80 8080 访问之后发现是个drupal 掏出msf搜索一波 使用最近年限的exp尝试 exploit/unix/webap ...

  5. Django 后台管理xadmin

    一. xadmin的使用 后台管理在开发中可以给我们提供很大的便利,django自带了一个后台管理admin,不过还有一个xadmin比django自带的好用一些,功能更加强大,为模型提供了版本控制, ...

  6. 【视频+图文】Java经典基础练习题（三）：输入3个整数，并将其由小到大输出

    目录 一.视频讲解 二.思路分析 总结: 三.代码+详解+结果 四.彩蛋 能解决题目的代码并不是一次就可以写好的 我们需要根据我们的思路写出后通过debug模式找到不足再进行更改 多次测试后才可得到能 ...

  7. 题解 P3205 【[HNOI2010]合唱队】

    讲讲我的做法 看了题目发现要用区间\(dp\),为什么? 我们发现区间\(dp\)有一个性质--大区间包涵小区间,这道题就符合这样的一个性质 所以我们要用区间\(dp\)来解决这道题. 如何设计状态 ...

  8. PHP一致性hash

    PHP提供了两种比较两个变量的方法: 松散比较使用 == or != : 两个变量都具有“相同的值”. 严格比较 === or !== : 两个变量都具有“相同的类型和相同的值”. 类型杂耍 真实陈述 ...

  9. JavaScript DOM 事件模型

    JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制.事件反馈.事件冒泡.事件捕获以及事件委托能帮助 ...

  10. 使用datasest属性改变样式

    使用datasest属性改变样式 传统做法 对于html中的标签我们可以自定义标签中的属性,例如给input加一个aaa属性 <input type="text" aaa=& ...