flex布局
发布时间:2020-12-15 03:31:10 所属栏目:百科 来源:网络整理
导读:.container{ height:100%; width:100%; background:blue; display:flex; /*决定元素的排列方向 display-direction:row 横向(默认)主轴是横向的 column纵向排列 主轴变为竖向 */ /* 是否换行 flex-wrap: wrap;放不下时自动换行 nowrap不换行缩小各个比例(
.container{ height:100%; width:100%; background:blue; display:flex; /*决定元素的排列方向 display-direction:row 横向(默认)主轴是横向的 column纵向排列 主轴变为竖向 */ /* 是否换行 flex-wrap: wrap;放不下时自动换行 nowrap不换行缩小各个比例(默认) wrap-reserve翻转(在交叉轴翻转,也就是在最上面会到最下面,不是左右是上下) */ /* flex-flow是上面方向和换行的简写 flex-flow:row wrap; */ /* justify-content: center;在主轴上居中 flex-start从左边开始对齐(默认) flex-end从右边对齐 space-around每一块占据的区域大小一样大 space-between两端对齐 */ /* align-items: center;在交叉轴上的居中 flex-start。flex-end stretch当子元素没有设置高度,会自动占满交叉轴上的位置 baseline对齐方式是一各个区域块内的文字来对齐 */ /* align-content: center;在主轴上居中 flex-start从左边开始对齐(默认) flex-end从右边对齐 space-around每一块占据的区域大小一样大 space-between两端对齐 stretch */ } .items{ width:100rpx; height:100rpx; background:blanchedalmond; border:1px solid #000; /* flex各个属性写给子元素 flex-grow:0(默认) 1,2,3每一块占据的份数 flex-shrink:1(默认)空间不足等比缩小 0无效果 flex-basis:在微信上要写 **px;在主轴占据的空间 flex:1 0 200px;是以上三个的简写 order:1 给每一个写 可以改变位置1代表第一个 align-self:flex-end;子元素自己定义自身的排列方式,不影响其他元素 center;在交叉轴上的居中 flex-start。flex-end stretch当子元素没有设置高度,会自动占满交叉轴上的位置 baseline对齐方式是一各个区域块内的文字来对齐 */ }之前写小程序用到的弹性盒布局,在这里分享一下。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |