CSS Flex

Dispaly Flex

範例:

(別忘了拉動你的視窗唷!)

Example A

Basic (200x150 px)

display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;

Example B

Arrangement

display: flex;
-webkit-flex-flow: row wrap;
justify-content: flex-end;

@media all and (max-width: 800px) {
    justify-content: space-around;
}

@media all and (max-width: 600px) {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
}

Example C

Web Layout

display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;

@media all and (max-width: 600px) {
  Aside 1 {
    justify-content: space-around;
  }
}

@media all and (max-width: 800px) {
  Content {
    flex: 3 0px;
    order: 2;
  }
  Aside 1 {
    order: 1;
  }
  Aside 2 {
    order: 3;
  }
  Footer {
    order: 4;
  }
}

Header

Content
假若我是一朵雪花，翩翩的在半空裡瀟灑，我一定認清我的方向——飛揚，飛揚，飛揚，這地面上有我的方向。

不去那冷寞的幽谷，不去那淒清的山麓，也不上荒街去惆悵——飛揚，飛揚，飛揚，——你看，我有我的方向！

在半空裡娟娟的飛舞，認明了那清幽的住處，等著她來花園裡探望——飛揚，飛揚，飛揚，——啊，她身上有朱砂梅的清香！

那時我憑藉我的身輕，盈盈的，沾住了她的衣襟，貼近她柔波似的心胸——消溶，消溶，消溶——溶入了她柔波似的心胸。

Anson煮煮的... ...隨便啦