弹性布局（display:flex;）属性详解
2023-06-29 09:08
HTML5
143
0
0
0
标题录入
封面图
1. flex-direction：决定主轴的方向（即项目的排列方向），row（默认值）：主轴为水平方向，起点在左端；row-reverse：主轴为水平方向，起点在右端；column：主轴为垂直方向，起点在上沿；column-reverse：主轴为垂直方向，起点在下沿。 2. flex-wrap：定义如何换行，默认值是nowrap，不换行；wrap换行，第一行在上方；wrap-reverse换行，第一行在下方。 3. flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 4. justify-content：定义项目在主轴上的对齐方式，可选值有flex-start、flex-end、center、space-between、space-around。 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：定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据这个属性，计算主轴是否有多余空间。其默认值为auto，即项目的本来大小。 11. align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
上一篇：
什么是 HTML5？
下一篇：
H5怎么调起数字键盘？手写移动端键盘代码
标题录入，一次不能超过6条
墨菲定律
T:0.004525s,M:236.77 KB
返回顶部
留言
留言
评论