云服务器免费试用

flex布局属性有哪些

服务器知识 0 1346

Flex布局属性有以下几种:
1. flex-direction:设置主轴的方向,可以是row(水平方向,默认值)、column(垂直方向)、row-reverse(水平方向,反向排列)或column-reverse(垂直方向,反向排列)。
2. flex-wrap:设置是否换行,可以是nowrap(不换行,默认值)、wrap(换行)或wrap-reverse(换行,反向排列)。
3. flex-flow:是flex-direction和flex-wrap的简写形式,可以同时设置主轴方向和是否换行。
4. justify-content:设置主轴上的对齐方式,可以是flex-start(默认值,左对齐)、flex-end(右对齐)、center(居中对齐)、space-between(两端对齐,项目之间的间隔相等)、space-around(每个项目两侧的间隔相等,项目之间的间隔是相邻项目间隔的一半)或space-evenly(每个项目间隔相等)。
5. align-items:设置交叉轴上的对齐方式,可以是flex-start(顶部对齐)、flex-end(底部对齐)、center(居中对齐)、baseline(基线对齐,项目的第一行文字的基线对齐)或stretch(默认值,项目拉伸填满整个交叉轴)。
6. align-content:设置多根轴线的对齐方式,只有一根轴线时不起作用,可以是flex-start(顶部对齐)、flex-end(底部对齐)、center(居中对齐)、space-between(两端对齐,轴线之间的间隔相等)、space-around(每根轴线两侧的间隔相等,轴线之间的间隔是相邻轴线间隔的一半)或stretch(默认值,轴线拉伸填满整个交叉轴)。
7. order:设置项目的排列顺序,默认为0,数值越小,排列越靠前。
8. flex-grow:设置项目的放大比例,默认为0,即不放大。
9. flex-shrink:设置项目的缩小比例,默认为1,即如果空间不足,项目将缩小。
10. flex-basis:设置项目在主轴上的初始大小,默认为auto,可以是具体的长度值或百分比。
11. flex:是flex-grow、flex-shrink和flex-basis的简写形式,可以同时设置项目的放大比例、缩小比例和初始大小。
12. align-self:设置单个项目在交叉轴上的对齐方式,可以覆盖align-items属性,可以是auto(默认值,继承父元素的align-items属性)、flex-start(顶部对齐)、flex-end(底部对齐)、center(居中对齐)、baseline(基线对齐)或stretch(拉伸填满整个交叉轴)。

flex布局属性有哪些

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942@qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: flex布局属性有哪些
本文地址: https://solustack.com/50828.html

相关推荐:

网友留言:

我要评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。