文献种类:专题技术总结文献
开发工具与关键技术: VS
作者:粟源 ;年级:20级 ;撰写时间:2021 年 5 月 27日
文献编号: 归档时间: 2021年 5 月 28 日
容器的属性
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:VS
作者:粟源
撰写时间:2021/5/27
容器的属性:
以下6个属性设置在容器上:
flex-diretion:属性决定主轴的方向(即项目的排列方向)
row;(默认,主轴为水平方向,起点在左端)
row-reverse;(主轴为水平方向,起点在右端)
-
column;(主轴为垂直方向,起点在上沿)
colum-reverse;(主轴为垂直方向,起点在下沿)
flex-wrap:如果项目在一条轴线排不下了,如何换行
默认情况下,项目都排在一条线(又称“轴线”)上。Flex-wrap属性定义,如果一条轴线排不下,如何换行。
nowrap;(默认,不换行)
warp;(换行,第一在上方)
wrap-reverse;(换行,第一行在下方)
flex-flow:是flex-direction和flex-wrap属性的简写,默认值是row nowrap
justify-content: 属性定义了项目在主轴上的对齐方式
flex-start;(默认,所有的项目左对齐)
flex-end;(所有的项目右对齐)
center;(所有的项目居中对齐)
space-between;(两端对齐,项目之间的间隔都相等)
space-around;(每个项目两侧的间隔相等。所以,项目直接的间隔比项目与边框额度间隔大一倍)
align-tiems:属性定义了项目在交叉轴上的对齐方式
flex-start;(项目在交叉的起点对齐)
flex-end;(项目在交叉轴的终点对齐)
center;(项目在交叉轴的中点对齐)
baseline;(项目的第一行文字的基线对齐)
stretch;(默认,如果项目未设置高度或设为auto,将沾满整个容器的高度)
align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
(以下弹性盒子设置了flex-wrap:wrap)
flex-start;(与交叉轴的起点对齐)
flex-end;(与交叉轴的终点对齐)
space-between;(与交叉轴两端对齐,轴线之间的间隔平均分布)
space-around;(每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍)
stretch;(轴线占满整个交叉轴。项目未设置高宽或设为auto)
这是我所学到的部分jQuery,所以我要分享给你们,希望可以帮助到你们。
以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔!