用flex布局写一个父元素宽度为100%，其中三个子元素宽度为30%，当页面宽度为700px的时候，第三个子元素换行

可以使用flex-wrap属性实现：

HTML代码：

<div class="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

CSS代码：

.parent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.child {
  width: 30%;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

@media screen and (max-width: 700px) {
  .child {
    width: 100%;
  }
}

解释：

- 将父元素的display属性设置为flex，使其成为一个flex容器。
- 将父元素的flex-wrap属性设置为wrap，使子元素在一行放不下时自动换行。
- 将子元素的宽度设置为30%，使其在一行中占三分之一。
- 使用@media查询，当屏幕宽度小于或等于700px时，将子元素的宽度设置为100%。