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. 【原创】面试官:谈谈你对mysql联合索引的认识?

    引言 本文预计分为两个部分: (1)联合索引部分的基础知识 在这个部分,我们温习一下联合索引的基础 (2)联合索引部分的实战题 在这个部分,列举几个我认为算是实战中的代表题,挑出来说说. 正文 基础 ...

  2. 2. Plugin execution not covered by lifecycle configuration

    问题: 找到当前项目的工作空间下的.metadata\.plugins\org.eclipse.m2e.core路径, 然后添加lifecycle-mapping-metadata.xml文件,内容如 ...

  3. Apex_2. LiveBos两个时间求相差天数、历时

    (1)获取两个时间相差天数(没有上午下午区分) var d1=ABS_DATESTRING(FStartTime,'yyyy/MM/dd'); var d2=ABS_DATESTRING(FEndTi ...

  4. 居家办公之后,鹅厂小哥发现Web开发竟能助力身体健康!

    疫情特殊时期,各企业.学校纷纷启用远程办公和学习的方式,在办公期间,除了要完成日常工作安排,还要照顾自身的饮食起居,在高强度的工作节奏和缺少运动锻炼的情况之下,如何及早发现健康隐患,快乐办公?且看鹅厂 ...

  5. Journal of Proteome Research | Down-Regulation of a Male-Specific H3K4 Demethylase, KDM5D, Impairs Cardiomyocyte Differentiation (男性特有的H3K4脱甲基酶基因(KDM5D)下调会损伤心肌细胞分化) | (解读人:徐宁)

    文献名:Down-Regulation of a Male-Specific H3K4 Demethylase, KDM5D, Impairs Cardiomyocyte Differentiatio ...

  6. Mycat的简介及安装

    Mycat简介: 1.1Mycat含义 简单的说,MyCAT就是: 一个彻底开源的,面向企业应用开发的“大数据库集群” 支持事务.ACID.可以替代Mysql的加强版数据库 一个可以视为“Mysql” ...

  7. F版本SpringCloud 3—大白话Eureka服务注册与发现

    引用:服务注册与发现,就像是租房子一样 前言 今天洛阳下雨了,唉,没有想到有裹上了羽绒服,不穿冷穿了热的尴尬温度.上学工作这么多年都在外面,家里竟然没有一件春天的外套. 日常闲聊之后,开始今天的芝士环 ...

  8. R之Shiny学习笔记

    官方教程:https://shiny.rstudio.com/tutorial/ 中文教程:http://yanping.me/shiny-tutorial/ 英文教程:https://deanatt ...

  9. 动态规划-Minimum Distance to Type a Word Using Two Fingers

    2020-01-12 18:28:13 问题描述: 问题求解: 本题还是非常困难的,至少我在看到这个题目的时候是没有想到怎么解决的.我当时联想到的题目是那条grid走两遍的题目,那条题目也很麻烦,使用 ...

  10. RNN,GRU,LSTM

    2019-08-29 17:17:15 问题描述:比较RNN,GRU,LSTM. 问题求解: 循环神经网络 RNN 传统的RNN是维护了一个隐变量 ht 用来保存序列信息,ht 基于 xt 和 ht- ...