css3 flex实现div内容水平垂直居中的几种方法


Posted in HTML / CSS onMarch 27, 2020

一、flex-direction: (元素排列方向)

※ flex-direction:row (横向从左到右排列==左对齐)

css3 flex实现div内容水平垂直居中的几种方法

※ flex-direction:row-reverse (与row 相反)

css3 flex实现div内容水平垂直居中的几种方法

 ※ flex-direction:column (从上往下排列==顶对齐)

css3 flex实现div内容水平垂直居中的几种方法

※ flex-direction:column-reverse (与column 相反)

css3 flex实现div内容水平垂直居中的几种方法

二、flex-wrap: (内容一行容不下的时候才有效)

※flex-wrap:nowrap (超出不换行,很奇怪里面的宽度会变成100%)

css3 flex实现div内容水平垂直居中的几种方法

※ flex-wrap:wrap (超出按父级的高度平分)

css3 flex实现div内容水平垂直居中的几种方法

※flex-wrap:wrap-reverse(与wrap 相反)

css3 flex实现div内容水平垂直居中的几种方法

三、justify-content: (水平对齐方式)

※flex-start (水平左对齐)

css3 flex实现div内容水平垂直居中的几种方法

※ justify-content:flex-end; (水平右对齐)

css3 flex实现div内容水平垂直居中的几种方法

※ justify-content:center;(水平居中对齐)

css3 flex实现div内容水平垂直居中的几种方法

※justify-content:space-between; (两端对齐)

css3 flex实现div内容水平垂直居中的几种方法

※justify-content:space-around; (两端间距对其)

css3 flex实现div内容水平垂直居中的几种方法

四、align-items: (垂直对齐方式)

※ align-items:stretch; (默认)

css3 flex实现div内容水平垂直居中的几种方法

※align-items:flex-start; (上对齐,和默认差不多)

css3 flex实现div内容水平垂直居中的几种方法

※align-items:flex-end; (下对齐)

css3 flex实现div内容水平垂直居中的几种方法

※ align-items:center;(居中对齐)

css3 flex实现div内容水平垂直居中的几种方法

=※align-items:baseline; (基线对齐)

如弹性盒子元素的行内轴与侧轴(纵轴)为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。

flex容器属性

/*1.方向*/
        /*默认方向(row正方向)*/
        /* flex-direction: row; */
        /*row反方向*/
        /* flex-direction: row-reverse; */
        /*columnz正方向*/
        /*flex-direction: column;*/
        /*columnz反方向*/
        /*flex-direction: column-reverse;*/

        /*2.换行*/
        /*flex-wrap: wrap;*/
        /*flex-wrap: wrap-reverse;*/

        /*3.direction+wrep组合*/
        /*flex-flow: row wrap-reverse;*/

        /*4.主轴对齐*/
        /*起点左对齐*/
        /*justify-content: flex-start;*/
        /*起点右对齐*/
        /*justify-content: flex-end;*/
        /*起点居中对齐*/
        /*justify-content: center;*/
        /*间隔左右分散*/
        /*justify-content: space-between;*/
        /*间隔内边距相等*/
        /*justify-content: space-around;*/
        /*间隔相等*/
        /*justify-content: space-evenly;*/
        
        /*5.交叉轴对齐 当flex-direction: row;修饰y轴, 当flex-direction: column;修饰x轴*/
        /*默认交叉轴对齐*/
        /*align-items: stretch;*/
        /*默认交叉轴居中*/
        /*align-items: center;*/
        /*默认交叉轴上对齐*/
        /*align-items: flex-start;*/
        /*默认交叉轴下对齐*/
        /*align-items: flex-end;*/
        /*默认交叉轴内容对齐*/
        /*align-items: baseline;*/

        /*6.多行交叉轴对齐*/
        /*align-content: stretch;*/
        /*多行交叉轴居中对齐*/
        /*align-content: center;*/
        /*多行交叉轴上对齐*/
        /*align-content: flex-start;*/
        /*多行交叉轴下对齐*/
        /*align-content: flex-end;*/
        /*多行交叉轴内边距相等*/
        /*align-content: space-around;*/
        /*多行交叉轴间隔左右分散*/
        /*align-content: space-between;*/
        /*多行交叉轴间隔相等*/
        /*align-content: space-evenly;*/

flex项目属性

/*1.控制项目次序*/
        /*order: 2;*/
        /*2.按比例扩大空间,数越大空间越大,0值不扩大*/
        /*flex-grow: 2;*/
        /*3.按比例缩小空间,数越大空间越小,0值不压缩*/
        /*flex-shrink: 2;*/
        /*4.需要flex-direction配合使用,row=宽 column=高,并且优先级高于width hight, auto值 让位优先级*/
        /*flex-basis: 600px;*/
        /*5.flex=grow+shrink+basis*/
        /*grow =1 && shrink = 1 && basis = auto*/
        /*flex: auto;*/
        /*grow =0 && shrink = 1 && basis = auto*/
        /*flex: initial;*/
         /*grow =0 && shrink = 0 && basis = auto*/
        /*flex: none;*/
        /*6.align-self覆盖容器的align-items*/
        /*align-self: flex-start;*/

到此这篇关于css3 flex实现div内容水平垂直居中的几种方法的文章就介绍到这了,更多相关css3div水平垂直居中内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 #HTML / CSS
css3 中translate和transition的使用方法
Mar 26 #HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 #HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 #HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 #HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 #HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 #HTML / CSS
You might like
PHP学习笔记之数组篇
2011/06/28 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
js在IE与firefox的差异集锦
2014/11/11 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
js实现表格筛选功能
2017/01/18 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
python动态参数用法实例分析
2015/05/25 Python
Python执行时间的计算方法小结
2017/03/17 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
python中退出多层循环的方法
2018/11/27 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
毕业生求职信的经典写法
2014/01/31 职场文书
中学教师教育感言
2014/02/21 职场文书
优秀教师演讲稿
2014/05/06 职场文书
经典演讲稿汇总
2014/05/19 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
个人四风问题整改措施
2014/10/24 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技