昨天做一个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. 2-17作业 数据库和shell综合练习

    1. 使用shell把“12306用户名和密码库-不要使用记事本打开会卡死-解压后可使用word或ultraedit打开.rar”中的所有记录成生sql语句,然后把sql导入数据库,成一个uPwd_1 ...

  2. MySQL、Oracle、DB2等数据库常规排序、自定义排序和按中文拼音字母排序

    MySQL常规排序.自定义排序和按中文拼音字母排序,在实际的SQL编写时,我们有时候需要对条件集合进行排序. 下面给出3中比较常用的排序方式,mark一下 1.常规排序ASC DESC ASC 正序 ...

  3. win7下idea远程连接hadoop，运行wordCount

    1.将hadoop-2.6.1.tar.gz解压到本地 配置环境变量 HADOOP_HOME E:\kaifa\hadoop-2.6.1\hadoop-2.6.1 HADOOP_BIN_PATH %H ...

  4. Network LCA修改点权

    Problem Description The ALPC company is now working on his own network system, which is connecting a ...

  5. 更改本地hosts文件

    在 C:\Windows\System32\drivers\etc 下更改 hosts 文件 127.0.0.1 www.baidu.com 这样访问 www.baidu.com 这个地址,其实是访问 ...

  6. linux包安装，解压，压缩，包管理，环境变量

    linux 包安装,解压,压缩,包管理 centoscentos上有系统包管理器yum yum的配置一般有两种方式,一种是直接配置/etc目录下的yum.conf文件,另外一种是在/etc/yum.r ...

  7. Redux Concepts

    Redux解决数据通信复杂问题. Store 存储数据的地方,一个应用只有一个Store. State Store对象包含所有数据. Action 一个对象,表示View的变化. Action Cre ...

  8. RSA host key has changed 错误

    RSA host key for mysharebook.cn has changed and you have requested strict checking.Host key verifica ...

  9. 【51NOD-0】1134 最长递增子序列

    [算法]动态规划 [题解]经典模型:最长上升子序列(n log n) #include<cstdio> #include<algorithm> #include<cstr ...

  10. 15、简述MySQL的执行计划？

    具体的Mysql的执行计划,请参考下面的链接: MySQL_执行计划详细说明