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 相关文章推荐
CSS3属性box-shadow使用详细教程
Jan 21 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
background-position百分比原理详解
May 08 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中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
幼师自荐信
2013/10/26 职场文书
机电一体化大学生求职信
2013/11/08 职场文书
晚会主持词开场白
2014/03/17 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
学校个人对照检查材料
2014/08/26 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
给老婆道歉的话
2015/01/20 职场文书
课外活动总结
2015/02/04 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers