一共有六种排版(排列顺序不同也算排版有18种)，有穷

数据结构

{
  "layout": {
    "type": 1, 
    "items": [ "picture", "list", "text" ]
  },
  "blocks": {
    "picture": {
      "url": "xxxx",
      "alt": "xxxx"
    },
    "list": [ "x", "x", "x" ],
    "text": "xxxxxxxxx"
  }
}

type 表示 layout 的类型 1-6

<div class="container_column">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>
<div class="container_column">
  <div class="conbine_container_row">
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="block"></div>
</div>
<div class="container_column">
  <div class="block"></div>
  <div class="conbine_container_row">
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>
<div class="container_row">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>
<div class="container_row">
  <div class="conbine_container_column">
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="block"></div>
</div>
<div class="container_row">
  <div class="block"></div>
  <div class="conbine_container_column">
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

.container_column {
  display: flex;
  flex-direction: column;
}

.container_row {
  display: flex;
  flex-direction: row;
}

.conbine_container_column {
  display: flex;
  flex-direction: column;
}

.conbine_container_row {
  display: flex;
  flex-direction: row;
}

.block {
  flex: 1;
}