flex简单常用笔记

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)

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。