flex 布局父項常見屬性:
flex-direction: // 設置主軸的方向 row -- 默認值從左到右 row-reverse -- 從右到左 column -- 從上到下 column-reverse -- 從下到上 justify-content: // 設置主軸上的子元素排列方式 flex-start -- 默認值從頭部開始 如果主軸是x軸，則從左到右 flex-end -- 從尾部開始排列 center -- 在主軸居中對齊(如果主軸是x軸則 水平居中) space-around -- 平分剩余空間 space-between -- 先兩邊貼邊 再平分剩余空間(重要) flex-wrap: // 設置子元素是否換行 nowrap -- 默認值，不換行，如果裝不下，會縮小子元素的寬度，放到父元素里面 wrap -- 換行 align-items: // 設置側軸上的子元素排列方式(單行) flex-start -- 默認值 從上到下 flex-end -- 從下到上 center -- 擠在一起居中(垂直居中) stretch -- 拉伸，此時子元素不要給高度 align-content: // 設置側軸上的子元素的排列方式(多行)，只能用於子元素換行的情況 flex-start -- 默認值在側軸的頭部開始排列 flex-end -- 在側軸的尾部開始排列 center -- 在側軸中間顯示 space-around -- 子項在側軸平分剩余空間 space-between -- 子項在側軸先分布在兩頭，再平分剩余空間 stretch -- 設置子項元素高度平分父元素高度 flex-flow: // 復合屬性，相當於同時設置了flex-direction和flex-wrap 例如: flex-flow: row wrap;
flex 布局子項常見屬性:
flex: // 子項目占的份數 <number> -- 默認值0 align-self: // 控制子項自己在側軸的排列方式(允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性) auto -- 默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch order: // 定義子項的排列順序(前后順序),數值越小，排列越靠前，默認為0
實現垂直水平居中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
height: 500px;
width: 500px;
border: 1px solid #eee;
display: flex;
/*主軸居中*/
justify-content: center;
/*側軸居中*/
align-items: center;
}
div span {
width: 100px;
height: 100px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
.