欢迎光临带式输送机网站,我们是进行标准化生产出售

带式输送机生产厂家_煤矿带式传动装置_标准矿用倾角输送带
带式输送机

提供各行各业全方位的生产设备服务

*** 次数:51505 已用完,请联系开发者*** [能伸缩的皮带机]CSS伸缩布局

作者:八月      发布时间:2021-04-26      浏览量:0
一、伸缩布局(弹性布局)二、主轴方向1

一、伸缩布局(弹性布局)

二、主轴方向

1.只要将一个元素变为了伸缩的容器, 那么里面的伸缩项自动就会水平排版 2.默认会按照主轴从左向右的方向排版 flex-direction:属性就是专门用于设置主轴的方向的, 默认取值是row(从左至右) row-reverse(从右至左) flex-direction: column(主轴修改为垂直方向)。

伸缩项主轴的对齐方式

justify-content: flex-start;设置伸缩容器中的伸缩项, 和伸缩容器主轴的起点对齐。

justify-content: flex-end设置伸缩容器中的伸缩项, 和伸缩容器主轴的终点对齐。

justify-content: center;设置伸缩容器中的伸缩项居中。

justify-content: space-between; 两端对齐, 第一个伸缩项会和主轴的起点对齐,最后一个伸缩项会和主轴的终点对齐,其它项目平分多余的间隙。

伸缩项侧轴的对齐方式

align-items: flex-start 侧轴的默认对齐方式: 和侧轴的起点对齐。

align-items: flex-end和侧轴的终点对齐

align-items: center 和侧轴的中点对齐

align-items: baseline按照所有伸缩项内容的基线对齐。

align-items: stretch拉伸对齐

主轴侧轴交叉问题

无论主轴变为从上至下, 还是从下至上

侧轴永远都会和主轴十字交叉, 但是侧轴的起点永远都在左边

伸缩布局的换行显示

伸缩容器宽度小于所有伸缩项宽度时, 系统会自动等比缩放伸缩项 如果不想让系统自动等比缩放伸缩项, 那么可以设置一个属性 flex-wrap: wrap;

侧轴换行的行对齐方式

align-content: flex-start align-content: flex-end align-content: center align-content: space-between align-content: space-around align-content:strech(默认值) 属性的含义和justify-content一样。

伸缩项排序

伸缩项的放大和缩小比例

伸缩项宽度设置

伸缩布局的连写

伸缩项属性的连写: flex: flex-grow flex-shrink flex-basis; 放大比例: 默认值是0, 默认不会放大 缩小比例: 默认值是1, 等比缩小。