一、使用display:flex;实现两栏布局

body,div{margin:0px;padding:0px;}
.flex-container{display:flex;height:300px;}
.item{padding:6px;}
.item1{flex:0 0 auto;background-color:#999;width:200px;}
.item2{flex:1 1 auto;background-color:#484;}
<div class="flex-container">
<div class="item item1">这是左侧内容</div>
<div class="item item2">这是右侧内容</div>
</div>

二、使用display:flex;实现三栏布局

body,div{margin:;padding:;}
.flex-container{display:flex;height:300px;}
.item{padding:5px;width:200px;}
.item1,.item3{flex:0 0 auto;background-color:#372;}
.item2{flex:1 1 auto;background-color:#efe;}
<div class="flex-container">
<div class="item item1">这是左侧内容</div>
<div class="item item2">这是中间内容</div>
<div class="item item3">这是右侧内容</div>
</div>

使用display:flex;实现两栏布局和三栏布局的更多相关文章

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

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

  2. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  3. 布局:高度已知,布局一个三栏布局,左栏和右栏宽度为200px,中间自适应

    需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...

  4. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  5. CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...

  6. 慕课笔记利用css进行布局【三列布局】

    三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...

  7. 关于两栏布局,三栏布局,一级点击三角触发select的onchange事件问题

    首先看这样一个效果:,这个截图来自移动端的列表的一整行,在这个效果当中,存在两个技术点,首先选择祝福卡这个宽度是一定的,右边的部分,宽度随着手机屏幕的宽度而自适应,再一个技术点就是点击最右侧向下箭头, ...

  8. CSS 实现:两栏布局(等宽布局)

    ☊[实现要求]:两栏等宽布局 <div class="demo3"> <div class="col-1"></div> & ...

  9. 两列布局(浮动、定位、flex)和三列布局(圣杯、双飞翼、flex)

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

随机推荐

  1. attack on titans(动态规划递推,限制条件,至少转至多方法,进击的巨人)

    题目意思: 给n个士兵排队,每个士兵三种G.R.P可选,求至少有m个连续G士兵,最多有k个连续R士兵的排列的种数. 原题 Attack on Titans Time Limit: 2 Seconds ...

  2. [Luogu] P1407 [国家集训队]稳定婚姻

    题目描述 我国的离婚率连续7年上升,今年的头两季,平均每天有近5000对夫妇离婚,大城市的离婚率上升最快,有研究婚姻问题的专家认为,是与简化离婚手续有关. 25岁的姗姗和男友谈恋爱半年就结婚,结婚不到 ...

  3. 解决maven无法加载本地lib/下的jar包问题(程序包XXX不存在)

    这次一个项目用到maven编译,我在本地开发的时候jar包都是放在WEB-INF/lib目录下,通过 BuildPath将jar包导入,然后用MyEclipse中的:maven package命令打成 ...

  4. rm -rf & node

    rm -rf & node rm -rf $ rm -rf mydir https://www.computerhope.com/issues/ch000798.htm https://sta ...

  5. Ubuntu16.04再次装机记

    个人的吐槽 整个国庆假期(9天),基本上都在搭建PHP环境中耗费了. 是这样的——来大学报到前,想着大学里用个Dev-C++应该够了,于是把Ubuntu删了,腾出了100G的空间.到了CSU,加了团委 ...

  6. 【tomcat】如何修改tomcat的默认项目

    我们知道,在Tomcat安装.配置.启动成功后在浏览器地址栏输入http://localhost:8080会访问到Tomcat的默认主页. 然后我们打开Tomcat的webapps目录时,会发现里面有 ...

  7. Spring Cloud简介/版本选择/ZooKeeper例子搭建简单说明

    一.什么是Spring Cloud 官方的说法就是Spring Cloud 给开发者提供一套按照一定套路快速开发分布式系统的工具. 具体点就是Spring Boot实现的微服务架构开发工具.它为微服务 ...

  8. 18、Java并发性和多线程-饥饿与公平

    以下内容转自http://ifeve.com/starvation-and-fairness/: 如果一个线程因为CPU时间全部被其他线程抢走而得不到CPU运行时间,这种状态被称之为“饥饿”.而该线程 ...

  9. 《深入理解PHP内核》

    http://www.php-internals.com/ http://www.cnblogs.com/zcy_soft/category/252731.html

  10. 深度优先遍历DFS

    深度优先遍历,这个跟树中的遍历类似,做深度遍历就是访问一个节点之后,在访问这个节点的子节点,依次下去是一个递归的过程. 具体代码: void DFS(MGraph g ,int i) {     in ...