美文网首页
flex布局

flex布局

作者: 乔乔_老师 | 来源:发表于2019-03-14 10:38 被阅读0次

    一、基本概念

    容器:如果给一个元素添加display:flex属性,称为这是一个容器
    项目:容器里面的直接子元素称为项目
    主轴:默认页面从左向右排列
    交叉轴:与主轴垂直的轴,默认是从上向下

    二、容器的属性

    flex-direction:用来设置主轴方向的

    flex-direction:row(默认值)|column(列)|row-reverse|column-reverse
    

    flex-wrap:控制是否要换行

    flex-wrap:nowrap(默认值,不换行)|wrap(换行)|wrap-reverse
    

    flex-flow:是flex-direction和flex-wrap的简写

    flex-flow:row wrap;
    

    just-content:默认的对齐方式

    just-content:flex-start 默认值(左对齐) 
                        flex-end  右对齐
                        center   居中对齐
                        space-between 两端对齐,项目之间的间隔都相等
                        space-around 每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍,定义了项目与主轴的对齐方式  
    

    三、项目的属性

    align-self:允许单个项目与其他项目不一样的对齐方式,可覆盖align-item属性

    align-self:auto(默认值),元素继承了它的父容器的align-item属性。如果没有赴日那个气则为"strentch"。
    align-self:stretch:元素被拉伸一适应容器
    align-self:center  元素位于容器的中心
    flex-start:元素位于容器的开头
    flex-end 元素位于容器的结尾
    baseline:元素位于容器的基线上
    

    flex-grow:设置或检索弹性盒的扩展比率。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间

    flex-grow:0(默认值为0),可设置不同的数字
    结论:如果一个项目的flex-grow为0,则它的宽度不会放大
    项目的flex-grow越大,说明它在放大后会得到更多的空间
    项目的flex-grow越小,说明它在放大后,会得到更小的空间
    如果所有项目的flex-grow值都一样,他们会等分多余的空间
    

    flex-shirnk:设置或检索弹性盒的收缩比率(根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。)

    flex-shrink: <number>;默认值为1
    结论:
    1.项目默认会被缩小(空间不够),flex-shrink默认值为1
    2.flex-shrink越大,被压缩越多
    3.flex-shrink越小,被压缩越小,如果flex-shrink值为0,不会被压缩
    

    四、

    flex-basis和width的区别

    1.当指定一个flex-basis值的时候,盒子的宽度属性是被忽略的
    2.使用max-width和min-width会限制flex-basis的值
    3.items的宽度关键在用最终的flex-basis。最佳的方法是只使用flex-basis而不是width或height属性。特别是Safari 10之前的版本的浏览器有一个flexbox bug,在给items应用flex-shrink属性的时候,浏览器会使用height属性而不是flex-basis。
    

    五、实际应用

    想要使用flex布局只需要在父元素下使用属性 display:flex即可,
    父元素下的子元素也需要使用属性 flex:1,这样的话父元素下的每个小类会均分父元素

    <style type="text/css">
            *{
                margin:0;
                padding:0;
                box-sizing: border-box;
            }
            a{
                text-decoration: none;
            }
            ul{
                width:100%;
                height:30px;
                display: flex;//父元素须使用flex
                border:1px solid #000;
            }
            li{
                list-style: none;
                flex:1;//子元素设置为1,只要设置为均等值那么子元素会均分父元素
            }
        </style>
    </head>
    <body>
        <ul>
            <li>首页</li>
            <li>详情页</li>
            <li>联系我们</li>
        </ul>
    </body>
    

    相关文章

      网友评论

          本文标题:flex布局

          本文链接:https://www.haomeiwen.com/subject/tnnfmqtx.html