昨天做一个css的东西，在开始用js的时候才发现被float占位了

因为float浮动起来了，我清除了浮动，但是还是占位

然后我同事就告诉我其实可以不用float来左右浮动

在父元素上用display:flex完全就可以让子元素左右浮动起来了

而且line-height也可以不用，display:flex里面的align-items:center可以让这个容器处在垂直居中的位置

当然justify-content:center当然就是水平居中了

display:flex代替float的更多相关文章

  1. display:box和display:flex填坑之路

    背景分析:最近做移动端项目时,遇到一个常见的需求: 可以滑动的导航,如下图 虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下: 父元素 width:100%: overf ...

  2. display:box；display:flex；弹性盒模型

    display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...

  3. css display:flex 属性

    一:display:flex 布局 display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它 ...

  4. display:flex布局

    /*背景 居中 自适应 铺满容器*/ background: center / cover; flex布局是什么? flex是Flexibe Box 的缩写,意思为”弹性布局”, 用来为盒子模型提供最 ...

  5. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  6. 1.display:flex布局笔记

    /*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的flo ...

  7. display:flex 布局教程，弹性布局！

    display:flex 布局教程 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...

  8. css中的clear:both,display:flex;

    介绍两者一起讨论的原因: 在明天就国庆的日子里陪着程序员的只有代码,啤酒,还有音乐,然后就是灯光下默默陪伴自己的影子.好了,不矫情了. -------------------------------- ...

  9. CSS——display:flex

    Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 设为Flex布局以后,子元素的float.clear和vertical-align属性 ...

随机推荐

  1. webpack优化总结

    1. 分包 将不需要变动的第三方包分离出去, 主要方法有: (1). externals(2). DllPlugin(3). expose-loader(4). ProviderPlugin 2. 拆 ...

  2. MongoDB插入数据的3种方法

    insert()方法: 下面是在inventory集合中插入一个三个字段的文档: db.inventory.insert( { _id: 10, type: "misc", ite ...

  3. std::string::find() 和 std::string::npos

    npos是一个常数,用来表示不存在的位置,string::npos代表字符串到头了结束了.   int idx = str.find("abc");if (idx == strin ...

  4. OS开发中的事件处理(二)-事件传递，响应者链条

    事件处理的事件传递 简介: 发生触摸事件后,系统会将该事件加入到一个由UIApplication管理的事件 队列中,UIApplication会从事件队列中取出最前面的事件,并将事件分发下去以便处理, ...

  5. std::string在多字节字符集环境下substr的实现方法

    昨天写到<使用多字节字符集的跨平台(PC.Android.IOS.WP)编码/解码方法>中提到服务端使用std::string处理字符串,std::string对多字节字符集支持并不是很完 ...

  6. 无线局域网中RADIUS协议原理与实现

    转载自:http://blog.csdn.net/jinhill/article/details/5901042 摘要  RADIUS协议是一个被广泛应用于网络认证.授权和计费的协议.本文在介绍了RA ...

  7. 常见一个新的maven web工程

    使用Eclipse创建一个新的maven Web应用工程,步骤如下: 1.在Elipse中新建一个maven工程,点击next: 2.选择工程路径(此处使用默认的),点击next: 3.选择Arche ...

  8. [Luogu 2596] ZJOI2006 书架

    [Luogu 2596] ZJOI2006 书架 第一次指针写 FHQ_Treap(省选噩梦数据结构)AC 啦! 省选试机写它,紧张过度失败了. 省选 Day 1 考场写它,写挂了. 省选 Day 1 ...

  9. bzoj 1702: [Usaco2007 Mar]Gold Balanced Lineup 平衡的队列——map+hash+转换

    Description N(1<=N<=100000)头牛,一共K(1<=K<=30)种特色, 每头牛有多种特色,用二进制01表示它的特色ID.比如特色ID为13(1101), ...

  10. 简易微信小程序签到功能

    一.效果图 点击签到后 二.数据库 用一张数据表存用户签到的信息,每次用户签到都会往表中添加一条记录了用户id和签到日期的数据,如下图 三.后端 后端写两个接口,一个用于查询用户今日是否签到和签到记录 ...