html5css3
关注
分享
扫一扫
winfyho
前端练习生
展开
-
flex布局(四) : 设置item上的属性
flex布局(四) : 设置item上的属性1.order 决定item的排布顺序设置整数，数值越小排在越前面默认值为0<style>.item1{ order: 3;}.item2{ order: 2;}.item3{ order: 1;}</style>2.align-self 决定单个item在交叉轴上的对齐方式...原创 2020-01-23 01:37:02 · 1221 阅读 · 1 评论 -
flex布局(三) : 多行显示
flex布局(三) : 多行显示4. flex-wrap 决定items的换行控制item的多行显示nowrap(默认) ：单行显示，如果容器container宽度不够，则压缩item宽度适应wrap ：多行显示，每一行平分容器container高度wrap-reverse ：多行显示，交叉轴上对调顺序。大多数情况下不会使用这个属性<style>.container{...原创 2020-01-16 03:03:43 · 4899 阅读 · 0 评论 -
flex布局(二) : 位置与排列方式
flex布局(二) : 位置与排列方式1. flex-direction 决定主轴方向改变主轴方向为：水平row(默认) 或者 垂直column并且设置item元素的排序方式start->end(默认) 或者 end->startrowrow-reversecolumncolumn-reverse<style>.container{ /* 改变...原创 2020-01-16 03:00:29 · 5032 阅读 · 0 评论 -
flex布局(一) : container和items
flex布局(一) : container和items案列演示<style>.container{ width: 500px; height: 200px; /* 父元素container设置display开启flex布局 */ display: flex; border: 1px solid #000;}.item{ /* ...原创 2020-01-16 02:54:05 · 1278 阅读 · 0 评论