博客列表 >Flex术语 属性总结

Flex术语 属性总结

不忘初心
不忘初心原创
2021年07月20日 10:32:14689浏览

轴线:主轴、交叉轴
方向:起始线、终止线
容器:
flex容器:display:flex
flex项目:直系子元素
剩余空间:flex元素对齐前提

容器属性:
一、flex-direction:决定主轴的方向,即项目排列的方向。
row:主轴为水平方向,项目沿主轴从左至右排列
column:主轴为竖直方向,项目沿主轴从上至下排列
row-reverse:主轴水平,项目从右至左排列,与row反向
column-reverse:主轴竖直,项目从下至上排列,与column反向
二、flex-wrap:换行
nowrap:自动缩小项目,不换行
wrap:换行,且第一行在上方
wrap-reverse:换行,第一行在下面
三、flex-flow:简写:默认值为row nowrap,即横向排列,不换行。
四、justify-content:决定在主轴上的对齐方式。
flex-start:左对齐
flex-end:右对齐
center:居中对齐
space- between:两端对齐
space-around:沿轴线均匀分布
五、align-items:决定了item在交叉轴上的对齐方式。
flex-start:顶端对齐
flex-end:底部对齐
center:竖直方向上居中对齐
baseline:item第一行文字的底部对齐
stretch:当item未设置高度时,item将和容器等高对齐

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议