display:flex代替float

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

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

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

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

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

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

display:flex代替float相关推荐

css不换行属性_前端 | css display:flex 的六个属性你知道吗
前言:display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持. ...
html 清除flex,清除display:flex样式
一.页面行排列布局像此图左右两个div一排显示可以用浮动的布局方式 html部分左侧区域右侧区域 css部分.main .left,.main .right{ border: 1px soli ...
CSS的display:flex说明
在进行网页前端设计时,需要垂直居中显示文本,但CCS似乎没有明确的垂直居中的代码方法,由于目前的页面不再考虑以前的浏览器了,因此采用CSS3的display:flex方法来实现.现记录一下flex属性 ...
弹性布局（display:flex;）属性详解
一.Flex布局-前言 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,旨在提供一个更有效地布局.对齐方式,并且能够使容器中的子元素大小 ...
CSS实现9宫格布局的4种方法：flex、float、grid、table布局
一.实现效果及html代码 1.实现效果 2.html代码 <body><div class="container"><div style=" ...
display:flex和display：block的区别
<ul class="left"><li> <a href="">学校</a></li><li ...
微信小程序CSS布局—display:flex
display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素. 设为Flex布局以后,子元素的float.clear和vertical-align属性将失效. flex的六种属 ...
display:flex 布局教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 一.Flex布局是什么? Flex ...
display flex布局
目录 calc()语法 column 列(兼容性一般般,用的较少) Flex 布局 justify-content属性 align-items 交叉轴 flex-direction属性 flex-wr ...

display:flex代替float

display:flex代替float相关推荐

最新文章

热门文章