首页 > 其他分享 >css3的flex布局使用

css3的flex布局使用

时间:2022-10-10 11:03:09浏览次数:58  
标签:css3 flex 项目 换行 布局 对齐 默认值 属性

flex-direction:容器主轴的方向;
值:row(默认:x轴由左到右)、column(y轴由上到下)、row-reverse(x轴由右到左)、column-reverse(y轴由下到上) flex-wrap:项目是否换行;
值:nowrap(默认:不换行)、wrap(换行)、wrap-reverse(翻转换行,第一行位于下方/右方) flex-flow:前面两个的简写,主轴的方向+项目是否换行; 主轴的对其方式 justify-content:项目在容器中的对其方式;
值:flex-start(默认值:左对齐)、center(居中对齐)、flex-end(右对齐)、space-between(两端对齐)、space-around(每个项目两侧的间距相等) 交叉轴的对齐方式 align-items:项目在交叉轴上的对其方式;
值:stretch(默认值)、flex-start(交叉轴的起点对齐)、center(居中对齐)、flex-end(交叉轴的终点对齐)、baseline(以项目的第一行文字的基线对齐) align-content:多根轴线的对齐方式。
如果项目只有一根轴线,该属性不起作用;与justify-content的值一样 align-self:当前项目可以和其他项目拥有不一样的对齐方式 属性 order 属性设置项目排序的位置,默认值为0,数值越小越靠前。 flex-grow 属性用来控制当前项目是否放大显示 默认值为0,表示即使容器有剩余空间也不放大显示。如果设置为1,则平均分摊后放大显示。 flex-shrink 属性表示元素的缩小比例 默认值为1,如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0,则空间不足时该项目也不缩小。 flex-basis 默认为auto,表示项目当前默认的大小。如果设置为一个固定的值,则该项目在容器中占据固定的大小。 flex 属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为:0 1 auto;

 

标签:css3,flex,项目,换行,布局,对齐,默认值,属性
From: https://www.cnblogs.com/DDjans/p/16774819.html

相关文章