关于flex弹性盒子_flex盒子和普通盒子-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43416666/article/details/85107663

本文深入讲解CSS弹性盒子布局，包括如何定义弹性盒子及其属性，如display:flex、flex-direction、flex-wrap、justify-content和align-items。同时，探讨了子元素的order、flex-grow、flex-shrink及align-self属性，帮助读者掌握响应式网页设计的关键技巧。

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

弹性盒子

	<div class="container">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>

定义在container弹性盒子的属性:

设置为弹性盒子`display:flex`
排列方向`flex-direction:(row默认)(row-reverse右往左排列)(column上往下排列)(column-reverse下往上排列)`
换行`flex-wrap:(nowrap默认不换行)(wrap换行,第一行在上方)(wrap-reverse换行,第一行在下方)`
水平轴对齐方式`justify-content:(flex-start左往右对齐)(flex-end右往左对齐)(center居中)(space-between两端对齐，项目之间的间	隔都相等)(space-around每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍)`
垂直轴对齐方式`align-items:(stretch默认)(flex-start起点对齐)(flex-end终点对齐)(center中点对齐)(baseline第一行文字的基线对齐)`

定义在item子元素的属性:

order定义排列顺序的优先级,默认为0,数值越小越靠前
flex-grow定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch