align-items

版本：CSS3

CSS align-items属性将所有直接子节点上的align-self值设置为一个组。align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。

目前，Flexbox 和 CSS 网格布局支持此属性。在 Flexbox 中，它控制十字轴上项目的对齐方式，在网格布局中，它控制块轴上项目的对齐方式。

示例

/* basic keywords */
align-items: normal;
align-items: stretch;

/* positional alignment */
align-items: center; /* pack items around the center */
align-items: start; /* pack items from the start */
align-items: end; /* pack items from the end */
align-items: flex-start; /* pack flex items from the start */
align-items: flex-end; /* pack flex items from the end */
align-items: self-start;
align-items: self-end;

/* baseline alignment */ 
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;

/* global values */
align-items: inherit;
align-items: initial;
align-items: unset;

浏览器支持

语法

=[ first | last ]? baseline
= unsafe | safe
= center | start | end | self-start | self-end | flex-start | flex-end

取值

• stretch：默认值。弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
• normal这个关键字的效果取决于我们处在什么布局模式中：
  • 在绝对定位的布局中，对于被替代的绝对定位盒子，这个效果和start?的效果的一样；对于其他所有绝对定位的盒子，这个效果和stretch的效果一样。
  • 在绝对定位布局的静态位置上，效果和stretch一样。
  • 对于那些弹性项目而言，效果和stretch一样。
  • 对于那些网格项目而言，效果和stretch一样，除了有部分比例或者一个固定大小的盒子的效果像start。
  • 这个属性不适用于会计盒子和表格。
• flex-start：元素向交叉轴起点对齐。
• flex-end：元素向交叉轴终点对齐。
• start：在主轴线上，元素与容器的起始边缘对齐。
• end：在主轴线上，元素与容器的底部边缘对齐。
• center：元素在交叉轴居中。如果元素在交叉轴上的高度高于其容器，那么在两个方向上溢出距离相同。
• left：元素与校准容器的左侧边缘对齐。如果属性的轴与内联轴不平行，则该值的行为类似于start。
• right：在适当的轴线上，元素校准容器的右边缘对齐。如果属性的轴与内联轴不平行，则该值的行为类似于start。
• self-start：The items is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
• self-end：The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
• baseline、first baseline、last baseline：所有元素向基线对齐。交叉轴起点到元素基线距离最大的元素将会于交叉轴起点对齐以确定基线。
• safe：Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode werestart.
• unsafe：Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.

align-items取值

stretch ：默认值。元素被拉伸以适应容器。

.main{
   display:flex;		
   align-items:stretch;
}

效果图：

center：元素位于容器的中心

弹性盒子元素在该行的纵轴上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

.main{
   display:flex;		
   align-items:center;
}

效果图：

flex-start ：元素位于容器的开头

弹性盒子元素的纵轴起始位置的边界紧靠住该行的交叉轴起始边界。

.main{
   display:flex;		
   align-items:flex-start;
}

效果图：

flex-end：元素位于容器的结尾

弹性盒子元素的纵轴起始位置的边界紧靠住该行的交叉轴结束边界。

.main{
   display:flex;		
   align-items:flex-end;
}

效果图：

baseline：元素位于容器的基线上

如弹性盒子元素的行内轴与交叉轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

.main{
   display:flex;		
   align-items:baseline;
}

效果图：

align-items 和 align-content

• align-content属性只适用于多行的 flex 容器，并且当交叉轴上有剩余空间，使 flex 容器内的flex 线对齐。例如：align-items:cemter，是将 flex 子元素作为一个整体，在 flex 容器内居中。
• align-items属性适用于所有的 flex 容器，它是用来设置每个 flex 元素，在交叉轴上的对齐方式。例如：align-items:cemter，用来让每一个单行的元素居中，而不是让让所有子元素作为整体，在容器居中。

 
1
 
2
 
3
 
4
 
5
 
6
.flex div {
   width: 100px;
   margin: 5px;
}
.item1 {
   background-color: #ffb685;
   height: 130px;
}
.item2 {
   background-color: #fff7b1;
   height: 50px;
   width: 120px;
}
.item3 {
   background-color: #b1ffc8;
   height: 100px;
}
.item4 {
   background-color: #b1ccff;
   height: 60px;
}
.item5 {
   background-color: #c8b1ff;
   height: 40px;
}
.item6 {
   background-color: #ffb1e5;
   height: 80px;
} 

.flex {
   height: 500px;
   display: flex;
   flex-wrap: wrap; align-content: center;
} 

.flex {
   height: 500px;
   display: flex;
   flex-wrap: wrap; align-items: center;
} 

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com