CSS Flexbox 交互式速查表

CSS Flexbox 交互式速查表

May 15, 2020
速查表, Web, 前端
★ 在 GitHub 赞我

可交互的 Flexbox 布局演示,按钮可以点击,容器可以调节大小。由 Cyanhall 创建。

A
B
C
D

Flex 容器:

  • display: flex, inline-flex
  • flex-direction:
  • justify-content: (flex-direction 指定方向的布局)
  • align-items: (垂直于 flex-direction 指定方向的布局, 方块 C 被设成 align-items: baseline)
  • flex-wrap: (在右下角区域调节大小)
  • flex-flow = flex-direction + flex-wrap, 例如: flex-flow: row wrap.
  • align-content: (仅对多行内容有效果)

Flex 容器内的元素:

A 的 CSS 属性:

  • order: 0
  • align-self: (覆盖 Flex 容器的 align-items 属性)
  • flex-basis:
    当容器的 flex-directionrow 时: 覆盖 A 的宽 width.
    当容器的 flex-directioncolumn 时: 覆盖 A 的高 height.

AB 的 CSS 属性:

  • flex-grow: (定义如何填充多余的空间)
  • flex-shrink: (初始设置 width: 100px, height: 100px, 定义在不足的空间内如何收缩)


示例源码:

<div class="cyanhall-container">
  <div class="cyanhall-item cyanhall-item-a">A</div>
  <div class="cyanhall-item cyanhall-item-b">B</div>
  <div class="cyanhall-item cyanhall-item-c">C</div>
  <div class="cyanhall-item">D</div>
</div>
.cyanhall-container {
  resize: both;
  overflow: auto;
  display: flex;
  border: 1px solid #ddd;
  border-radius: 3px;
  height: 100px;
  align-items: flex-start;
}
.cyanhall-item {
  margin: 2px;
  min-width: 40px;
  min-height: 40px;
  background-color: #4a8fe2;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cyanhall-item-c {
  align-items: baseline;
}