CSS-弹性盒子-主轴侧轴对齐方式

骑猪西征

2024-05-09 帮助1人

除了主轴和侧轴之外的弹性盒子相关元素以后再发文补齐，本章是了解主侧轴的概念为主

一、基本概念

在开始之前，我们需要了解 Flex 和 主轴以及交叉轴（侧轴） 别分是什么：

1.首先是Flex:

Flex是Flexible Box的缩写，意味“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。

弹性盒子是一种新的布局方式，特别适合移动端的布局。注：弹性盒子布局-display:flex;

采用Flex布局的元素，称为Flex容器(flex container),简称“容器”。它所有的子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。

需要注意的是：设为Flex布局以后，子元素的float、clear、和vertical-align属性将失效。

学新通

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

2.主轴-mian axis 水平的主轴 主轴的开始位置（与边框的交叉点）叫做main start,它的结束位置叫做main end；

交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。

单个项目的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

二、容器的属性

以下6个属性设置在容器上。

2-1.flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box{
flex-direction: row |row-reverse |column | column-reverse ;
/*
flex-direction属性决定主轴的方向（即项目排列的方向/子盒子的排列方向）
它有四个值：
1.row（默认值）:主轴在水平方向，起点在左端。
2.row-reverse:主轴为水平方向，起点在右端
3.column：主轴为垂直方向，起点在上沿。
4.column-reverse：主轴为垂直方向，起点在下沿。
*/
}

学新通

display:flex；（作用：告诉浏览器你要引用弹性布局了，不写【弹性盒子布局】代码将无法生效）

2-1-1.row（默认值）:主轴在水平方向，起点在左端。

flex-direction: row ;

学新通

2-1-2.row-reverse:主轴为水平方向，起点在右端

flex-direction: row-reverse ;

学新通

2-1-3.column：主轴为垂直方向，起点在上沿。

flex-direction:column;

学新通

2-1-4.column-reverse：主轴为垂直方向，起点在下沿。

flex-direction:column-reverse;

学新通

2-2.flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

它可能取三个值。

2-2-1.flex-wrap：nowrap；(默认)：不换行。（默认值，多出来的项目会挤压原本项目所占的空间）

学新通

2-2-2.flex-wrap:wrap;（换行，第一行在上方）

学新通

2-2-3.flex-wrap：wrap-reverse;(换行，第一行在下方)

学新通

想要让项目紧贴在一起，可以用align-content: flex-start;（控制折行后的行间距,需要注意的一点是，该标签是随着主轴侧轴的改变而改变的）

学新通

2-2-3-1.align-content: flex-start | flex-end | center | space-around |space-between;

2-2-3-1-1.flex-start;

学新通

2-2-3-1-1.flex-end;

学新通

2-2-3-1-1.center

学新通

2-2-3-1-1.space-around;

学新通

2-2-3-1-1.space-between;

学新通

2-3.flex-flow

2-4.justify-content

2-4-1.justify-content: flex-start;(默认值，左对齐，调整主轴对齐的方向)

学新通

2-4-2.justify-content: flex-end;（右对齐，调整主轴对齐的方向）

学新通

2-4-3.justify-content: flex-end;（居中，调整主轴对齐的方向）

学新通

2-4-4. justify-content: space-between;（两端对齐，紧紧贴在左右两端，项目直接的距离都相等）

学新通

2-4-5.justify-content: space-around; （距离环绕，左右两端，1的左端和5的右端是其余部分的一半；每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。）

学新通

2-4-5-1.justify-content: space-around; （距离环绕，左右两端，在只有两个项目的情况下，也是一样的，左右两端距离是中间的一半；每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。）

2-4-6.【补充】justify-content: center; (水平/横向居中) 取自W3school

学新通

2-4-6.【补充】align-items: center; (垂直/纵向居中) 取自W3school

学新通

2-5.align-items（调整侧轴 / 交叉轴位置；该属性定义交叉轴上如何对齐）

2-5-1.align-items：flex-start;(默认值，交叉轴的起点对齐)

全图对照： 学新通

学新通

2-5-2.align-items：flex-end;（交叉轴的终点对齐）

学新通

2-5-3.align-items: center; （居中，与交叉轴/侧轴的中点对齐）

学新通

2-5-4.align-items: baseline; （项目的第一行文字的基线对齐）

学新通

学新通 2-5-5.align-items: stretch;(默认值，如果项目未设置高度或设为auto，将占满整个容器的高度)

学新通

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 600px;
height: 600px;
background-color: aqua;
border: 1px solid rgb(0, 0, 0);
margin:100px auto;
display: flex;
/* 告诉浏览器你要引用弹性布局了 */
flex-direction:row;
/* 改变主轴方向 */
justify-content: row;
/* 改变布局 */
align-items: stretch;
/* 调整侧轴/交叉轴 */
}
.box div{
width: 60px;
/* height: 60px; */
/* background-color: yellowgreen; */
border: 1px dashed indianred
/*
flex-direction属性决定主轴的方向（即项目排列的方向/子盒子的排列方向）
它有四个值：
1.row（默认值）:主轴在水平方向，起点在左端。
2.row-reverse:主轴为水平方向，起点在右端
3.column：主轴为垂直方向，起点在上沿。
4.column-reverse：主轴为垂直方向，起点在下沿。
*/
}
.box1{
background-color: rgb(56, 61, 4);
}
.box2{
background-color: rgb(165, 22, 81);
}
.box3{
background-color: rgb(127, 172, 23);
}
.box4{
background-color: rgb(146, 32, 137);
}
.box5{
background-color: rgb(234, 250, 6);
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1111</div>
<div class="box2">2222</div>
<div class="box3">3333</div>
<div class="box4">4444</div>
<div class="box5">5555</div>
</div>
</body>
</html>

2-6.align-content

这篇好文章是转载于：学新通技术网

CSS-弹性盒子-主轴侧轴对齐方式

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开