![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 1151 阅读 · 1 评论 -
flex布局(三) : 多行显示
flex布局(三) : 多行显示 4. flex-wrap 决定items的换行 控制item的多行显示 nowrap(默认) :单行显示,如果容器container宽度不够,则压缩item宽度适应 wrap :多行显示,每一行平分容器container高度 wrap-reverse :多行显示,交叉轴上对调顺序。大多数情况下不会使用这个属性 <style> .container{...原创 2020-01-16 03:03:43 · 4735 阅读 · 0 评论 -
flex布局(二) : 位置与排列方式
flex布局(二) : 位置与排列方式 1. flex-direction 决定主轴方向 改变主轴方向为:水平row(默认) 或者 垂直column 并且设置item元素的排序方式start->end(默认) 或者 end->start row row-reverse column column-reverse <style> .container{ /* 改变...原创 2020-01-16 03:00:29 · 4948 阅读 · 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 · 1210 阅读 · 0 评论