flex布局知识小笔记

最新推荐文章于 2024-09-14 08:09:14 发布

二段飞踢

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量140

点赞数

分类专栏： CSS重点文章标签： css

本文链接：https://blog.csdn.net/gygygydgh/article/details/104113538

版权

CSS重点专栏收录该内容

9 篇文章 0 订阅

订阅专栏

flex布局

优点：

解决了，垂直居中问题；
不受空白节点的影响（共行的问题）
不会脱离文档流（方便x,y居中，两端对齐的问题）

特性:

弹性盒子，只对父子关系有效，后代不会继承
display:flex; 块级弹性盒子
display:inline-flex; 行内块级弹性盒子
相关面试题：弹性盒子如何实现水平居中，垂直居中

弹性盒子-弹性计算问题：

放大 flew-grow:1/2/3
缩小 flew-shrink:0/1/2
如果要使其中一个不缩或不大，额外设置其为0

改变项目排列顺序：

order:-1/-2/-3
数值越小，越靠右(整数)
数值越大，越靠左(负数)

相关设置：

.flex{
				width: 600px;
				height: 300px;
				display: flex;
				/* 垂直居中 */
				align-items: center;
				/* 水平居中 */
				justify-content: center;
				/* 两端对齐 */
				/* justify-content: space-between; */
				justify-content: space-around;
				/* justify-content:flex-start 左对齐 */
				/* justify-content:flex-end 右对齐 */
				/* 垂直排列 */
				/* flex-direction: column; */
				/* 弹性盒子允许换行 */
				/* flex-wrap: wrap; */
				border: 1px solid black;
			}