[CSS] box-sizing: border-box; & grid & [attribute*=value] Selector & flex

[ box-sizing: border-box; ]
The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;).

* {
  box-sizing: border-box;}


[ grid ]
簡單說明含意，grid是一列(row)由12 column組成，因為column是float的，row要clear the flow，最後在加工美化一下，得出：

https://www.w3schools.com/css/css_rwd_grid.asp 裡面有詳細的code

實際使用
.grid-container {
  display: grid | inline-grid;
  grid-gap: 50px 100px;  // shorthand of  grid-row-gap and grid-column-gap
  grid-template-columns: auto auto 70px 120px;  // Make a grid with 4 columns
  grid-template-rows: 80px 200px;  // Make a grid with 2 rows
  grid-template-columns: 3fr 1fr;  // 新的 fr 單位之格線。fr 單位就是為了格線布局而生，代表格線容器內，可用空間的分塊（fraction）。

  grid-template-rows: repeat(3,auto);  // 即為  grid-template-rows: auto auto auto;
  justify-content: space-evenly | space-around | space-between | center | start | end;  // The grid's total width has to be less than the container's width
  align-content: space-evenly | space-around | space-between | center | start | end;  // The grid's total height has to be less than the container's height
}

.item1 {
  grid-column: 1 / 5;  // shorthand of grid-column-start and grid-column-end
  grid-column: 1 / span 3;  // grid-column-start 跨三個跨度
  grid-row: 1 / 4;
  grid-row: 1 / span 2;
  grid-area: 1 / 2 / 5 / 6; // 上左下右, 記憶點：畢竟start應該先，所以非上右下左
  grid-area: 2 / 1 / span 2 / span 3;
  }

[CSS [attribute*=value] Selector]

Set a background color on all <div> elements that have a class attribute value containing "test":
div[class*="test"] {
  background: #ffff00;}

Set a background color on all elements that have a class attribute value containing "test":
[class*="test"] {
  background: #ffff00;}

[flex]
.flex-container {
  display: flex;
  flex-direction: column | column-reverse | row | row-reverse;
  flex-wrap: wrap | nowrap | wrap-reverse;  // The wrap value specifies that the flex items will wrap if necessary; The wrap-reverse value does the same but in reverse order:
  flex-flow: row wrap; // shorthand of flex-direction and flex-wrap
   justify-content: center | flex-start | flex-end | space-around | space-between;
  align-items: center | flex-start | flex-end | stretch | baseline; // The stretch value stretches the flex items to fill the container (this is default)
  //  Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:

 align-content: space-between | space-around | center | flex-start | flex-end | stretch;
 // align-content v.s. align-items : 前者是針對所有元素相對container的位置，後者是針對所有元素彼此間的位置
}

.item1{
 order:1; // default value is 0. The bigger the value bigger, the more previous the order.
 flex-grow:2; // Make the item grow 2 times faster than the other flex items, default value is 0.(這個item會是兩倍大於數字1的，但英文再w3c他就是那樣寫的~)
 flex-shrink:0; // Make the third item shrink 2 times than the ones which are "flex-shrink:1", default value is 1.
 flex-basis: 200px; // The flex-basis property specifies the initial length of a flex item.
 flex: 0 0 200px;  // shorthand of flex-grow, flex-shrink, and flex-basis. Make the item not growable (0), not shrinkable (0), and with an initial length of 200 pixels. And its default value is 0 1 auto.
 flex: 25%; 
// flex:25% sets the flex-basis property to 25%, and also sets the flex-grow and flex-shrink properties to 1.
 align-self: center; // overrides the default alignment set by the container's align-items property. 功能和container's align-items一樣，不過是作用在單個item上
}

# example: the third one is flex-shrink:0; and others are default.
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

# div內的文字過多時默認不會換行，須加上
.container{
  overflow:hidden;
  word-wrap:break-word; //定義怎麼斷過長的文案。break-all:不管，直接斷。normal:找到單詞間的空白再斷。
  word-break:break-all;  // 不管，直接斷
}

錯錯錯!!!應該設basis !! (下面有例子)
1. [flex v.s. grid]
2. https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/

• In flexbox layout, the size of a cell (flex-item) is defined inside the flex-item itself, and in the grid layout, the size of a cell (grid-item) is defined inside the grid-container.
• Grid Has a “Gap” Property, Flexbox Doesn’t.
• Flexbox is One Dimensional, Grid is Two Dimensional
• Flexbox Wraps vs Grid Wraps
• Will CSS Grid make Flexbox Obsolete in the Future? Absolutely not, they both are designed to solve a different set of problems.

<h2>Flexbox</h2>
<div class="row-flex">
    <div>1 2 3  4 5 6 7 8 9 0</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
 
<h2>Grid</h2>
<div class="row-grid">
    <div>1 2 3  4 5 6 7 8 9 0</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>




/* Flexbox row styles */
.row-flex {
  margin: 40px auto;
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
}
.row-flex div {
  border: 1px dashed gray;
  flex: 1 1 100px;  // set the basis
  text-align: center;
  padding: 12px;
}
/* Grid row styles */
.row-grid {
  margin: 40px auto;
  max-width: 600px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); // set the basis

}
.row-grid div {
  border: 1px dashed gray;
  text-align: center;
  padding: 12px;
}






when a flex-item is wrapped and pushed in a new row, the Flexbox layout algorithm treats it as a part of a different flex-container. Hence the pushed item loses its context.


Flexbox and Grid layouts are built on concept of responsiveness and hence reduce the use of Media Queries.


This is an important difference. It shows that the flexbox layout is calculated after its content is loaded whereas the grid layout is calculated regardless of the content inside it. So, if possible, avoid using flexbox to build the overall layout of your website.