由 CyanHall.com
创建于 2020-11-13，
上次更新：2021-04-30。
👉
如果有用请点赞。
可交互的 Flexbox 布局演示，按钮可以点击，容器可以调节大小。
The CSS property of A:
👉
如果有用请点赞。
可交互的 Flexbox 布局演示，按钮可以点击，容器可以调节大小。
A
B
C
D
Flex Container
display:flex,inline-flexflex-direction:justify-content(The layout for flex direction)align-items(The layout for cross flex direction, block C is setalign-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: 0align-self: (override Flex Container'salign-items)flex-basis:
When container'sflex-directionisrow: override A'swidth.
When container'sflex-directioniscolumn: override A'sheight.
flex-grow: (Define how to fill extra space)flex-shrink: (Initialwidth: 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;
}
更多
