精品课程网站建设 碧辉腾乐,wordpress主题插件免费下载,天津建设工程信息网官方,服务器做jsp网站教程视频教程推荐看一下阮一峰老师的flex布局博客【Flex 布局教程#xff1a;语法篇】(https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html#)#xff0c;讲的非常清晰。
一、多行布局大小相同的子盒子技巧
使用弹性布局实现多行均匀布局时#xff0c;如若子盒子数量不能被每行…推荐看一下阮一峰老师的flex布局博客【Flex 布局教程语法篇】(https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html#)讲的非常清晰。
一、多行布局大小相同的子盒子技巧
使用弹性布局实现多行均匀布局时如若子盒子数量不能被每行规定的子盒子数量整除时该如何实现最后一行的子盒子和其他行的子盒子垂直对齐呢
如下代码
templatediv classcontainerdiv classitem v-foritem, index in 5 :keyindex/div/div
/templatestyle langscss scoped
.container {width: 1000px;height: 400px;background-color: pink;margin: 100px;display: flex;justify-content: space-between;flex-wrap: wrap;.item {width: 30%;height: 100px;background-color: gray;}
}
/style可以看到最后的一行只有两个子盒子它们根据jusctify-content: space-between的规则贴在父盒子的两边而业务需求是最后一行的子元素必须按顺序和其他的子元素垂直对齐那么如何在不影响其他行布局的前提下实现最后一行的子盒子按顺序和其他行的子盒子垂直对齐呢我们可以使用伪元素元素不可见来实现。
我们给父盒子增加一个宽度和子盒子一样宽的伪元素
.container::after {content: ;width: 30%;visibility: hidden;
}visibility:hidden实现了将元素隐藏但是元素在网页中该占的位置还是占着的。
这样就成功完成了需求
二、flex-flow
flex-flow属性时flex-direction属性和flex-wrap属性的简写形式默认值为row nowrap。
这里我们在上一小节的基础上使用flex-flow代替flex-warp来测试一下flex-flow属性。
.container {width: 1000px;height: 400px;background-color: pink;margin: 100px;display: flex;justify-content: space-between;flex-flow: row wrap; // 得到的效果是一样的.item {width: 30%;height: 100px;background-color: gray;}
}得到了相同的结果。
三、flex-start | flex-end
center | space-between | space-around justify-content的这三个属性值的使用早已游刃有余了这里我记录一下较为陌生的两个属性
flex-start(默认值) | flex-endflex-start是弹性布局的默认水平对齐方式也就是左对齐显然flex-end就是右对齐了。
四、align-items属性进阶
和水平对齐方式一样的道理垂直对齐方式align-item也有flex-start和flex-end不过它们分别代表上对齐和下对齐下对齐常用于解决flex单行布局由于子盒子高度不同而导致子盒子下边界不在同一水平线的问题。如下
templatediv classcontainerdiv classitem1/divdiv classitem2/divdiv classitem3/div/div
/templatestyle langscss scoped
.container {width: 1000px;height: 400px;background-color: pink;margin: 100px;display: flex;justify-content: space-between;// align-items: flex-end;div {width: 30%;background-color: gray;}.item1 {height: 100px;}.item2 {height: 200px;}.item3 {height: 300px;}
}
/style给父盒子添加align-items: flex-end后实现了子盒子下边界在同一水平线上。如下 align-items: flex-start | flex-end | center | baseline | stretch(默认);值得注意的是弹性布局的垂直对齐方式默认并是上对齐而是stretch那么stretch是什么效果呢stretch有延伸、张开、弹性的的意思在弹性布局中就表示如果父盒子没有给高度并且使用了flex布局那么父盒子的高度将由子盒子决定根据子盒子的高度来自动撑开父盒子。
这里再了解一下属性基线对齐
baseline: 子盒子与第一行文字的基线对齐。
css中的基线(baseline0)并不是汉字文字的下端沿而是英文字母x的下端沿如下图 五、子盒子属性flex: none | [‘flex-grow’ ‘flex-shrink’? || ‘flex-basis’]
阮一峰老师的博客讲解的非常详细:Flex 布局教程语法篇
