Posts match “ flexbox ” tag:

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

flexbox 真的頗好用 :)
把文章的tips和tricks翻成中文記錄下來.

  1. 對元素使用絕對位置(position: absolute)時,盡量用margins替代top, left, right, bottom。使用邊界的絕對位置元素在不同螢幕解析度下會比較一致。
  2. 用em取代pixel。em會隨字型大小而改變。當你增加了基本的字型大小在這個例子日期仍然會維持其位置。
  3. 用padding取代margin作為間隔。有時候margin的間隔會導致每一個的崩潰而非堆疊。
  4. 不要害怕用通用的選擇器,有經驗的網頁開發者因為效能避免通用選擇器,你不應該浪費時間在這上面,最初的設計無須擔心效能問題。
  5. 用flexbox建造更複雜的布局關鍵是切成小塊,如果對你可行就別害怕使用flex container。

原文

  1. When absolutely positioning an element use margins instead of top, left, right, bottom. Elements absolutely positioned with margins are more consistent across different screen resolutions.
  2. Use ems instead of pixels. Ems adjust when you change font-size. If you increased the base font size in this example the date would maintain its position.
  3. Use padding instead of margin for spacing. Spaces created with margin sometimes collapse into each other instead of stacking. Sometimes you want this but most of the time it's not helpful. Padding doesn't collapse so it's more predictable than using margins.
  4. Use the universal selector, *, without fear. Experienced web developers avoid the universal selector for performance reasons. You shouldn't spend any time thinking about this. There are performance issues but nothing to worry about when creating the initial design.
  5. The key to creating more complicated layouts with flexbox is to break it into pieces. Don't be afraid to make everything a flex container if that's what works for you.

來源: http://www.sketchingwithcss.com/samplechapter/flexbox.pdf

授權方式(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 */
  }