CyanHall.com 创建于 2020-11-13, 上次更新:2021-04-30。
👉  github shields 如果有用请点赞。
可交互的 Flexbox 布局演示,按钮可以点击,容器可以调节大小。
A
B
C
D

Flex Container

  • display: flex, inline-flex
  • flex-direction:
  • justify-content (The layout for flex direction)
  • align-items (The layout for cross flex direction, block C is set align-items: baseline)
  • flex-wrap (Adjust the bottom-right corner to resize the Demo)
  • flex-flow = flex-direction + flex-wrap, eg: flex-flow: row wrap.
  • align-content (Only has an effect with more than one line of content)

Flex Item:


The CSS property of A:
  • order: 0
  • align-self: (override Flex Container's align-items)
  • flex-basis:
    When container's flex-direction is row: override A's width.
    When container's flex-direction is column: override A's height.
The CSS property of A and B
  • flex-grow: (Define how to fill extra space)
  • flex-shrink: (Initial width: 100px, height: 100px, define how to shrink inside oversize space)

Demo Source Codes

    <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;
}
  

Maitained by Cyanhall.com, Copy Rights @ CC BY-NC-SA 4.0