CSS Tricks

# 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轴方向的尺寸拉伸至与父容器一致
}

← grid →