wrap{
width: 1200px;
height: 200px;
display: flex;
border: 1px solid #000;
或者把容器變為行內元素
wrap{
width: 1200px;
height: 200px;
display: inline-flex;
border: 1px solid #000;
* 彈性布局是給父元素設定display:flex
* 父元素高度不會塌陷
* 父元素稱之為容器 子元素稱之為專案
* 父元素高度不會塌陷 預設子元素 橫向（水平）排列
* 彈性布局是一維布局 主軸：預設水平 交叉軸：預設垂直方向 軸的方向可以改變
* 容器有高度和專案沒有高度時，專案會繼承容器高度
* 容器和專案有高度時，聽專案的高度
* 列表專案寬度之和不超過容器時 就是專案的寬度，超過則進行平分容器的壓縮
#flex-direction 改變軸方向 預設為row
* row 軸開始位置
* row-reverse 顛倒順序 並且在軸的結束位置
* column 垂直方向對齊
* column-reverse 顛倒垂直方向 並且在軸的結束位置
#justify-content 主軸對齊
* flex-start 開始軸開始
* flex-end 結束軸開始
* center 居中對齊 //實現的是垂直對齊！
* space-between 兩端對齊
* space-around 分布環繞
#flex-wrap 是否換行
* wrap 換行
* wrap-reverse 顛倒換行
* nowrap 不換行
### flex-flow 是flex-direction 和flex-wrap的簡寫 flex-flow:row wrap
#align-items 交叉軸
* flex-start
* flex-end
* center //水平居中
* baseline 文字基線對齊
#align-content 多軸對齊
* stretch
* flex-start 開頭
* flex-end 結尾
* center 中心
* space-between 環繞
* space-around 間隙一樣
#order 排序預設值都是0值 越小越在前面
* .item:nth-child(1){
order: 0 ;
#放大比例flex-grow 預設值是0 意思是有剩餘空間也不放大
* 設定1 佔剩餘空間
* 幾個設定1 一起平方剩餘空間
* .item:nth-child(2){
flex-grow: 1;
#flex-shrink 預設值是 0 設定0不縮小
* (縮小比列 剩餘空間不足時預設縮小)
* .item:nth-child(1){
flex-shrink: 0;
#基準值 flex-basis
.item:nth-child(2){
align-self: flex-end;
align-self: flex-start;
align-self: center;
### align-self 單個專案在交叉軸上的對齊方式
Android中布局詳細講解
對view進行布局的目的是計算出view的尺寸以及在其父控制項中的位置，具體來說就是計算出view的四條邊界分別到其父控制項左邊界 上邊界的距離，即計算view的left top right bottom的值。layout 方法是view布局的入口，其原始碼如下所示 public void layo...
超詳細的Flex布局講解
應用在 flex items上的 css 屬性 flex布局是目前web開發中使用最多的布局方案 兩個重要的概念 開啟flex布局的方法 flex布局的相容性 注意 預設情況下felx items 僅在一行中顯示，若是設定flex wrap設定為多行，那麼，當flex items 到達main en...
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...