flex-direction:
使用在display:flex
的父容器里,改变横轴的方向:
1.flex-direction:row
:默认值,从左到右
2.flex-direction:row-reverse
:从右到左
3.flex-direction:column
:从上到下
4.flex-direction:column-reverse
:从下到上
flex-wrap:
使用在display:flex
的父容器里,改变纵轴的方向:
1.flex-wrap:nowrap
:默认值,不换行
2.flex-wrap:wrap:wrap;flex-direction:row
:换行,从左到右,从上到下的换行
3.flex-wrap:wrap-reverse;flex-direction:row
:从左到右,从下到上的换行
4.flex-wrap:wrap-reverse;flex-direction:column
:从上到下的换行,并且从右到左
5.flex-wrap:wrap;flex-direction:column
:;
flex-flow:
flex-flow
为flex-direction
和flex-wrap
的缩写方式
flex-flow:<'flex-direction'>||<
Flex 布局详解
最新推荐文章于 2023-10-09 14:59:59 发布
本文详细解析了Flex布局中的关键属性,包括flex-direction、flex-wrap、flex-flow、order、justify-content、align-items、align-self、align-content、flex-grow、flex-shrink和flex-basis。通过这些属性,可以灵活地控制容器内元素的排列方式和尺寸调整,实现各种复杂的布局效果。
摘要由CSDN通过智能技术生成