Flex主轴与交叉轴

news/2024/10/30 23:18:09/

Flex中提出了一个重要的概念——轴
它两个轴:主轴交叉轴
默认情况下主轴是水平的:
在这里插入图片描述
下面我们用Flex布局的方式实现三个小盒子的水平垂直居中:

	<style>.box{width: 200px;height: 200px;border: 1px solid;}div{width: 50px;height: 50px;border: 1px solid;}</style><div class="box"><div>1</div><div>2</div><div>3</div></div>

在这里插入图片描述
我们在父级div中加上主轴和交叉轴居中:

	display: flex;justify-content: center; //主轴居中align-items: center; //交叉轴居中

呈现出来的效果是这样的:
在这里插入图片描述
和我们预计的效果不太一样,两轴居中,div并非像初始那样竖向排列,反而是横向的,这是为什么呢?
因为当我们选择使用Flex布局时,Flex容器的默认主轴已经决定了Flex项目的排列方式是水平的
所以我们只需要通过改变主轴的方向来改变他的排列方式就可以了

flex-direction: column; //主轴为垂直方向,起点在上沿

之后就达到了我们想要的效果了:
在这里插入图片描述
PS:我们将主轴改成了垂直方向,所以
justify-content: center; 控制的是垂直方向的居中
align-items: center; 控制的是水平方向的居中

实际上在Flex中,主轴和交叉轴跟我们在平面中的xy轴非常相似,那为什么要引入这么一个看似很复杂的概念呢 ?
如果用xy的概念,justify和align等众多属性描述起来将会变得异常复杂

justify-content: flex-start|flex-end|center|space-between|space-around;

flex-start :默认值 项目位于容器的开头
flex-end :项目位于容器的结尾
center :项目位于容器的中心
space-between :项目位于各行之间留有空白的容器内
space-around :项目位于各行之前,之间,之后都留有空白的容器内

align-items: stretch|center|flex-start|flex-end|baseline;

在这里插入图片描述


http://www.ppmy.cn/news/271507.html

相关文章

python中xticks函数中rotation_在python matplotlib中旋转轴文本

我无法弄清楚如何旋转X轴上的文本。它是一个时间戳&#xff0c;随着样本数量的增加&#xff0c;它们越来越近&#xff0c;直到它们重叠。我想将文本旋转90度&#xff0c;以便样本靠近在一起&#xff0c;它们不重叠。 下面是我的&#xff0c;它工作得很好&#xff0c;除了我无法…

Mujoco中旋转轴的定义

两种定义方式 1 <body name"arm_low_l" pos"-.06 0 -.016" quat"0 0 0.707107 0.707107"><joint name"l_elbow" range"-1.3 1.57" type"hinge"/><geom type"cylinder" size"0.00…

惠普暗夜精灵2怎么打开后盖_做工散热都非常优秀 惠普暗影精灵II笔记本拆机图解全过程...

由于惠普暗影精灵II笔记本同样拥有惠普暗影精灵一代笔记本的OMEN元素,从而得到需要惠普笔记本粉丝的关注,近日,有网友问小编:惠普暗影精灵II代笔记本怎么样?散热及性能方面如何?值得购买吗?对此,下面脚本之家小编就为大家图文解答惠普暗影精灵II笔记本拆机步骤,有兴趣…

计算机固态硬盘作用,笔记本固态硬盘有哪些作用 笔记本固态硬盘有什么用?...

如果现在您去购买电脑会发现很多笔记本是会带有固态硬盘的&#xff0c;及时很多人购买的时候需要性能高的也会给主机加上固态硬盘&#xff0c;为什么很多人喜欢加上固态硬盘呢?笔记本固态硬盘到底有什么用呢?我们一起来了解一下。 首先我们要知道固态硬盘其实就是一种硬盘&am…

matplotlib设置x轴和y轴 设置

1.x轴&#xff0c;y轴命令如下 plt.xlabel(年份) plt.ylabel(万元) 通过设置label&#xff0c; 可以清楚的让用户知道x轴上的刻度代表什么&#xff0c;是什么单位。 如果不对x,y轴的刻度进行设置&#xff0c;matplotlib默认根据plot传入的数组设置x,y轴的刻度&#xff0c;这…

我是真的很爱你——XPS15转轴更换作业记录

好久不见&#xff0c;近日沉迷各类游戏&#xff0c;许久没有更新CSDN了。 照着教程更换电脑零件本来不算是一件牛逼到可以花时间写文发CSDN的事情&#xff0c;但是这次真的没在网上找到详细的转轴和转轴盖的更换教程&#xff0c;大多数的文章都是教你怎么卸下后盖清清灰什么的…

css3旋转轴心

CSS: <style> * {padding:0;margin:0; } .pkbox {width:155px;height:219px;position:relative;margin:300px auto; } .pkbox > img {width:100%;height:100%;position:absolute;left:0;top:0;/*添加过渡*/transition:transform 2s;/*设置旋转轴心*/transform-origin:…

照猫画虎,分分钟学会的Matplotlib技巧:反转轴、绘制双轴和定制刻度

文章目录 1 反转坐标轴2 绘制双轴3 设置坐标轴范围4 设置主副刻度5 设置刻度显示密度6 设置刻度文本样式7 设置刻度文本内容 作为Python生态中应用最广泛的绘图库&#xff0c;Matplotlib用起来非常简单&#xff0c;也很容易上手。不过有些细节想要做得尽善尽美&#xff0c;就需…