一、使用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. 如何同步iframe与嵌入内容的高度

    最近频繁的做一些通过iframe在a页面嵌入b页面需求.总结下来,有以下问题需要解决 1.如何同步iframe与嵌入内容的高度 2.将b页面载入到a页面后,如何隐藏掉b页面上的元素,如左导航,顶部导航 ...

  2. oracle的分号、斜杠和commit

    ;分号表示一个语句的结束 //表示执行前面的一个代码块,例如begin/end,代码块后面必须跟/才能执行. commitcommit表示提交一个事务,例如insert,delete,update等, ...

  3. 在vmware中 centos7安装gooderp

    环境为windows 10系统,vmware 12,centos 7.4.centos安装了gnome桌面,用里面的终端来安装,自带的firefox浏览器. 增加用户 首先要新建一个用户来管理good ...

  4. * format-- set command window output display format

    the displayed number may not match the input number due to display format default: 4 decimal syntax: ...

  5. 【16】AngularJS API

    AngularJS API API 意为 Application Programming Interface(应用程序编程接口). AngularJS 全局 API AngularJS 全局 API ...

  6. 学渣乱搞系列之Tarjan模板合集

    学渣乱搞系列之Tarjan模板合集 by 狂徒归来 一.求强连通子图 #include <iostream> #include <cstdio> #include <cs ...

  7. HDU 1325 拓扑排序

    根据题目所给的3个不符合情况的条件,一个个判断图是否符合这3个条件即可 1.不能出现内部环,拓扑排序判断 2.不能有超过1个点的入度为0,因为只有一个树根 3.每个点最多一个入度 这里要注意的一点是这 ...

  8. [luoguP1516] 青蛙的约会(扩展欧几里得)

    传送门 对于数论只会gcd的我,也要下定决心补数论了 列出方程 (x + t * m) % l = (y + t * n) % l 那么假设 这两个式子之间相差 num 个 l,即为 x + t * ...

  9. sdibt 1251 进化树问题

    /* 三个点的话 A--D--B | C dis(AD)=(AB+AC-BC)/2; 拓展到到n个点 每次去叶子节点,先去掉与A相连长度最小的. 将他们的长度加起来. */ #include<s ...

  10. T1082 线段树练习3 codevs

    http://codevs.cn/problem/1082/ 题目描述 Description 给你N个数,有两种操作: 1:给区间[a,b]的所有数增加X 2:询问区间[a,b]的数的和. 输入描述 ...