CSS實現圖片分佈

flex實現 圖片分佈式佈局

HTML部分

    <div class="random-layout-box">
      <div class="box-one">
        <div class="box-top">
          <img class="img-online" :src="src"/>
        </div>
        <div class="box-center">
          <img class="img-online" :src="src"/>
        </div>
        <div class="box-bottom">
          <img class="img-online" :src="src"/>
        </div>
      </div>
      <div class="box-two">
        <div class="box-header">
          <img class="img-online" :src="src"/>
        </div>
        <div class="box-footer">
          <div class="box-footer-left">
            <img class="img-online" :src="src"/>
          </div>
          <div class="box-footer-left">
            <img class="img-online" :src="src"/>
          </div>
        </div>
      </div>
      <div class="box-three">
        <div class="box-top">
          <img class="img-online" :src="src"/>
        </div>
        <div class="box-center">
          <img class="img-online" :src="src"/>
        </div>
        <div class="box-bottom">
          <img class="img-online" :src="src"/>
        </div>
      </div>
    </div>

CSS部分

<style lang="stylus" scoped>
.random-layout
  // border 1px red solid
  width 100%
  height 100%
  .random-layout-box
    display flex
    width 100%
    height 100%
    .box-one
      flex 1
      height 100%
      // border 1px red solid
      display flex
      flex-direction column
      order 1
    .box-two
      flex 2
      height 100%
      display flex
      flex-direction column
      // border 1px blue solid
      order 2
    .box-three
      flex 1
      height 100%
      // border 1px pink solid
      display flex
      flex-direction column
      order 3
// 左右兩側
.box-top
  flex 1
  display flex
.box-center
  flex 1
  display flex
.box-bottom
  flex 1
  display flex
// 中間欄
.box-header
  flex 2
  display flex
.box-footer
  flex 1
  display flex
  .box-footer-left
    flex 1
    display flex
  .box-footer-right
    flex 1
    display flex

.img-online
  // display block
  width 100%
  height 100%
  // flex-shrink 0
</style>