昨天做一个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. bzoj2588: Spoj 10628. Count on a tree（树上第k大）（主席树）

    每个节点继承父节点的树,则答案为query(root[x]+root[y]-root[lca(x,y)]-root[fa[lca(x,y)]]) #include<iostream> #i ...

  2. bzoj2165: 大楼(倍增floyd)

    题目大意:一个有向图,n(<=100)个点求一条长度>=m(<=10^18)的路径最少经过几条边. 一开始以为是矩乘,蓝鹅当时还没开始写,所以好像给CYC安利错了嘿嘿嘿QWQ 第一眼 ...

  3. jq的$.each遍历数组

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 理清一下JavaScript面向对象思路

    借这篇文章理清一下自己的思路,同时也希望能给和我同样一知半解的同学理清一下思路.引发思考来自于我犯的一个错误,错误代码是这样的: 1 var o = { 2     ... 3 } 4 var obj ...

  5. Java重要知识点

    1.Java中除了static方法和final方法之外,其它所有的方法都是动态绑定,如同C++的虚函数,但是我们不需要显示的声明. private方法本质上属于final方法(因此不能被子类访问). ...

  6. stout代码分析之六：Stopwatch

    在进行性能测试时,经常需要计算某个函数执行的时长.stout中的Stopwatch类可实现纳秒精度的计时. Stopwatch内部使用timespec记录开始和技术时间.   timeval和time ...

  7. uboot下的命令行

    1.典型嵌入式linux系统启动过程: 嵌入式系统上电后先执行uboot.然后uboot负责初始化DDR,初始化Flash,然后将OS从Flash中读取到DDR中,然后启动OS(OS启动后uboot就 ...

  8. wamp环境介绍

    一.简介 Wamp就是 Windows Apache Mysql PHP集成安装环境,即在window下的apache.php和mysql的服务器软件. 二.常用的集成环境 XAMPP - XAMPP ...

  9. Activiti工作流——流程表数据转化

    任务流程部署:  启动流程实例: 请假人完成请假申请: 部门经理完成审批: 总经理审批完成:

  10. JAVA有关命名规范

    包名:          xxxyyyzzz 全小写 类名/接口名:XxxYyyZzz 所有单词首字母大写,其他小写 方法名:       xxxYyyZzz第一个单词首字母小写,其他单词首字母大写 ...