html盒子中盒子排列,css3中弹性盒排布使用方法
首先,我们来对弹性盒中的称呼做一些了解
如图,弹性盒分为两个轴,一个是主轴,一个是交叉轴,主轴方向可以改变(左右改上下),主轴方向改变后,交叉轴方向也会随之改变
然后,我们来看下浏览器的大概支持情况
从图上可以看出,ie对于弹性盒的支持可以说是呵呵了,其他的浏览器还可以,迫于ie的坑,在pc上感觉就可以放弃这种布局方案了,但是在移动端,从安卓2.1就开始支持(需要兼容式写法),所以在移动端,还是可以使用的,不过该加的前缀还是不能忘记的。
下边我们来看看弹性盒的一些写法
开启弹性盒
display: flex;
兼容写法(IE10下版本不支持这属性)
display:-webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
定义子元素排列(主轴方向)
flex-direction: row;
row:水平方向从左到右(默认)
row-reverse:主轴从右到左
column:主轴从上到下
column-reverse:主轴从下到上
兼容式写法
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-moz-box-orient:vertical;
-moz-box-direction:normal;
flex-direction:column;
定义子元素换行情况
flex-wrap:设置当前容器尺寸不足的情况下,项目是否换行显示。默认不可以换行显示。
nowarp:项目不换行显示(默认)
warp:项目换行显示,但是在第一行项目的下边。
warp-reverse:项目换行显示,但是在第一行项目的上边
兼容式写法
-webkit-flex-wrap:wrap;
-webkit-box-lines:multiple;
-moz-flex-wrap:wrap;
flex-wrap:wrap;
这个是上面两个属性的合写
flex-flow: row nowrap;
兼容式写法
-webkit-flex-flow:row wrap;
-webkit-box-orient:horizontal;
-webkit-box-lines:multiple;
-moz-flex-flow:row wrap;
box-orient:horizontal;
box-lines:multiple;
flex-flow:row wrap;
横向排列布局
flex-start:主轴起始位置对齐
flex-end:主轴结束位置对齐
center:主轴居中对齐
space-between:主轴方向两端对齐,项目之间存在相等的间隔
space-around:主轴方向上的项目左右两端都有间隔,因此两端的项目间隔比中间的项目间隔小一半
justify-content:space-around;
兼容式写法(IE11下版本不支持这属性,其他浏览器要加前缀)
-webkit-justify-content:center;
justify-content:center;
-moz-box-pack:center;
-webkit--moz-box-pack:center;
box-pack:center;
竖向排列布局flex-start:设置标签交叉轴的起始点对齐
flex-end:设置标签交叉轴的结束点对齐
center:设置标签交叉轴居中对齐
baseline:设置项目中第一行文本的基线对齐
stretch:设置项目的高度占满整个容器的高度(前提:项目的高度未指定)
align-items: baseline;
兼容式写法align-items:center;
-webkit-align-items:center;
box-align:center;
-moz-box-align:center;
-webkit-box-align:center;
伸缩盒子布局flex:num;
兼容式写法box-flex:num;
-webkit-box-flex:num;
-moz-box-flex:num;
flex:num;
-webkit-flex:num;
元素出现顺序order:num;兼容写法box-order:num;
-webkit-box-order:num;
-moz-box-order:num;
order:num;
-webkit-order:num;
好了,大致一些经常使用的属性就这些,其实还有一些属性,就不在这说了。
html盒子中盒子排列,css3中弹性盒排布使用方法相关推荐
- CSS3与弹性盒布局
1.弹性盒布局对齐模式 1.1.弹性盒子 在规定弹性盒子之中的子级元素换行显示之前父级元素必须是弹性盒子模型,也就是设置 display 为 flex 代码如下: <!DOCTYPE html& ...
- CSS3 Flexbox 弹性盒与 css3 阴影效果的演示
CSS3 Flexbox 演示 CSS3 Flexbox 弹性盒与 css3 阴影效果的演示 https://www.html.cn/demo/flexbox-playground/
- 前端笔记之移动端响应式(中)视口百分比布局弹性盒模型remfillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- 【转载】前端笔记之移动端响应式(中)视口百分比布局弹性盒模型remfillpage...
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- html中transition默认,CSS3中的Transition详解
W3C标准中对css3的transition这是样描述的:"css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改 ...
- CSS3 建立弹性盒布局 Flex布局
弹性盒布局模型中引入了一些新的属性,只要设置好相应属性,盒子就具有弹性,在改变浏览器窗口大小时,盒子大小也会自动发生变化.并且,盒子的大小由浏览器自动计算,使页面布局更加灵活.更加简单,可以很轻松创建 ...
- 关于 css 中的转换属性,CSS3中的transform转换属性
linux(centos)下挂载ntfs文件系统 在将硬盘插到Linux系统上,打开硬盘时一直提示:unknown filesystem type 'ntfs'.在尝试网上的方法也遇到了一些问题. 下 ...
- 学习css3的弹性盒模型
Flexbox通常能让我们更好的操作他的子元素布局,例如: 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行: 可以快速让他们布局在一列: 可以方便让他们对齐容器的左.右 ...
- (转)详解css3弹性盒模型(Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
最新文章
- 模拟儿童学习多语言,Deepmind让DL看视频就学会翻译
- arcgis api for JavaScript _跨域请求
- Python学习之路7-函数
- hihocoder 1249(2015ACM/ICPC北京)
- crossvalind函数 (交叉验证函数)
- Python notes
- Dubbo 迈出云原生重要一步 - 应用级服务发现解析
- SAP CRM Opportunity订单的文档流Document Flow的一些变体variant
- Ruby on Rails 终极部署方案 nginx+mina+puma
- c语言变量申明和定义区别,C语言中变量定义与声明的区别
- md函数MySQL_MySQL的常用SQL语句.md
- Shiro 身份验证
- 排列和组合、以及数列(五)
- mysql keepalive_mysql主从之keepalive+MySQL高可用
- 可以运行python的路由器_用python管理Cisco路由器
- 从零基础入门Tensorflow2.0 ----二、5.2实战sklearn封装keras模型(超参数搜索)
- 方法、方法的重载(Overload)与重写(Override)
- iWebShop 二次开发之商城后台模板渲染流程
- 【Linux网络配置】
- sql注入预防 [ 光影人像 东海陈光剑 的博客 ]
热门文章
- ubuntu下的eclipse 3.3初用aptana报SWT错误
- window.location.href如何多次请求_何为幂等?如何设计?
- 第十届数据技术嘉年华活动彩蛋!
- 离不开的微服务架构,脱不开的RPC细节(值得收藏)!!!
- 按图索骥:SQL中数据倾斜问题的处理思路与方法
- 斗罗大陆真3D手游实力上线,带你感受魂兽猎杀的超燃时刻
- 带你读AI论文丨用于目标检测的高斯检测框与ProbIoU
- 如何给MindSpore添加一个新的硬件后端?快速构建测试环境!
- 硬核评测:企业上云的极速存储挑战,华为云全新极速IO云硬盘性能评测
- 韩顺平php视频笔记45 循环相关语句break,continue常量