flex 弹性盒模型学习手记

最新推荐文章于 2025-05-26 12:27:37 发布

原创最新推荐文章于 2025-05-26 12:27:37 发布 · 355 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flex #弹性盒模型 css3

css3 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS3中的Flex布局模型，包括如何设置父节点样式来实现不同类型的布局，如水平或垂直排列、换行与否及对齐方式等。同时，还讲解了如何通过设置子元素样式来调整项目的排列顺序、放大或缩小比例等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3

弹性盒模型 flex

1.父节点元素样式

parentNode {

display:flex;----------------------建立和模型环境

flex-flow: row nowrap; --------------------------- row (横排从左到右） column(竖排） nowrap( 不换行) wrap(换行）

justify-content:space-around ------------------- space-around（盒子外侧margin间隔相同，都平均分配）

--------------------flex-start(左对齐） flex-end(右对齐） center（居中对齐） space-between(两端对齐）

align-item:flex-start ---------------------- -----------flex-start（顶端对齐） flex-end（低端对齐）。。。。。。

}

2.子元素样式

childNode{

            order                                                               属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow （默认为0，）                             属性定义项目的放大比例，即如果存在剩余空间，也不放大。例如比例参数：1 2 1
            flex-shrink （默认为1，）    属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis ）（默认值为auto）项目占据的主轴空间（main size）（比如350px）
flex （默认值为0 1 auto）                            flex属性是flex-grow, flex-shrink 和 flex-basis的简写，

align-self: auto | flex-start | flex-end | center | baseline | stretch;             属性允许单个项目有与其他项目不一样的对齐方式，可覆盖