css flex 文字右对齐,css flex align-items属性 交叉轴上对齐方式垂直对齐方式

css flex align-items属性 交叉轴上对齐方式垂直对齐方式

css flex align-items属性子元素在交叉轴上对齐方式，如果不好理解，可以把flex-direction设置为row，理解成垂直对齐方式即可,注意我们演示的例子每个子元素的高度不一样，和align-content的区别请点击左边align-content属性菜单查看。

align-items属性

可选值说明

flex-start交叉轴的起点对齐，理解成顶部对齐(假设每个子元素的高度不一样)

flex-end交叉轴的终点对齐，理解成底部对齐(假设每个子元素的高度不一样)

center交叉轴的中点对齐，理解成功水平方向居中对齐

baseline项目的第一行文字的基线对齐

stretch默认值，如子元素未设置高度或设为auto，将占满整个父元素的高度。

flex-start例子

.boxs

{

width:80%;

height:100px;

border:1px solid #333;

display:flex;

align-items:flex-start;

}

.boxs div

{

width:20%;

}

子元素A

子元素B

子元素C

子元素D

例子

flex-end例子

例子

center例子

例子

baseline例子

例子

stretch例子

例子