live demo

click item to change stlye

item-1
item-2
item-3
item-4
item-5

style of container hide

flex-direction:
flex-wrap:
justify-content:
align-items:
align-content:

属性解释

flexbox

对Flex容器设置display:flex或者display:inline-flex

1
2
3
<div class="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
.wrap {
  display: flex;
}

flex-direction

控制Flex项目沿着主轴(Main Axis)(父容器) 的排列方向

flex-direction:row
1
2
3
flex-direction:row-reverse
1
2
3
flex-direction:column
1
2
3
flex-direction:column-reverse
1
2
3
.wrap {
  flex-direction:row || column || row-reverse || column-reverse
                // 水平(顺)|| 垂直(顺)|| 水平(逆)|| 垂直(逆)
}

flex-wrap

控制Flex项目是否换行,默认值是nowrap,不换行

flex-wrap:wrap
1
2
3
4
5
6
7
8
9
flex-wrap:wrap-reverse
1
2
3
4
5
6
7
8
9
flex-wrap:nowrap
1
2
3
4
5
6
7
8
9
.wrap {
  flex-wrap:wrap || nowrap || wrap-reverse
            // 换行(正)|| 不换行 || 换行(反)
}

flex-flow

flex-direction和flex-wrap两个属性的组合属性

.wrap {
  flex-flow:row wrap|| row nowrap || column wrap || column nowrap 等等
}

justify-content

Flex项目在整个Main-Axis上的对齐方式(父容器X轴),默认是flex-start,起始端对齐

justify-content:flex-start
1
2
3
justify-content:flex-end
1
2
3
justify-content:center
1
2
3
justify-content:space-between
1
2
3
justify-content:space-around
1
2
3
.wrap {
   justify-content:flex-start || flex-end || center || space-between || space-around
                  // 起始端对齐 → || 末尾段对齐 ← || 居中对齐 || 首尾两端均匀分布 || 均匀分布(首尾两端的子容器到父容器的距离是子容器间距的一半)
}

align-items

Flex项目在Cross-Axis对齐方式(父容器Y轴),默认是flex-start,起始端对齐

align-items:flex-start
1
2
3
align-items:flex-end
1
2
3
align-items:center
1
2
3
align-items:stretch
1
2
3
align-items:baseline
1
2
3
.wrap {
   align-items:flex-start || flex-end || center || baseline || stretch
                  // 起始端对齐 ↓ || 末尾段对齐 ↑ || 居中对齐 || 基线对齐(默认是指首行文字) || 子容器沿Y轴方向的尺寸拉伸至与父容器一致
}

align-content

该属性只针对子容器多行排列时,设置行与行之间的对齐方式,对单行无效。

align-content:flex-start
1
2
3
4
5
6
7
8
9
align-content:flex-end
1
2
3
4
5
6
7
8
9
align-content:center
1
2
3
4
5
6
7
8
9
align-content:space-around
1
2
3
4
5
6
7
8
9
align-content:space-between
1
2
3
4
5
6
7
8
9
align-content:stretch
1
2
3
4
5
6
7
8
9
.wrap {
   align-content:flex-start || flex-end || center || space-around || space-between || stretch
                  // 起始端对齐 ↓ || 末尾段对齐 ↑ || 居中对齐 || 等边距均匀分布 || 等间距均匀分布 || 拉伸对齐
}

order

改变子容器的排列顺序,覆盖 HTML 代码中的顺序,默认值为 0,可以为负值,数值越小排列越靠前。

1
2
3
.wrap {
  display:flex;
  div{
    order:1//数字
  }
}

flex-basis

在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度,主轴为纵向时代表高度。

.wrap {
  display:flex;
  // 主轴为横向时代表宽度
  flex-direction:row;
  div{
    flex-basis:120px;//数字
    height:80px;
  }
  // 或者

  // 主轴为纵向时代表高度
  // flex-direction:column;
  // div{
  //   flex-basis:120px;//数字
  //   width:80px;
  // }
}

flex-grow

父容器剩余空间按 1:2 的比例分配给子容器

子容器未加flex-grow
1
2
子容器flex-grow:1,flex-grow:2
1
2
.wrap {
  display:flex;
  .div1{
    flex-grow:1
  }
  .div2{
    flex-grow:2
  }

}

flex-shrink

子容器超出的部分按 1:2 的比例从子容器中减去

子容器未加flex-shrink
1
2
子容器flex-shrink:1,flex-shrink:2
1
2
.wrap {
  display:flex;
  width:100px;
  .div1,.div2{
    flex-basis:200px;
    // 设置基础宽度,且超出父容器宽度
  }
  .div1{
    flex-shrink: 1;
  }
  .div2{
    flex-shrink: 2;
  }

}

align-self

每个子容器可以单独定义沿交叉(父容器Y)轴的排列的方式,此属性与父容器 align-items 属性完全一致,如果两者同时设置则以子容器的 align-self 属性为准。

align-self:flex-start
align-self:flex-start
2
3
align-self:flex-end
align-self:flex-end
2
3
align-self:center
align-self:center
2
3
align-self:stretch
align-self:stretch
2
3
align-self:baseline
align-self: baseline;
2
align-self: baseline;
.wrap {
   align-self:flex-start || flex-end || center || baseline || stretch
              // 起始端对齐 || 末尾段对齐|| 居中对齐 || 基线对齐(默认是指首行文字) || 子容器沿Y轴方向的尺寸拉伸至与父容器一致
}