要使用媒体查询和CSS Flexbox布局来实现网站的自适应排版，可以按照以下步骤进行：

1. 使用媒体查询来确定不同屏幕尺寸下的样式和布局。
– 在CSS中使用@media规则，根据屏幕宽度设置不同的样式。
– 例如，可以使用@media (max-width: 768px)来匹配屏幕宽度小于等于768px的情况。

2. 使用Flexbox布局来实现自适应排版。
– 将网站的主要内容包裹在一个容器中，将其设置为display: flex;，这样容器内的子元素就可以使用Flexbox布局。
– 使用Flexbox属性来控制子元素的布局方式，例如flex-direction、flex-wrap、justify-content和align-items等。
– 通过设置Flexbox的属性可以实现网站的自适应排版，使内容在不同屏幕尺寸下自动布局。

下面是一个示例代码，展示如何使用媒体查询和Flexbox布局实现自适应排版：

“`css
.container {
display: flex;
flex-wrap: wrap;
}

.container > div {
flex: 1 0 200px;
}

@media (max-width: 768px) {
.container > div {
flex-basis: 50%;
}
}

@media (max-width: 480px) {
.container > div {
flex-basis: 100%;
}
}
“`
在上述示例中，容器的子元素会根据屏幕的宽度自动调整布局。屏幕宽度在768px以下时，子元素会变为两列，每列的宽度为50%。屏幕宽度在480px以下时，子元素会变为一列，每列的宽度为100%。

通过媒体查询和Flexbox布局的组合，可以实现灵活自适应的网站排版。