佈局:box-sizing ,clear float,flex

清除浮動

.clearfix{
    &:after{        clear:both;        height:0;        content:'';        display: table;    
    }
}

說明：

• content: 用處也很大，能夠用來添加一些文字提醒。

• display: table,flex 均可以，讓文檔繼續按照正常的盒模型渲染。

• 僞類用處之後在總結example1

給父一級的添加

overflow: hidden;

box-sizing re.

盒模型:border,padding,margin

box-sizing: border-box, content-box

content-box(默認): 元素的寬度/高度（width/height）等於元素邊框寬度（border）加上元素內邊距（padding）加上元素內容寬度/高度（content width/height）;

border-box : 內容寬度/高度=width/height-border-padding

example

開發中的用處:

• re bt set reset

*{
  .box-sizing(border-box);
}
*:before,
*:after {
  .box-sizing(border-box);
}

• 去除由於padding與border帶來的溢出

• 重置 input

flexbox 佈局

re. 中文,
re.2,
re. 英文

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex-grow: 控制擴展比例 數值(不可爲負)

flex-shrink: 控制收縮比例 數值(不可爲負)

flex-basis: auto | <'width'> 基礎寬度

可用空間 =（容器大小 - 全部相鄰項目flex-basis總和）;
每項伸縮大小 = 伸縮基準值 + ((可用空間 / 全部相鄰項目flex-grow總和) x 此項的flex-grow值);

這個公式有待考究

經常使用的flex設置和他的意義

flex: 0 auto / flex: initial

this is equivalent to flex: 0 1 auto, which is the initial value. This value sizes the item based on the width/height properties. (If the item’s main size property computes to auto, this will size the flex item based on its contents.) Makes the flex item inflexible when there is positive free space, but allows it to shrink to its min-size when there is insufficient space.

flex: auto

This is equivalent to flex: 1 1 auto. This value sizes the item based on the width/height properties, but makes them fully flexible, so that they absorb any free space along the main axis. If all items are either flex: auto, flex: initial, or flex: none, any positive free space after the items have been sized will be distributed evenly to the items with flex: auto.

flex: none

This is equivalent to flex: 0 0 auto. This value sizes the item according to the width/height properties, but makes the flex item fully inflexible. This is similar to initial, except that flex items are not allowed to shrink, even in overflow situations.

flex: <positive-number>

This value is equivalent to flex: <positive-number> 1 0%. This value makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

• flex-direction

  flex-direction: row | row-reverse | column | column-reverse

  控制顯示的方向

• flex-wrap

  flex-wrap: nowrap | wrap | wrap-reverse

  控制是否多行顯示

綜合體 flex-flow: <'flex-direction'> <'flex-wrap'>

• justify-content

  justify-content: flex-start | flex-end | center | space-between | space-around

主軸對齊方式：指定伸縮項目沿主軸對齊方式 （水平方向）

• align-items: flex-start | flex-end | center | baseline | stretch

  align-items: flex-start | flex-end | center | baseline | stretch

  側軸對齊方式：指定伸縮項目沿着側軸對齊方式  (垂直方向)

• align-content

  align-content: flex-start | flex-end | center | space-between | space-around | stretch;

當伸縮容器的側軸還有多餘空間時，align-content屬性能夠用來調準伸縮行在伸縮容器裏的對齊方式，這與調準伸縮項目在主軸上對齊方式的justify-content屬性相似。

請注意本屬性在只有一行的伸縮容器上沒有效果。只有多行的伸縮容器纔會在側軸上有多餘的空間以供對齊，由於僅包含一行的伸縮容器中，惟一的一行會自動伸展填充所有的空間。

• align-self

  align-self: auto | flex-start | flex-end | center | baseline | stretch

  控制單個條目的樣式佈局

＋ order 控制顯示的順序