常用的flex布局样式

最新推荐文章于 2024-05-27 15:28:58 发布

TurtleOrange

最新推荐文章于 2024-05-27 15:28:58 发布

阅读量624

点赞数

分类专栏：前端文章标签： flex css

本文链接：https://blog.csdn.net/turtleorange/article/details/119322492

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

常用的flex布局样式

来源：
1.flex布局兼容性写法
 2.Flex 布局教程：语法篇

记录下，方便我日常开发粘贴复制使用

// 兼容大部分不同版本、不同类型浏览器
.flex {
	display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
	display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
	display: -moz-box; /* Firefox 17- */  
	display: -moz-flex; /* Firefox 18+ */  
	display: -ms-flexbox; /* IE 10 */  
	display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */  
}


// flex容器中的flex项目垂直居中
.mainCrossCenter {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}


// flex容器中flex项目在主轴上对齐方式
.flex-start {
	justify-content: flex-start;
}
.flex-end {
	justify-content: flex-end;
}
.flex-center {
	justify-content: center;
}
.flex-between {
	justify-content: space-between;
}
.flex-around {
	justify-content: space-around;
}


// flex容器中flex项目在交叉轴上对齐方式
.flex-align {
	align-items: flex-start | flex-end | center | baseline | stretch;
}