flex的全稱是flexible box，意為彈性布局，用來為盒模型提供最大的靈活性。flex包含的屬性有很多，每個屬性又包含了許多不同意義的屬性值···然而在實際開發中，能被我們臨幸的可能也只是那麼幾個：
複製**
任何乙個容器都可以通過設定 display
為 flex/inline-flex
將其指定為flex布局。對於設定了flex布局的容器，子元素的 float、clear、vertical-align
屬性將失效；但是，如果對這些子元素設定 position
定位，那麼flex屬性的作用會失效，一張圖說明他們的作用權重：
採用flex屬性布局的元素稱為
flex容器，而其所有的子元素稱為
flex專案。容器預設存在兩根軸線：水平的
主軸（main axis）和垂直的
交叉軸（cross axis）。軸的起始和結束為止分別稱作main/cross start和main/cross end。專案預設沿主軸排列，專案佔據的軸的空間叫main/cross size。詳見下圖：
flex布局元素分為flex容器和flex專案，因而有flex容器屬性和flex專案屬性的區分。1. flex的容器屬性包括：
1.1 flex-direction
該屬性定義了主軸的方向，即專案的排列方向。value的取值包括：row | row-reverse | column | column-reverse。其中 row
是預設值，表示水平方向排列（起點在左端）; column
表示垂直方向（起點在頂端）;帶 -reverse
的值則表示反方向。用法及其效果圖如下：
示例**：
class="flex-box">
class="flex-item">item1div>
class="flex-item">item2div>
class="flex-item">item3div>
div>
複製**
.flex-box
.flex-item
複製**
1.2 flex-wrap屬性
該屬性定義專案是否換行以及如何換行。在預設情況下，專案都排在一條軸線上，如果一條軸線排不下，瀏覽器就根據這個屬性的值對專案排列做相應調整。value的取值包括：nowrap | wrap | wrap-reverse，其中，nowrap
是預設值，不換行。用法及其效果圖如下：示例**：
.flex-box
複製**
說明：
wrap
表示換行，第一行在上方。使用
row-reverse
換行時，第一行在下方，亦即圖中item6會出現在第一行。
1.3 flex-flow屬性
該屬性是 flex-direction
和 flex-wrap
的簡寫形式，預設值為row nowrap
。使用方式如下：示例**：:
.flex-box
複製**
該屬性定義了專案在主軸（main axis）上的對齊方式，value的取值包括：
用法及效果如下：
說明：這些屬性對專案的作用是根據主軸的方向不同而改變的，如果將
direction
設定為
column
，那麼這些效果則表現在縱向。
1.5 align-items屬性
該屬性定義專案在交叉軸（cross axis）上的對齊方式。value的取值包括：
效果如下：
1.6 align-content屬性
該屬性定義了多個軸線的對齊方式。value的取值包括：
咦！怎麼都這麼熟悉呢？對比原來發現這個屬性的取值是跟前兩個屬性的取值有很大相似的。但它們其的效果還是有區別的。看圖：
對比下align-items裡面的center，是不是發現不同呢？
每一行專案之間的距離變小了！是變小了嗎？其實是
軸線居中了！在這裡，因為專案的換行，形成了多條軸線，而align-content就是作用在軸線上的，所以它會讓每一條軸線居中。而align-items是將所有的專案看做乙個整體，即使專案換行，也是將整個專案看做是一條軸線，最後將這個整體居中。
1. flex的專案屬性包括：
1.1 order屬性
該屬性定義專案的排列順序，數值越小，排列越靠前，預設值為0。
示例**：
class="flex-box">
class="flex-item">item1div>
class="flex-item">item2div>
class="flex-item">item3div>
div>
複製**
.flex-box
.flex-item
div:first-child
div:nth-child(2)
div:last-child
複製**
說明：在本例中沒有設定flex-direction的屬性，那麼其值預設是row，你也可以嘗試將其設定成column，那麼flex專案則會根據order縱向排列。
1.2 flex-grow屬性
該屬性定義專案的放大比例，預設為0，即不作任何的放大。flex容器下的專案是根據這個值的比例對容器的剩餘空間進行瓜分的。使用效果如下：
說明：在使用這個屬性的時候，一般也最好不要對flex專案設定寬度/高度，否則會影響flex容器的比例分配。
1.3 flex-shrink屬性
該屬性定義了專案的縮小比例，預設為1，即專案縮小。使用效果如下：
說明：這裡flex容器的寬度設定成600px，flex專案的寬度均為300px，margin:10px；在為item1分配完空間後，剩下的空間被後面兩個專案按比例縮小分配。
1.4 flex-basis屬性
該屬性定義了在分配多餘空間之前，專案佔據的主軸空間(main size)。瀏覽器根據這個屬性，計算主軸(main asix)是否有多餘空間。它的預設值為auto，即專案的原本大小。它換可以設定為跟width屬性一樣的值（eg: 100px），即專案佔據固定空間（容器寬度不夠自動被壓縮）。使用效果如下：
說明：該屬性的用法就像是使用width(flex-direction:row; 的時候)或heigh(direction為column的時候)屬性那樣，在容器寬度不夠的時候，它會按照flex-shrink屬性的預設值壓縮專案。
1.5 flex屬性
該屬性是前三個屬性：flex-grow、flex-shrink、flex-basis
的簡寫形式。預設值為0 1 auto，即不放大，自動縮小，後面兩個屬性值是可選項。該屬性有兩個快捷鍵值：auto(0 1 auto)，none（0 0 auto）。建議優先使用這個屬性，而不是單獨寫三個分離的屬性。
1.6 align-self屬性
該屬性允許單個專案有與其他專案不一樣的對齊方式。可覆蓋作用在flex容器上的align-items屬性。預設值為auto，表示繼承父元素align-items屬性，如果沒有父元素，則等同stretch。value的取值包括：auto、flex-start、flex-end、end、baseline、stretch
。該屬性的取值除了auto之外，其他屬性作用在該專案上的效果跟align-items作用在專案父元素（flex容器）上的效果是一樣的，唯一不同的是：align-self僅對使用了該屬性的專案產生效果，align-items是對所有的專案產生效果。
天下武功，唯快不破。flex的優秀在於它的快捷，開發過程中使用flex布局可以輕鬆地達到你想要的布局效果，方便快捷。嘗試它並愛上它～
一起來玩了下 InfluxDb 吧
我比較懶，能用簡單的辦法搞定，就不喜歡習慣用開源的東西，因為覺得自己學習的也比較慢，但是不得不說這種快速上手乙個陌生產品的能力很重要，我很缺乏這種能力。我們提供乙個長連線服務，占用埠8080，我最初的方式通過 shell 指令碼做乙個簡單的監控，資料都直接寫在了日誌檔案裡。while dosleep...
一起來挑戰Google code jam 一
給你兩個陣列va和vb，兩個陣列的元素對應相乘，然後求和，要求和最小，在陣列元素順序可以調整的時候。這裡主要用到乙個不等式，x和y兩個公升序的陣列，那麼sum x i y i sum x i y n i void fun printf d n res 題意是給你一排p個牢房，最初的時候每個牢房中有乙...
一起來學習Ant Design
當然，都屬於webpack中的基礎知識，但是套上了atool build這樣乙個殼子，又有點小懵。還好不是很難，嘗試後，很快搞定了，順手也總結一下吧！一 安裝ant init 1 npm install antd init g 二 建立目錄 1 mkdir antd demo cd antd dem...