flex 常见属相 及 实现垂直水平居中
Posted crazycode2
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
.
以上是关于flex 常见属相 及 实现垂直水平居中的主要内容，如果未能解决你的问题，请参考以下文章