alignitems justify content
本篇文章给大家谈谈alignitems，以及justify content对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
CSS中align-items和justify-content在flex布局中的区别
在Flex布局中，align-items控制交叉轴对齐，justify-content控制主轴对齐，二者作用方向不同，需结合主轴与交叉轴的概念理解其差异。具体区别如下：
1.作用轴方向不同justify-content：控制子元素在主轴（main axis）上的对齐方式。
主轴方向默认水平（从左到右），但可通过flex-direction修改（如改为垂直方向column）。
常用场景：调整子元素在水平或垂直方向（当主轴改变时）的排列方式。
align-items：控制子元素在交叉轴（cross axis）上的对齐方式。
交叉轴方向默认垂直（从上到下），当主轴方向改变时，交叉轴方向也会随之调整（如主轴为垂直时，交叉轴变为水平）。
常用场景：调整子元素在垂直或水平方向（当主轴改变时）的对齐方式。
示例：
默认主轴水平时：justify-content控制水平对齐，align-items控制垂直对齐。
主轴改为垂直（flex-direction: column）时：justify-content控制垂直对齐，align-items控制水平对齐。
2.常用取值与效果justify-content的取值flex-start：子元素向主轴起点对齐（默认值）。center：子元素在主轴方向居中。flex-end：子元素向主轴终点对齐。space-between：子元素两端对齐，中间间距平均分布。space-around：每个子元素周围分配相等的空间。应用场景：
水平居中导航栏：.nav{ display: flex; justify-content: center;/*导航项水平居中*/}align-items的取值stretch：子元素拉伸填满容器（默认值，需子元素未设置固定高度/宽度）。flex-start：子元素向交叉轴起点对齐。center：子元素在交叉轴方向居中。flex-end：子元素向交叉轴终点对齐。baseline：子元素按基线对齐（适用于文字内容）。应用场景：
垂直居中按钮内图标与文字：.button{ display: flex; align-items: center;/*图标与文字垂直居中*/}3.联合使用实现复杂布局同时设置justify-content和align-items可实现子元素在水平和垂直方向的双重对齐，例如：
完全居中：.card{ display: flex; justify-content: center;/*水平居中*/ align-items: center;/*垂直居中*/}其他组合：水平分散排列+垂直底部对齐：.container{ justify-content: space-between; align-items: flex-end;}
4.注意事项主轴方向的影响：若通过flex-direction修改主轴方向（如column），justify-content和align-items的作用方向会互换。例如：.container{ flex-direction: column;/*主轴变为垂直*/ justify-content: center;/*此时控制垂直居中*/ align-items: center;/*此时控制水平居中*/}子元素高度差异：当子元素高度不一致时，align-items: stretch会导致所有子元素拉伸至容器高度；若需单独调整某个子元素，可使用align-self覆盖默认值。总结核心区别：justify-content→主轴对齐（水平或垂直，取决于flex-direction）。
align-items→交叉轴对齐（垂直或水平，取决于flex-direction）。
记忆口诀：“justify主轴，align交叉轴”，结合主轴方向即可快速区分二者用途。
最浅显易懂的CSS之align-items与align-content-17
最近使用flex布局时，发现flex容器上有两个很相似的属性，align-items和align-content，那到底使用哪个，他们之间的区别又是什么呢，下面我们来瞅一瞅
1.flex首先我们来回顾一下，flex容器上面都有哪些属性值，简单介绍下
flex-direction
row：默认值，主轴为水平方向，起点在最左端，使用频率比较高的
row-reverse：主轴为水平方向，起点在最右端
column：主轴为垂直方向，起点为最上端，使用频率比较高的
column-reveres：主轴为垂直方向，起点在最下方
属性决定主轴的方向（即项目的排列方向），有四个可选值
flex-wrap
nowarp：默认，不换行
warp：换行第一行在最上面
warp-reverse：换行第一行在最下方
如果一条主轴线上面如果一行放不下，该如何换行，有三个可选值
flex-flow
是flex-direction和flex-warp的简写属性，默认值rownowarp
justify-content
flex-start：默认值，左对齐
flex-end：右对齐
center：居中，使用频率比较高的
space-between：两端对齐，项目中间的间隙相等
space-around：项目中间的间隙，是左右两边间隙的一倍大小
决定项目主轴方向的对齐方式
align-items
决定项目在交叉轴的对齐方式
align-content
决定了多个轴线的对齐方式，如只有一条轴线，该属性没有效果（如容器flex-warp为warp，单轴线也会起作用）
2.align-items决定项目在交叉轴上的对齐方式，可选值有五个
stretch：默认值，项目没有设置高度，元素被拉伸以占满整个容器的高度
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐，使用频率比较高的
baseline:项目的第一行文字的基线对齐
3.align-content决定了多个轴线的对齐方式，如只有一条轴线，该属性没有效果，但是容器flex-warp属性设置为warp，单轴线align-content也会有效果，可选值有六个
stretch：默认值，项目没有设置高度，元素被拉伸以占满整个容器的高度
flex-start：交叉轴的起点对齐，位于元素的开头
flex-end：交叉轴的终点对齐，位于元素的结尾
center：交叉轴的中点对齐，使用频率比较高的
space-between：在交叉轴的两端，中间间隙相等
space-around：每个轴线两侧的间隔都相等
原文：
CSS flex布局
flex布局是一种无论对于块级元素还是行内元素都可以被采用的布局，且它使用起来也是十分的方便
首先是要指定flex布局
当我们指定flex布局方式的时候，其属性值 float、clear、vertical-align就失效了
无论是块级元素还是行内元素，当他们指定使用flex布局的时候，就被称为“容器”（flex container）
他们的子元素自动成为容器成员，被称为“项目”（flex item）。
flex布局是通过两根轴决定的，其实现方式其实和直角坐标系很像，都是通过轴来进行定位
每个容器都有两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴开始位置为main start，结束位置为main end。交叉轴的开始位置为cross start，结束位置为cross end
容器内的项目都是沿着主轴排列的，这点和块级元素有较大的不同，因为每个块级元素默认是占有一整行的，且排列方式为由上到下排列。
每个项目都占有一定的主轴空间和交叉轴空间，分别被称为main size和cross size
flex布局下，容器和项目都有其各自的属性
决定主轴的方向，即决定项目的排列方向，其属性值有
决定了当一行放不下所有的项目时，其换行与否以及换行方式
定义了项目在主轴上的对齐方式，假设主轴是从左向右的水平排列
定义了项目在交叉轴上的对齐方式，假设交叉轴是从上到下排列
在这里重点说一下上面这两个属性。
这样可以很方便的设置水平垂直居中
另外说一下align-items：baseline这个属性值。如描述，这个属性值是通过文字来进行对齐，而不是每个项目的边界或是中心
在容器内具有多根主轴线时，可以定义这些轴线的对齐方式
align-content属性和justify-content属性，这两者的属性值有较大的相似之处，这是因为，justify-content属性定义的是多个项目在主轴上的对齐方式，而align-content属性定义的是多根主轴在交叉轴上的对齐方式，这两者描述的对象就几乎一致
定义了多个项目的排列顺序，其使用方式和z-index属性值有异曲同工之处，都是指定属性值，属性值为整数。对于order属性，属性值越小，则排列越靠前；对于z-index属性，则属性值越小，就越在底层
设置了项目的放大比例，其默认值为1。
设置了项目的缩小比例，默认值为1。
在分配多余空间之前，为项目定义其占据的主轴空间
用来设置单个项目与其他项目不同的对齐方式，其属性值和align-items的属性的属性值基本一致，不过其默认值为auto，表示继承父元素的属性值。
OK，关于alignitems和justify content的内容到此结束了，希望对大家有所帮助。