【css】彈性盒模型
阿新 • • 發佈：2018-05-08
方法 wid 16px AC top 排列 items fcc position
彈性盒模型flexBox
彈性盒模型是c3的一種新的布局模式
它是指一種當頁面需要適應不同屏幕大小以及設備類型時，確保元素有恰當行為的布局方式。
引入彈性盒模型布局的目的是提供一種更有效的方法來對一個容器中的子元素進行排列、對齊和分配空白空間。
兼容性
IE11
彈性盒模型內容
彈性盒模型由彈性容器（flex container）和彈性子 元素（flex item）組成
將父容器設置display:flex轉換為彈性容器
介紹幾個常用方法：
flex-direction:
row:橫向從左到右排列，默認
row-reverse:橫向從右到左排列（最後一項在最前面）
column:
縱向排列column-reverse:反轉縱向排列（最後一項排在最上面）
justify-content:
flex-start:起始點對齊（左對齊）
flex-end:終止點對齊（右對齊）
center:居中對齊
space-around:四周環繞
space-between:兩端對齊
讓盒子水平垂直居中的方法：
1 使用彈性盒模型 display:flex + justify-content:center + align-items:center
<style> .box{ width: 400px; height: 300px; display: flex; 讓盒子變成彈性盒模型 justify-content: center; 居中 align-items: center; 居中 background-color: pink; } .child{ width: 150px; height: 150px; background-color: skyblue; } </style> </head> <body> <div class="box"> <div class="child"></div> </div>
2 使用position:absolute + transform:translate
.box{ width: 400px; height: 300px; position: relative; background-color: pink; } .child{ width: 150px; height: 150px; background-color: skyblue; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%) } </style> </head> <body> <div class="box"> <div class="child"></div> </div>
【css】彈性盒模型