Posts match “ cheatsheet ” tag:

授權方式(Auhorization): CC-BY 4.0

來源: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Chrome下flexbox快速上手

創造flex容器

  /*on the flex container*/
  .flexcontainer {
     display: -webkit-flex;
  }

將flex項目指定為列

  /*On the flex container*/
  .flexcontainer {
     -webkit-flex-flow: row;
  }

將flex項目指定為欄

  /*On the flex container*/
  .flexcontainer {
     -webkit-flex-flow: column;
  }

將flex項目移到頂端

  /* On the flex container*/
  .flexcontainer {
     -webkit-flex-flow: column;
     -webkit-justify-content: flex-start;
  /*or...*/
  .flexcontainer {
     -webkit-flex-flow: row; 
     -webkit-align-items: flex-start;
  }

將flex項目移到左邊

  /*On the flex container*/
  .flexcontainer {
     -webkit-flex-flow: row; 
     -webkit-justify-content: flex-start;
  }

  /* or... */
  
  .flexcontainer {
     -webkit-flex-flow: column; 
     -webkit-align-items: flex-start;
  }

將flex項目移到右邊

  /* On the flex container */

  .flexcontainer {
     -webkit-flex-flow: row;
     -webkit-justify-content: flex-end;
  }

  /* or... */
  
  .flexcontainer {
     -webkit-flex-flow: column;
     -webkit-align-items: flex-end;
  }

置中

  /* On the flex container */
  
  .flexcontainer {
     -webkit-flex-flow: 
     -webkit-align-items: center;
     -webkit-justify-content: center;
  }

讓flex項目比其他項目增大幾倍

  /* on the flex item you want to grow */
  .bigitem {
     -webkit-flex: X 0 0; /* where X is an integer greater than 0 */
  }
  .smallitem {
     -webkit-flex: 1 0 0;
  }

將flex項目變成好幾列

  /* On the flex container */
  .flexcontainer {
     -webkit-flex: row wrap;
  }

將flex項目變成好幾欄

  /* On the flex container */
  .flexcontainer {
     -webkit-flex: column wrap;
  }

移除欄或列的間距

  /* On the flex container */
  .flexcontainer {
     -webkit-flex: column wrap;
     -webkit-align-content: flex-start;
     /* flex-end and center are also valid values for align-content. */
  }

將元素定在視窗的某一邊

  /* On the flex item to pin */
  .pinneditem {
     margin-left: auto; /* pin to right */
     margin-right: auto; /* pin to left */
     margin-top: auto; /* pin to bottom */
     margin-bottom: auto; /* pin to top */
  }