Web中网页大小的改变怎样不改变盒子的布局？

理想效果页面，网页全屏时显示的页面

缩小网页页面时展示的效果

请问如何在缩小网页页面时保证盒子整体布局不改变？可以隐藏部分盒子，可以增加横向滚动条，如下图效果

首先，可以用flex进行布局，盒子的宽度用百分比表示；其次，给盒子一个最小宽度，并添加样式overflow:auto，使得达到盒子最小宽度时出现滚动条

固定宽度

横向排列的盒子宽度给百分比，高度由内容大小决定

三个大盒子的父元素给一个最小宽度,达到最小的时候出现滚动条