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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex三列布局</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         #head{
  12.             width: 100%;
  13.             height: 100px;
  14.             border: 1px solid;
  15.             background-color: red;
  16.         }
  17.         #content{
  18.             width: 100%;
  19.             border: 1px solid;
  20.             display: flex;
  21.         }
  22.         #content>.item:nth-child(1){
  23.             order: 2;
  24.             word-wrap:break-word;
  25.             flex: 1;
  26.         }
  27.         #content>.item:nth-child(2){
  28.             min-width: 300px;
  29.             order: 1;
  30.         }
  31.         #content>.item:nth-child(3){
  32.             min-width: 300px;
  33.             order: 3;
  34.         }
  35.         #footer{
  36.             width: 100%;
  37.             height: 100px;
  38.             border: 1px solid;
  39.             background-color: blue;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44. <div id="head"></div>
  45. <div id="content">
  46.     <div class="item">middlemiddlemiddlemiddlemiddlemiddlem
  47.         ddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddle
  48.         middlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemi
  49.         dlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddl
  50.         emiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemi
  51.         ddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemid
  52.         dlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlem
  53.         iddlemiddlemiddlemiddlemiddlemiddlemiddl emiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemidd
  54.         le middlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemi
  55.         ddlemiddlemiddlemiddle</div>
  56.     <div class="item">left</div>
  57.  
  58.     <div class="item">right</div>
  59. </div>
  60. <div id="footer"></div>
  61. </body>
  62. </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. Android UI性能测试——使用 Gfxinfo 衡量性能

    Android官方文档翻译 原文地址:https://developer.android.com/training/testing/performance参考:https://www.jianshu. ...

  2. .NET的资源并不限于.resx文件

    为了构建一个轻量级的资源管理框架以满足简单的本地化(Localization)的需求,我试图直接对现有的Resource编程模型进行扩展.虽然最终没能满足我们的需求,但是这两天也算对.NET如何进行资 ...

  3. python3正则提取字符串里的中文

    # -*- coding: utf-8 -*- import re #过滤掉除了中文以外的字符 str = "hello,world!!%[545]你好234世界..." str ...

  4. Python字符串及基本操作（入门必看）

    基础入门的知识一直没有更新完,今天小张接着给大家带来入门级的字符串的常用操作.本文适合刚入门的小白,大佬们请绕过. 一.定义 字符串的意思就是“一串字符”,比如“Hello,Charlie”是一个字符 ...

  5. 计网-ping服务命令与ICMP协议

    目录 一.IP协议的助手 —— ICMP 协议(网络层协议) 二.ping —— 查询报文类型的使用 三.traceroute —— 差错报文类型的使用 参考:从Wireshark抓包软件角度理解PI ...

  6. java物流查询接口测试代码-快递100

    测试代码 返回json格式,xml/html格式自行修改参数 import java.io.IOException; import java.io.InputStream; import java.n ...

  7. ysoserial-C3P0 分析

    环境准备: pom: <!-- https://mvnrepository.com/artifact/com.mchange/c3p0 --> <dependency> < ...

  8. PyTorch专栏（五）：迁移学习

    专栏目录: 第一章:PyTorch之简介与下载 PyTorch简介 PyTorch环境搭建 第二章:PyTorch之60分钟入门 PyTorch入门 PyTorch自动微分 PyTorch神经网络 P ...

  9. Python第七章-面向对象

    面向对象编程基础 一.面向对象概念 1.1 什么是面向过程 ​ 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了. ​ 生活中的的例子举例. 1.2 ...

  10. LeetCode#1047-Remove All Adjacent Duplicates In String-删除字符串中的所有相邻重复项

    一.题目 给出由小写字母组成的字符串 S,重复项删除操作会选择两个相邻且相同的字母,并删除它们. 在 S 上反复执行重复项删除操作,直到无法继续删除. 在完成所有重复项删除操作后返回最终的字符串.答案 ...