flex小记
2016-03-15 21:48
232 查看
align-items 是在nowrap时,对一行进行的设置
align-content 是在wrap时,对所有进行的设置。
子元素:
flex-grow :默认值是0 。 他们分配的是剩下的空间,如果没有剩下的空间,就没效果。
flex-shrink:默认值是1.它是指在进行压缩的时候,他的收缩能力。值越大,收缩的越快。
flex-basis: 设置成百分比,可以直接决定他占用的宽度。默认是auto。默认的时候就根据flex-grow。
如果 flex-direction 被设置成了 column,其实相当于把屏幕左旋90度。然后按照正常的方式进行设置。
order 不是flex-order!
如果我们设置了具体的宽度200px---使用flex-grow设置了,并且可以换行wrap。如果容器的宽度小于总的宽度和了,最后一个元素会随着宽度不够被挤下来。
align-content 是在wrap时,对所有进行的设置。
子元素:
flex-grow :默认值是0 。 他们分配的是剩下的空间,如果没有剩下的空间,就没效果。
flex-shrink:默认值是1.它是指在进行压缩的时候,他的收缩能力。值越大,收缩的越快。
flex-basis: 设置成百分比,可以直接决定他占用的宽度。默认是auto。默认的时候就根据flex-grow。
如果 flex-direction 被设置成了 column,其实相当于把屏幕左旋90度。然后按照正常的方式进行设置。
order 不是flex-order!
如果我们设置了具体的宽度200px---使用flex-grow设置了,并且可以换行wrap。如果容器的宽度小于总的宽度和了,最后一个元素会随着宽度不够被挤下来。
display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; http://www.runoob.com/try/try.php?filename=trycss3_flex-basis http://www.45it.com/css/201407/37606.htm flex-basis :如果设置成具体的值,是 所占的值就是 容器宽度*(自己的值/所有值的和) 如果是百分比: 凑够100%,就按上面算。 flex-grow 是受宽度影响的, flex-basis 被挤下来之后,是否去占满还是保持原位置留空,要看flex-grow 设置,如果设置为0,表死不对剩余空间处理,就会留空。
相关文章推荐
- 目前流行的源程序版本管理软件和项目管理软件都有哪些?各有什么优缺点?
- android程序内存泄漏的原因和解决办法
- 车道线检测-模式识别综合实验
- 《Thinking in Java》第一篇笔记 对多态的一点小琢磨
- Android 2.2 API ---------ImageButton
- HTML5 1.10 微格式
- out 传值(传址)
- C # 读取XML文件
- EditText的功能与用法
- CSS,Jquery精美进度条和滑动条(滑块)插件
- 控制文件(controlfile)
- 学习《HTML+CSS基础课程》里的权值
- Spring和Hibernate结合的一个小例子
- 百度距离谷歌何止一个太平洋的距离
- Spring和Hibernate结合的一个小例子
- python连接redis3.x集群并做操作
- shell之文本编辑
- nyoj27水池数目
- springMVC No mapping found for HTTP request with URI
- 百度距离谷歌何止一个太平洋的距离