flex实现三列布局
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实现三列布局的更多相关文章
- css常见的各种布局下----三列布局
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...
- 两列布局（浮动、定位、flex）和三列布局（圣杯、双飞翼、flex）
demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/ 两栏布局 浮动 <div class="box1"> <d ...
- CSS三列布局
× 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...
- Layout 不可思议（二）—— 两侧定宽的三列布局
三列布局作为网页设计中最常见的布局,其实现方法早已被诸位前端大神摸透 网上相关的文章很多,原本已无必要再做赘述 不过既然开了 Layout 系列,三列布局就是必修课 本文整理了一些常用的实现方法,然后 ...
- CSS实现三列布局
三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...
- CSS三列布局之左右宽度固定，中间元素自适应问题
最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- css 三列布局
前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中间自适应.两列定宽一侧自适应.中间定宽两侧自适应.一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中 ...
- 【css】css2实现两列三列布局的方法
前言 对于 flex 弹性布局相信大家都有所了解,它是 css3 中的属性,然而它具有一定的兼容性问题.楼主前几天面试时遇到了面试官需要设计一个两列布局,我当然就说父元素 flex 吧哩吧啦,然而需要 ...
随机推荐
- python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
今天使用pip安装第三库时,有时会报错: pip._vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool(host='file ...
- Java attack - Java 特性
Java 语言平台版本 l J2SE (Java 2 Platform Standard Edition) 标准版 是为开发普通桌面和商务应用程序提供的解决方案,该技术体系是其他两者的基础,可以完成 ...
- 阿里云服务器Ubuntu系统搭建LNMP环境
目录 一.Nginx 安装 二.MySQL安装 三.PHP安装 四.配置Nginx 五.环境测试 六.服务器常用路径 一.Nginx 安装 更新软件源 sudo apt-get update 安装 N ...
- "xaml+cs"桌面客户端跨平台初体验
"Xaml+C#"桌面客户端跨平台初体验 前言 随着 .Net 5的到来,微软在 .Net 跨平台路上又开始了一个更高的起点.回顾.Net Core近几年的成果,可谓是让.Ne ...
- OpenCV-Python ORB(面向快速和旋转的BRIEF) | 四十三
目标 在本章中,我们将了解ORB的基础知识 理论 作为OpenCV的狂热者,关于ORB的最重要的事情是它来自" OpenCV Labs".该算法由Ethan Rublee,Vinc ...
- 推荐 | 7个你最应该知道的机器学习相关github项目
欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! 磐石 目录: 介绍 Person Blocker(人体自动遮挡) ...
- 【干货】史上最全的Tensorflow学习资源汇总
欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! 作者:AI小昕 在之前的Tensorflow系列文章中,我们教大家 ...
- 阿里开源首个移动AI项目，淘宝同款推理引擎
淘宝上用的移动AI技术,你也可以用在自己的产品中了. 刚刚,阿里巴巴宣布,开源自家轻量级的深度神经网络推理引擎MNN(Mobile Neural Network),用于在智能手机.IoT设备等端侧加载 ...
- python中面向对象&装饰器
类的定义 基本形式: class ClassName(object): Statement 1.class定义类的关键字 2.ClassName类名,类名的每个单词的首字母大写. 3.object是父 ...
- coding++ ：javascript Date format (js日期格式化)
方式一: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1 ...