flex 常见属相 及 实现垂直水平居中

wangjie 2020-01-12

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>

.

相关推荐

wcssdu / 0评论 2017-03-13