說起關於flex的文章。我覺得啊除了阮一峰老師，再也無人能出其右了，所以這裡也只是聊做記錄。
flex container：元素新增了flex屬性後就變成了flex容器,
axes：flex container的座標軸，分為main axes(主軸)和cross axes（交軸）flex item：父元素一旦新增flex屬性，子元素將直接變成flex子元素，將不再顯示預設布局,而是沿著flex container的主軸順序排列,如果改變主軸方向,則子元素的排列方向也將會改變
屬性簡介
flex-direction:
這個屬性可以改變主軸的方向,子元素沿著主軸排列,所以改變主軸方向將會改變子元素的排列方向
預設情況向子元素沿著主軸排列時,如果所有子元素的總大小超過父元素,則子元素將會被壓縮,該屬性可以改變這種情況,使之在這種情況下換行而不壓縮子元素寬度
flex-flow是flex-direction和flex-wrap的縮寫形式
justify-content
該屬性定義了子元素相對父容器的對齊方式
該屬性定義子元素在交軸上的對齊方式
該屬性定義了多條主軸在交軸上的對齊方式
屬性簡介:
order
值越小越靠接近main start
該屬性定義子元素佔據剩餘空間的比例,數值越大,佔據的比例越大
該屬性定義該子元素相對於交軸的對齊方式
該屬性定義了元素的縮小比例,數值越大,縮小比例越大,0不縮放
flex-basisflex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。(摘自阮一峰部落格原文)
其實當初看了許多遍阮一峰老師關於flex的部落格,但是依舊沒有理解.如今自己整理了一遍,發現了當初理解的誤區,當初認為,flex-direction讓子元素的排序方式改變,但是其flex-directory的作用是讓主軸和交軸交換位置.從這個方向理解便可以真正理解flex在不同方向的布局.
也就是我們不能用x軸y軸來理解flex,而是使用主軸和交軸來理解.
移動端布局 flex布局
flex布局原理flex direction 預設主軸x軸水平向右 y軸垂直向下 屬性值描述row 預設從左到右 row reverse 從右到左 column 從上到下 column reverse 從下到上 justify content 屬性值描述 flex start 預設從頭部開始如果主軸...
Flex移動端布局
目前使用flex布局典型的 有天貓和網易新聞。首先，利用flex的專案不需要對viewport進行縮放，直接 簡單回顧一下flex的屬性 一 設定在容器上的屬性 1 flex direction 屬性決定主軸的方向 即專案的排列方向 2 flex wrap 預設顯示在一條軸線上，如果排不下如何換行。...
flex移動端 布局
在移動端中，一般用flex布局來解決當螢幕適應時出現布局錯亂的現象 步驟 1，在開始階段先開啟flex布局，就是在父盒子上display flex 開啟flex布局 而且flex都是對父元素操作來影響子元素的，這裡的子元素是一級子元素，只能影響一級子元素，而且是 所有的一級子元素，其中有幾個重要且常...