容器的属性

文献种类：专题技术总结文献

开发工具与关键技术：  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，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！