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，最後在加工美化一下，得出：
實際使用
.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 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內的文字過多時默認不會換行，須加上
- 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.
