flex 常见属相 及 实现垂直水平居中
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>.
相关推荐
zhanghaibing00 2020-05-31
yuanye0 2020-05-20
葉無聞 2020-05-11
myloveqiqi 2020-05-02
容数据服务集结号 2020-03-01
wangjie 2020-02-12
wwwxuewen 2020-01-20
e度空间 2020-01-12
akcsdno 2019-12-26
MaureenChen 2019-12-01
随智阔 2014-01-13
jiedinghui 2019-11-10
somboy 2019-11-10
waterv 2019-11-09
wangjie 2019-11-04
ThikHome 2019-09-24
红壶吃猬队 2019-09-08
mokingone 2018-03-09