如何仅用HTML创建单行Flex-box？能否通过内联CSS实现五盒响应式Flex布局？

完全可以不用外部CSS文件，仅靠内联style属性实现包含五个盒子的响应式Flex布局。下面是直接可用的代码，同时拆解关键属性帮你理解：

<div style="display: flex; flex-wrap: wrap; gap: 10px; padding: 10px;">
  <div style="flex: 1 1 calc(20% - 10px); min-width: 150px; background: #eee; padding: 20px; box-sizing: border-box;">盒子1</div>
  <div style="flex: 1 1 calc(20% - 10px); min-width: 150px; background: #eee; padding: 20px; box-sizing: border-box;">盒子2</div>
  <div style="flex: 1 1 calc(20% - 10px); min-width: 150px; background: #eee; padding: 20px; box-sizing: border-box;">盒子3</div>
  <div style="flex: 1 1 calc(20% - 10px); min-width: 150px; background: #eee; padding: 20px; box-sizing: border-box;">盒子4</div>
  <div style="flex: 1 1 calc(20% - 10px); min-width: 150px; background: #eee; padding: 20px; box-sizing: border-box;">盒子5</div>
</div>

关键属性说明 #

• 父容器：
  • display: flex：将容器设为Flex布局，子元素自动排列成一行
  • flex-wrap: wrap：当容器宽度不足以容纳所有盒子时，自动换行，实现响应式适配
  • gap: 10px：设置盒子之间的间距，避免手动加margin的麻烦
• 子盒子：
  • flex: 1 1 calc(20% - 10px)：
    • flex-grow: 1：有剩余空间时自动拉伸填充
    • flex-shrink: 1：空间不足时自动收缩
    • flex-basis: calc(20% - 10px)：默认宽度为容器的20%减去间距，五个盒子刚好占满一行
  • min-width: 150px：设置最小宽度，防止小屏幕下盒子被挤得太窄
  • box-sizing: border-box：让padding和border包含在盒子宽度内，避免宽度计算出错

你之前尝试失败的常见原因 #

1. 没加flex-wrap: wrap：小屏幕下盒子会强行挤在一行，导致溢出或变形
2. 子元素宽度计算错误：没考虑间距，或者没使用box-sizing导致padding撑大盒子
3. 没设置min-width：极端小屏幕下盒子宽度会变得不可读

内容的提问来源于stack exchange，提问作者lux1