这篇文章讲述使用css3布局属性flex详细介绍
html代码如下:
登录后复制
css代码如下:
.ul_box{ margin:0; padding: 0; list-style: none; /*display: flex将对象作为弹性伸缩盒显示; flex-flow:flex-direction(确定弹性子元素排列方式)和 flex-wrap(当弹性子元素超出弹性元素容器范围时是否换行)的复合属性, 写入父容器里; */ display: flex; flex-flow: row wrap;}.ul_box li{ text-align: center; height:40px; line-height: 40px; /*flex:flex-grow(设置弹性子元素的扩展比率) * flex-shrink(设置弹性子元素的收缩比率) * flex-basis(指定弹性子元素伸缩前的默认大小值，相当于width和height属性。) * 这三种属性的复合属性，写入子容器里;*/ flex: 1 1 100%;}.ul_box li a{ text-decoration: none; color:#fff;}.ul_box li:nth-child(1){ background: #008000;}.ul_box li:nth-child(2){ background: #4169E1;}.ul_box li:nth-child(3){ background: #8A2BE2;}.ul_box li:nth-child(4){ background: #A52A2A;}.ul_box li:nth-child(5){ background: #FFA500;}.ul_box li:nth-child(6){ background:#9ACD32;}@media (min-width:480px ) { .ul_box li{ flex: 1 1 50%; }}@media (min-width:768px ) { .ul_box{ flex-flow: row nowrap; }}
登录后复制
以下6个属性设置在容器上：
flex-direction 容器内项目的排列方向(默认横向排列)
立即学习“前端免费学习笔记（深入）”；
flex-wrap 容器内项目换行方式
flex-flow 以上两个属性的简写方式
justify-content 项目在主轴上的对齐方式
align-items 项目在交叉轴上如何对齐
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
容器中项目的属性：
order 项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow 项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis 在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
以上就是使用css3布局属性flex详细介绍的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2905351.html
