使用display:flex;实现两栏布局和三栏布局

时间:2021-06-16 04:06:19

一、使用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;实现两栏布局和三栏布局

二、使用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;实现两栏布局和三栏布局

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

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

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

  2. CSS display&colon;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 &vert; 圣杯布局、双飞翼布局 &vert; 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 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. Android 自定义控件之继承ViewGroup创建新容器

    欢迎大家来学习本节内容,前几节我们已经学习了其他几种自定义控件,分别是Andriod 自定义控件之音频条及 Andriod 自定义控件之创建可以复用的组合控件还没有学习的同学请先去学习下,因为本节将使 ...

  2. Android零碎知识

    1.当启动一个APP时按下后退键会调用onBackPressed方法. 如果想要屏蔽后退键只需要重写onBackPressed方法如下即可: @Override public void onBackP ...

  3. 工作中的sql语句总结

    1,查找mysql 数据库 自动 添加 序号 字段列1,2,3,4 ) AS rowno,ip,startcount ) b 2,mysql的分页语句 limit后面第一个参数是index,从0开始: ...

  4. android mk odex问题 push apk 不生效

    Android编译是否生成odex的设置 默认编译odex版本,如果需要非odex版本,请将device/huawei/k3v2_s10/BoardConfig.mk如下两个变量的值修改为:DISAB ...

  5. Redis中各种方法的使用

    ①set ; i< ; i++) { // 不可以重复添加数据 client.AddItemToSet(KKey, "dong升-" + i); } client.Remov ...

  6. Java设计模式之适配器模式&lpar;项目升级案例&rpar;

    今天是我学习Java设计模式中的第三个设计模式了,但是天气又开始变得*起来,对于我这个凉爽惯了的青藏人来说,又是非常闹心的一件事儿,好了不管怎么样,目标还是目标(争取把23种Java设计模式接触一遍 ...

  7. NewSQL数据库VoltDB特性简介

    VoltDB是一个革命性的新型数据库产品,被称作NewSQL数据库.它基于H-Store,号称比当前数据库产品的吞吐量高45倍,同时又具有很高的扩展性.它的特性主要有以下几点: Ø  高吞吐.低延迟: ...

  8. 如何提高 windows 的使用效率?--巧用运行命令

    windows 操作系统可以使用 win+R 运行一些命令执行任务,好处是:高效.快速.准确. 启动程序 将程序 chrome 写入以下注册表中, SOFTWARE\Microsoft\Windows ...

  9. 如何用MarsEdit快速插入源代码

    开始用MarsEdit来写博文,客户端的,毕竟是要方便的多啊. 遇到的第一个问题就是:MarsEdit没有提供快速插入源代码的工具,而对于我这枚码农而言,这个就有点太杯具了. 简单研究了一下,发现Ma ...

  10. redis惊群

    本文链接:http://www.cnblogs.com/zhenghongxin/p/8681168.html 什么是惊群 首先,我们使用缓存的主要目的就是为了高并发情况下的高可用,换句话说,在使用了 ...