最浅显易懂的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：每个轴线两侧的间隔都相等

原文：https://juejin.cn/post/7101682069368995871

热门标签