flex简单常用笔记
多行换行操作:
ul {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
ul li {
width: 50%;
padding: 2% 2% 0 2%;
box-sizing: border-box;
}
一行滚动
.other-stream {
width: 100%;
height: 50px;
overflow: hidden;
overflow-x: auto;
}
.other-stream .stream-box {
height: 50px;
display: flex;
flex-direction: row;
overflow-x: auto;
}
.other-stream .stream-box .stream-item {
display: inline-block;
width: 33.333%;
flex-shrink: 0;
}
需要注意:
分清楚主轴和交叉轴:
flex-direction: row; 下的主轴和交叉轴
主轴:items水平方向的对其位置方式:justify-content: space-between;
交叉轴:items锤子方向:align-items: center;
flex-wrap: wrap; 换行的方式
flex属性是flex-grow(放大), flex-shrink(缩小) 和 flex-basis(定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即项目的本来大小。它可以设为跟width
或height
属性一样的值(比如350px),则项目将占据固定空间。)的简写,默认值:0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值:auto(1 1 auto) 和 none(0 0 auto)
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。