首页 > 其他分享 >justify-content与align-items解析

justify-content与align-items解析

时间:2023-02-13 21:45:02浏览次数:35  
标签:flex container items align content item 排布

justify-content
justify-content是flex布局中的一个属性,用来调整container中的items布局

flex-start (default): 每个item从起点开始依次排布
flex-end: 每个item从尾部开始依次向起点排布
center: items沿中心排布
space-between: items从左到右依次排布,第一个item在起点,最后一个item在终点
space-around: items从左到右间隔相同距离排布
space-evenly: items从左到右任意连个相邻item的距离与第一个item距起点的距离以及最后一个item距终点的距离都相等
从上到下效果如图:


align-items
align-item与justify-content相似,也具有多个属性值

flex-start: 每个item上边缘沿着container的上边缘线分布
flex-end: 每个item下边缘沿着container的下边缘线分布
center: 每个item沿着container的水平中心线分布
baseline: 每个item沿着它们的基准线分布
stretch (default): 每个item延长自己至与container等高分布
从上到下效果如图


注意当flex-direction: colum时,注意方向的变化
————————————————
原文链接:https://blog.csdn.net/include_IT_dog/article/details/100065515

 

标签:flex,container,items,align,content,item,排布
From: https://www.cnblogs.com/im18620660608/p/17117913.html

相关文章