摘要:弹性盒模型相比传统的盒模型,可以更加简单的实现各种布局页面简单举一个例子,代码如下加上厂商前缀,目前使用方式都有三种写法,旧的,过度的,新的的属性假如的改成也能实现数字的垂直居中
弹性盒模型相比传统的盒模型(display+position+float),可以更加简单的实现各种布局页面
简单举一个例子,代码如下
123
css
.row{width:200px; height: 50px; /*加上厂商前缀,目前使用方式都有三种写法:1,旧的2,过度的3,新的*/ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap;} .row div{ width:50px;height:50px; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; line-height: 5rem; background-color: #f69f75; }
.list的属性
flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow:|| ; justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-flow:row nowrap || flex:column wrap
flex-flow:row-reverse nowrap
flex-flow:column nowrap
假如.row div的css改成
.row div{ width:50px; height:50px; display: flex; justify-content: center; align-items: center; background-color: #f69f75; }
也能实现数字的垂直居中
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115129.html
摘要:中各种布局的背后,实质上是各种的组合。相反,一些块容器盒,比如非替换行内块及非替换表格单元格,不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒,用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后,实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。 盒模型(Box M...
摘要:弹性盒模型弹性盒子是的一种新布局模式,由容器父元素和项目子元素组成。弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。弹性盒模型 弹性盒子是css3的一种新布局模式,由容器(父元素)和项目(子元素)组成。 弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒模型的目的:提供一种更加有效的方式...
阅读 2464·2021-10-19 11:45
阅读 2369·2021-09-30 09:56
阅读 1384·2021-09-30 09:47
阅读 568·2019-08-30 15:53
阅读 1810·2019-08-30 15:44
阅读 554·2019-08-30 12:52
阅读 1056·2019-08-30 11:16
阅读 1578·2019-08-29 16:36