目前测试支持的浏览器:

兼容IE10及以上、Chrom、Firefox浏览器。

假如考虑IE10以下浏览器,可以考虑其他写法。

话不多说,上代码:

 

    <div style="background: green; display: flex;">
<div style="flex-basis: auto; white-space: nowrap; background: #f00; ">我在左边。我很长很长很长很长很长长很长很长很长很长很长很长</div>
<div style="width: 100%; background: #0f0;">我在右边很短</div>
</div>

  

效果如下:

再来个反例代码:

    <div style="background: #00f; display: flex;">
<div style="flex-basis: auto; white-space: nowrap; background: #f00; ">我在左边很短</div>
<div style="width: 100%; background: #0f0;">我在右边边。我很长很长很长很长很长长很长很长很长很长很长很长</div>
</div>

  

效果如下:

相信大家也一目了然了。

左侧内容多的话,会自动撑开左侧的div。

同时右边的div还可以自适应剩余的宽度(外层div宽度 - 左侧div宽度)。

再也不用去考虑传统的盒子模型布局中的 display position float之类的了。

Flex布局:实现左右两列自伸缩撑满效果的的更多相关文章

  1. css常见的各种布局上(两列布局)

    常见的布局上(两列布局) 1.常见的两列布局 1.1左边固定,右边自适应,左边宽度已知,右边默认占满整行,使用left 左浮动,右边不浮动,设置margin-left:左侧宽度 <style&g ...

  2. DIV+CSS 网页布局之:两列布局

    1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...

  3. [CSS布局]3列布局:左右两列固定宽度、中间列自适应满宽

    一种常见的3列布局,左右两列固定宽度.中间列自适应满宽.整个网页不出现横向滚动条 纯CSS实现 效果图: 代码: <!DOCTYPE html> <html lang="e ...

  4. 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局

    一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...

  5. css 两列自适应布局的4种思路

    前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...

  6. CSS两列布局的N种实现

    一.什么是两列布局 两列布局分为两种,一种是左侧定宽.右侧自适应,另一种是两列都自适应(即左侧宽度由子元素决定,右侧补齐剩余空间).在CSS面试题里面属于常考题,也是一个前端开发工程师必须掌握的技能, ...

  7. div+css经典三行两列布局

    写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...

  8. CSS读书笔记(1)---选择器和两列布局

    (1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...

  9. 微信小程序开发:Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

随机推荐

  1. Java 制作证书的工具keytool用法总结

    一.keytool的概念 keytool 是个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认证自己)或数据完整性以及认证服务.在 ...

  2. Apache Spark 2.2.0 中文文档 - Submitting Applications | ApacheCN

    Submitting Applications 在 script in Spark的 bin 目录中的spark-submit 脚本用与在集群上启动应用程序.它可以通过一个统一的接口使用所有 Spar ...

  3. java基础——java.util.ConcurrentModificationException

    在编写代码的时候,有时候会遇到List里有符合条件的的对象,就移除改对象! 但是这种操作如:使用了 List 的remove,会导致一些很严重的问题! 如下这段代码使用ArrayList: @Test ...

  4. 执行sql时出现错误 extraneous input ';' expecting EOF near '<EOF>'

    调用jdbc执行hive sql时出现错误 Error while compiling statement: FAILED: ParseException line 5:22 extraneous i ...

  5. FastDFS 分布式文件系统的安装与使用

    跟踪服务器:192.168.152.129 (centos1) 存储服务器:192.168.152.130 (centos2) 环境:CentOS 6.6 用户:root 数据目录:/fastdfs ...

  6. Elixir游戏服设计一

    在Erlang游戏服设计总结http://www.cnblogs.com/rubyist/p/5530575.html里, 我提到我想要的游戏服设计方法,希望以应用做为基础构建块.最近我在学习elix ...

  7. zoj1002 Fire Net

    Fire Net Time Limit: 2 Seconds      Memory Limit: 65536 KB Suppose that we have a square city with s ...

  8. Github Page--CSDN新人的第二选择

    我也是个CSDN新人,使用的CSDN的初衷应该和众人类似,就是想总结下平时的学习成果,或者一些想法. CSDN好的地方: 书写界面简洁,支持markdown语法 人还算多,也比较年轻 相对较活跃 内容 ...

  9. 原生js反转字符串

    //直接操作 var str='nama';var rts=str.split('').reverse().join(''); //String上拓展方法String.prototype.revers ...

  10. flying-saucer + iText + Freemarker实现pdf的导出, 支持中文、css以及图片

    前言 项目中有个需求,需要将合同内容导出成pdf.上网查阅到了 iText , iText 是一个生成PDF文档的开源Java库,能够动态的从XML或者数据库生成PDF,同时还可以对文档进行加密,权限 ...