CSS flex-flow
❮
上一页
accent-color
align-content
align-items
align-self
animation
aspect-ratio
backdrop-filter
background
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
background-repeat
background-size
block-size
border
border-block
border-block-color
border-block-end
border-block-end-color
border-block-end-style
border-block-end-width
border-block-start
border-block-start-color
border-block-start-style
border-block-start-width
border-block-style
border-block-width
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-end-end-radius
border-end-start-radius
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-inline
border-inline-color
border-inline-end
border-inline-end-color
border-inline-end-style
border-inline-end-width
border-inline-start
border-inline-start-color
border-inline-start-style
border-inline-start-width
border-inline-style
border-inline-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-start-end-radius
border-start-start-radius
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-reflect
box-shadow
box-sizing
caption-side
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-wrap
float
font
font-family
font-feature-settings
font-kerning
font-size
font-style
font-variant
font-variant-caps
font-weight
gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
height
hyphens
hyphenate-character
image-rendering
inline-size
inset
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
justify-content
justify-items
justify-self
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-block
margin-block-end
margin-block-start
margin-bottom
margin-inline
margin-inline-end
margin-inline-start
margin-left
margin-right
margin-top
max-block-size
max-inline-size
min-block-size
min-inline-size
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
overflow-x
overflow-y
padding
padding-block
padding-block-end
padding-block-start
padding-bottom
padding-inline
padding-inline-end
padding-inline-start
padding-left
padding-right
padding-top
paint-order
perspective
perspective-origin
place-content
place-items
place-self
quotes
right
rotate
row-gap
scale
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-orientation
text-overflow
text-shadow
text-transform
text-underline-offset
text-underline-position
top
transform
transform-origin
transform-style
translate
unicode-bidi
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom
下一页
❯
flex-flow 属性不同值的演示。
点击下面的属性值，查看结果
flex-flow
:
row nowrap
;
flex-flow
:
row-reverse nowrap
;
flex-flow
:
column nowrap
;
flex-flow
:
column-reverse nowrap
;
flex-flow
:
row wrap
;
flex-flow
:
row-reverse wrap
;
flex-flow
:
column wrap
;
flex-flow
:
column-reverse wrap
;
flex-flow
:
row wrap-reverse
;
flex-flow
:
row-reverse wrap-reverse
;
flex-flow
:
column wrap-reverse
;
flex-flow
:
column-reverse wrap-reverse
;
红色 div
蓝色 div
黄色 div
粉色 div
红色 div
蓝色 div
黄色 div
粉色 div
红色 div
蓝色 div
黄色 div
粉色 div
红色 div
蓝色 div
黄色 div
粉色 div
红色 div
蓝色 div
黄色 div
粉色 div
红色 div
蓝色 div
黄色 div
粉色 div
红色 div
蓝色 div
黄色 div
粉色 div
红色 div
蓝色 div
黄色 div
粉色 div
红色 div
蓝色 div
黄色 div
粉色 div
红色 div
蓝色 div
黄色 div
粉色 div
红色 div
蓝色 div
黄色 div
粉色 div
红色 div
蓝色 div
黄色 div
粉色 div
在我们的“亲自尝试”编辑器中使用代码进一步练习：
立即尝试 ❯