主要介紹下彈性布局的常用的一些屬性
當乙個盒子設定為display:flex的時候,盒子會變為乙個彈性盒子,盒子內部的子元素會預設沿著主軸方向排布,此時會引出主軸和側軸的概念。
主軸:預設水平向右(類似於x軸)
側軸:與主軸垂直的就是側軸,預設垂直向下(類似於y軸)
彈性盒子的主軸方向預設水平向右,但是可以通過flex-direction這個屬性改變主軸的方向,如下圖:
取值效果（主軸方向）
row水平向右（預設）
row-reverse
水平向左
column
垂直向下
column-reverse
垂直向上
取值:
flex-start：向主軸的開始位置對齊
flex-end：向主軸的結束位置對齊
center：居中對齊
space-around：讓空白環繞盒子顯示
space-between：讓空白只在盒子之間顯示
取值
flex-start：向側軸的開始位置對齊
flex-end：向側軸的結束位置對齊
center：居中對齊
stretch：讓子盒子的高度拉伸顯示（預設值）
當盒子內的子元素沒有高度時,會預設拉伸
flex布局中，預設是單行顯示的，如果子元素的寬度之和超出了父元素的寬度，此時子盒子會預設壓縮顯示。
此時，如果需要設定子元素換行顯示(需加在父元素身上)，可以使用屬性flex-wrap
屬性值效果nowrap
不換行（預設值）
wrap
換行之前align-items只是針對於單行元素的側軸對齊方式。
如果需要設定多行元素的側軸對齊方式，此時需要使用align-content才行
取值（和align-items差不多）：取值
效果flex-start
向側軸的開始位置對齊
flex-end
向側軸的結束位置對齊
center
居中對齊
stretch
子元素高度拉伸顯示（只有沒設高才有效果）
space-around
空白環繞盒子顯示
space-between
空白只在盒子之間顯示
作用：按照份數分配父元素主軸（寬度）的剩餘空間
優先分配具體的寬度，剩餘的空間再按照份數分配。**：
flex:份數;通過flex屬性可以很輕鬆的完成聖杯布局。作用：設定彈性盒子中子元素的排列順序，數值越小，排列靠前，預設是0**：order：數字;
取值（和align-items取值一樣）：取值
效果flex-start
向側軸的開始位置對齊（預設相當於頂部對齊）
flex-end
向側軸的結束位置對齊（預設相當於底部對齊）
center
居中對齊
stretch
子元素高度拉伸顯示（只有沒設高才有效果）
彈性布局（伸縮布局）
彈性布局 伸縮布局 僅僅是網頁布局中的一種新的解決方案。應用場景 當頁面 現多個盒子一行顯示時，可以考慮使用彈性布局 如 兩端對齊，中間自適應居中，兩行屬性即可實現 display flex justify content space between 問 為什麼彈性盒子中的元素會一行顯示？1.在彈性...
布局 Flex伸縮布局
flex是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。採用flex布局的元素，稱為flex容器，簡稱 容器 它的所有子元素自動成為容器成員，成為flex專案，簡稱 專案 總結 通過給父盒子新增flex屬性，來控制子盒子的位...
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...