前端开发中或使用Bootstrap时,主轴、交叉轴(侧轴)的概念是什么？【使用类flex-column改变主轴方向为垂直方向】

昊虹AI笔记

已于 2024-01-04 13:23:59 修改

阅读量658

点赞数 1

分类专栏： Bootstrap Web开发文章标签： bootstrap 前端 html

于 2023-09-27 16:58:12 首次发布

本文链接：https://blog.csdn.net/wenhao_ir/article/details/133357422

版权

Bootstrap 同时被 2 个专栏收录

50 篇文章 4 订阅

订阅专栏

Web开发

49 篇文章 1 订阅

订阅专栏

主轴和交叉轴(侧轴)：
- 主轴（Main Axis）：主轴是Flex容器的主要方向，通常是元素的排列方向。在Flex布局中，主轴可以是水平方向或垂直方向。Flex容器中的子元素按照主轴排列。
- 交叉轴(侧轴)（Cross Axis）：交叉轴(侧轴)是与主轴垂直的轴。如果主轴是水平方向，那么交叉轴(侧轴)就是垂直方向，反之亦然。子元素在交叉轴(侧轴)上对齐。
交叉轴(侧轴)上的对齐：
- 子元素可以在交叉轴(侧轴)上进行对齐，这决定了它们在交叉轴(侧轴)上的位置。
- 常见的交叉轴(侧轴)对齐选项包括：
  - start：子元素与交叉轴(侧轴)的起始位置对齐。
  - center：子元素在交叉轴(侧轴)上居中对齐。
  - end：子元素与交叉轴(侧轴)的结束位置对齐。
  - stretch：子元素在交叉轴(侧轴)上被拉伸以填充可用空间。
交叉轴(侧轴)的方向：
- 交叉轴(侧轴)的方向取决于主轴的方向。如果主轴是水平的，那么交叉轴(侧轴)就是垂直的，反之亦然。
控制交叉轴(侧轴)：
- 您可以使用CSS属性来控制交叉轴(侧轴)的行为。例如，在Flexbox中，可以使用align-items属性来设置子元素在交叉轴(侧轴)上的默认对齐方式，使用align-self属性来单独为子元素设置对齐方式。
- 在Grid布局中，可以使用align-items和align-self属性来实现类似的效果。

理解主轴和交叉轴(侧轴)的概念有助于您更好地控制和布局网页元素，特别是在使用Flexbox和Grid等CSS布局技术时。这些概念有助于确保页面的可视化效果按照您的预期进行排列和对齐。

对于Bootstrap的弹性盒子，可以利用类flex-column改变主轴为垂直方向，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用类flex-column改变主轴方向为垂直方向</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
</head>
<body class="container">
<h3  align="center">使用类flex-column改变主轴方向为垂直方向</h3>
<h5>改变主轴方向为垂直方向后各元素居中排列:</h4>
<h5>&nbsp&nbsp&nbsp&nbsp使用类justify-content-center实现弹性盒子中的各元素居中排列</h4>
<div style="height: 200px;">
	<div class="d-flex flex-column justify-content-center h-100 p-3 bg-warning text-white" >
		<div class="bg-primary">家用电器</div>
		<div class="bg-success">办公电脑</div>
		<div class="bg-danger">男装女装</div>
	</div>
</div>
<br/>
<h4>改变主轴方向为垂直方向后各元素均分垂直方向上的空间:</h4>
<h5>&nbsp&nbsp&nbsp&nbsp使用类flex-fill实现弹性盒子中的各元素均分弹性盒子在垂直方向上的空间</h4>
<div style="height: 200px;">
	<div class="d-flex flex-column h-100 p-3 bg-warning text-white" >
		<div class="flex-fill bg-primary">家用电器</div>
		<div class="flex-fill bg-success">办公电脑</div>
		<div class="flex-fill bg-danger">男装女装</div>
	</div>
</div>
</body>
</html>