flex常用属性

Posted 2021-03-06 moppet

链接：https://www.jianshu.com/p/a87e48052fad
来源：简书

---

 

不同浏览器兼容性问题解决：添加浏览器前缀：-webkit-
实际工作：安装插件postCss插件 -》不需要手动加前缀

父级身上的属性：

   display: flex;
    justify-content:            子元素水平排列方式
                    center                   居中         √
                    space-between    两端对齐   √ 
                    space-around      子元素拉伸分布   √ 
                    flex-start               居左
                    flex-end                居右
    align-items:                  子元素垂直排列      
                      center                  居中         √ 
                     flex-start              开始
                     flex-end               底部
   align-content:                  多行的时候，垂直排列
                      center                 居中     
   flex-direction:               排列方式
                      row                     横向排列
                      row-reverse        横向翻过排列
                      column                纵向排列
                      column-reverse   纵向翻过排列
   flex-wrap:                       子元素是否在一行显示
                      no-wrap              不换行
                       wrap                   换行
  flex-flow: <flex-direction> <flex-wrap>

 

子级身上属性：

 

   flex: 1;                             1 指的是一个系数
        *子元素在划分父元素宽度的时候，先刨除固定宽度
   flex-grow:1;                     定义子元素放大比例 0默认值
   align-self:                      其实就是用来覆盖父级align-items 垂直排列
                     center                  居中         √ 
                     flex-start              开始
                     flex-end               底部
   order:                               规定子元素顺序，排序(数值越小，越靠前)
                       默认值：0

******************************************华丽分割线******************************************
justify-content属性 水平属性

image.png

align-items属性 垂直属性