CSS3 Flex 弹性模型布局用法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/running8/article/details/82047782

https://caniuse.com/    查看 css某个属性，兼容情况
css3  flex布局

盒子模型

 box-sizing:border-box;
    默认: content-box    平时普通盒子模型，padding，border， 盒子会变大,向外扩展
    border-box    盒子模型，padding,border, 盒子模型不变大,向内扩展
   calc(公式)    注意:  + - *  /
    calc(100px-20px)    ×
    calc(100px - 20px)    √
=====================================

flex布局
父级:
    display:flex;

    添加浏览器前缀:  -webkit-   ,真实工作，postCss插件

    display:-webkit-box;

    * 如果用了弹性布局，子元素，不需要浮动 float

父级身上其他属性:
    justify-content:    子元素水平排列方式
        center    居中    √
        space-between    两端对齐    √
        space-around        子元素分散排列    √
        flex-start    居左
        flex-end    居右
    align-items:        子元素垂直排列
        center        居中
        flex-end    底部
        flex-start    开始
        align-content        多行的时候，垂直排列
        center        居中
        ..
    flex-direction:        排列方式
        row    横向排列
        row-reverse    横向翻过排列
        column    纵向排列
        column-reverse    纵向翻过排列
    flex-wrap:    子元素是否在一行显示
        nowrap    不换行
        wrap        换行

    flex-flow: <flex-direction> <flex-wrap>    

================================================

子级身上属性:
    flex:1        1 指的是一个系数    √

扫描二维码关注公众号，回复： 4524183 查看本文章

    * 子元素在划分父元素宽度，先刨除固定宽度

    align-self    其实就是用来覆盖父级 align-items  垂直排列
        

    flex-grow: 1;    定义子元素放大比例

    order:    规定子元素顺序，排序
        数值越小，越靠前
        默认值0