300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > css flex 文字右对齐 css flex align-items属性 交叉轴上对齐方式垂直对齐方式

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

时间:2021-01-08 16:51:51

相关推荐

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例子

例子

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。