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;
500px;
border: 1px solid #eee;
display: flex;
/*主轴居中*/
justify-content: center;
/*侧轴居中*/
align-items: center;
}
div span {
100px;
height: 100px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
.