開發工具與關鍵技術：html、flex那麼什麼是flex彈性布局呢？flex彈性布局就是可以實現通過一整套響應靈活的實用程式，快速管理柵格的列、導航、元件等的布局、對齊和大小。通過進一度的定義css，還可以實現更複雜的展示樣式。
3.傳統的布局方式基於盒模型，利用display，position和float的屬性去設計網頁 ，只不過使用傳統的方法很麻煩的，很消耗時間。如果會彈性布局就簡單很多了，但是要注意的是如果設定了彈性布局，那麼在後面的**中的float、clear和vertical-align的屬性將失效。我們可以通過display的直屬內部元素轉化為flex屬性，就例如下面就是乙個最簡單的例子。
我是個有彈性的盒子1
我是個有彈性的盒子2
這個例子中，兩個盒子的寬度給了寬度，可是在寬度不夠的情況下也能自適應寬度和高度的。
4. flex的屬性其中有：
（1）flex-wrap屬性：nowrap(不換行)、wrap (換行，第一行在上方、 wrap-reverse（換行，第一行在下方）;
（2）flex-direction屬性：row(主軸為水平方向，起點在左端)、row-reverse（主軸為水平方向，起點在右端）、column（主軸為垂直方向，起點在上沿）、column-reverse（主軸為垂直方向，起點在下沿）
（3）justify-content屬性: flex-start(左對齊)、flex-end(右對齊)、center(居中)、space-between(兩端對齊，專案之間的間隔都相等)、space-around(每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍);
（4） align-items屬性：flex-start(交叉軸起點對齊)、flex-end(交叉軸終點對齊)、center(交叉軸中點對齊)、baseline(專案的第一行文字的基線對齊)、stretch（預設值）：(如果專案未設定高度或設為auto，將佔滿整個容器的高度)、
（5）align-content屬性(注意這個屬性是要有多根軸線才能夠起作用的，一根軸線是起不了作用的)：flex-start(與交叉軸的起點對齊)、flex-end(與交叉軸的終點對齊)、center(與交叉軸的中點對齊)、space-between(與交叉軸兩端對齊，軸線之間的間隔平均分布)、space-around(每根軸線兩側的間隔相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍);stretch(軸線沾滿整個交叉軸)
（6）有時候再做專案的時候，在某乙個模組裡面要對其樣式順序進行排列的，可以用到order屬性，它是能夠讓模組有乙個先後順序的排列；如果某個模組要等比例的放大或者縮小就可以用到flex-grow屬性，既然能夠放大了就會可能遇到有乙個模組不夠空間放大模組的情況，這樣可以設定flex-shrink屬性，它可以自適應剩下的空間。
5. 使用flex彈性布局，能夠讓自己的網頁排版的更好，不會因為螢幕寬度發生變化後，樣式也跟著變化！！！
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...
Flex布局（彈性布局）
flex是flex box的縮寫，即彈性布局。任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局。webkit核心的瀏覽器，必須加上 webkit字首。box.box.box注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...
Flex布局 彈性布局
1.flex direction flex direction屬性決定主軸的方向 即專案的排列方向 flex direction row row reverse column column reverse 2.flex wrap 預設情況下，專案都排在一條線 又稱 軸線 上。flex wrap屬性定...