html5 flex布局纵向,html最新的flex布局
每当我们去进行前端页面布局时都会用到float、position、margin等一些属性,这些属性用起来略显麻烦,并且浏览器去进行渲染时会大大消耗性能
所以今天我们来谈谈最新的 flex布局,也叫弹性布局!
需要注意的是任何容器都可以指定为flex布局,但是在flex布局中float、clear、vertical-align都会失效。
主轴方向
flex容器分为x轴与y轴,x轴正方向默认从左至右,y轴正方向默认从上到下。
定义一个容器为弹性布局display:flex;主轴默认方向为左到右;
如果我们想去改变flex的默认方向,就需要用到flex-direction属性
flex-direction有四个属性值,分别是row、row-reverse、column、column-reverse,分别为从左到右、从右到左、从上到下、从下到上!
主轴方向的对齐方式
justify-content:flex-start则主轴为左对齐
justify-content:flex-end 则主轴为右对齐
justify-content:center 则主轴为居中
justify-content:space-between则每个子项目之间等距离,前提是有剩余空间
justify-content:space-around则每个子项目会平分剩余空间,子项目与父元素边界处也会存在距离
纵向单行对齐方式!
align-item:flex-start纵向从上到下
align-item:flex-end纵向从下到上
align-item:center纵向居中对齐
align-item:baseline以基线对齐
align-item:strech这是默认方式
子项目换行
flex-wrap:wrap超出父元素会换行
flex-wrap:wrap-reverse反向换行
flex-wrap:no wrap这是默认方式,不换行
纵向多行对齐方式!
align-content:flex-start上对齐
align-content:flex-end下对齐
align-content:center上下居中
align-content:space-between
align-content:space-around
以上均是添加到父元素身上的属性
子项目的一些属性
order:0,定义子项目的排序位置,数值越小越靠前,默认为0
flex-grow:0;定义子项目的放大比例,默认为0不放大
flex-shrink:1;定义子项目的缩小比例,默认为1,空间不足将等比缩小,0则不缩小,负值无效
flex-basis:1;定义子项目占据空间,默认为auto,可以设置百分比,也可以是固定值
以上三种属性可以简写,比如flex:1,1,1顺序如上
如有错误,欢迎大家指正,一起努力吧!
内容来源于网络如有侵权请私信删除
html5 flex布局纵向,html最新的flex布局相关推荐
- 响应式布局:CSS3弹性盒flex布局模型
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و 页面布局一直都是web应用样式设计的重点 我们传统的布局方式都是基于盒模型的 利用display.position.float来 ...
- 移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
- html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
- flex布局一行三个_CSS Flex布局
Flex之前 在flex布局出现以前,css布局大致就以下几种布局: 主要使用: normal flow 正常流.文档流 float + clearfix position: relative + p ...
- flex将元素放在最后_前端布局——Flex弹性布局
本篇解释了有关flexbox的知识点内容,重点介绍父元素(flex容器)和子元素(flex元素)的不同及可能的属性. 背景 Flexbox Layout弹性布局模块的目的在于提供一种更有效的方式来布置 ...
- css布局笔记(二)Flex
flex Flex是"Flexible Box"的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可指定为Flex布局. .box{di ...
- java窗口三栏布局_移动端的flex三栏布局的相关知识介绍(代码示例)
本篇文章给大家带来的内容是关于移动端的flex三栏布局的相关知识介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 默认情况下先显示移动端,通过 @media 属性适配屏 ...
- flex布局 flex_时髦的Flickr Flex小部件
flex布局 flex A web widget, or badge, is a small, embeddable element that you can add to your site tha ...
- CSS网页布局之传统解决方案与Flex大法
网页布局主要包括全屏布局,水平居中,垂直居中和sticky Footer布局.本文针对网页布局的实现,利用传统的解决方案(display + position + float + table)与Fle ...
最新文章
- linux执行class文件_「大数据干货」Windows系统和Linux系统中打jar包与导入语句剖析...
- Django-form组件
- 把一个中文日期时间格式字符串转为日期时间
- pat1079+1086+1090+1094(树的遍历)感想
- php json csv,比JSON更简单,随便记数据的CSV介绍,以及PHP解析方法-csv文件怎么打开...
- 看苏宁易购的运营保障体系如何hold住818大促
- Hadoop入门(十九)Mapreduce的最大值程序
- java 线程安全性_我如何测试Java类的线程安全性
- ad20中怎么多选操作改层_AD20中19个常用系统快捷键小节
- 帮你免于失业的十大技术
- 数据挖掘之apriori算法(python实现详细注释)
- 视频教程-华为HCIA网络基础-网络技术
- 标准正态分布怎么算_标准正态分布函数的快速计算方法
- php theexcerpt,the_excerpt()函数
- CSS如何实现垂直水平居中**********?
- EDR端点检测与响应
- QT EXCEL 删除整行
- Form通过js提交
- A brief introduction to complex analysis
- 拿到大厂前端offer的前端开发是怎么回答面试题的
热门文章
- Debian侵犯Rust商标,妥协改名还是会得到豁免?
- Java 定义一个人类Person
- C++代码重用(一)
- html 匿名函数,一家之言:谈谈JavaScript匿名函数
- 西南科技大学数据库实验二(Oracle 11g)
- 西南科技大学Linux实验名称:实验三 Linux环境安全管理
- JAVA开发工程师是什么意思?
- 数据库——mysql和sqlyog
- mysql 事务隔离界别_mysql/mariadb知识点总结(21):事务隔离级别 (事务总结之三)...
- 计算机集成制造系统 刊物界别,基于多传感器的高速CNC机床集成监控系统设计.pdf...