Flex布局相关知识M

最新推荐文章于 2024-11-12 11:19:19 发布

Distance^o^

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量171

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/MDistance/article/details/108994279

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

核心概念

容器 & 项目
主轴 & 侧轴

flex 容器上的属性

flex-direction : 控制了主轴是哪一根;控制侧轴是哪一根;控制主轴的方向
    row : 主轴是x轴 方向是正方向 侧轴是y轴
    row-reverse: 主轴是x轴 方向是反方向 侧轴是y轴
    column: 主轴是y轴 方向是正方向 侧轴是x轴
    column-reverse: 主轴是y轴 方向是反方向 侧轴是x轴
flex-wrap : 控制了侧轴的方向
    no-wrap 侧轴不产生堆砌  侧轴的方向是正方向
    wrap    侧轴产生堆砌  侧轴的方向是正方向
    wrap-reverse  侧轴产生堆砌 侧轴的方向是反方向
flex-flow : 前面两个属性的简写形式


justify-content : 分配主轴的富余空间               
align-items     : 分配侧轴的富余空间的(以item为单位 优先级比较低 可是一直会启作用)
align-content   : 分配侧轴的富余空间的(以content为单位 优先级比较高 可是只在侧轴产生堆砌的时候才起作用)

flex 项目上的属性

order : order越大;项目越往后排(order 可以使用负值)
align-self : 决定单个项目 侧轴上的富余空间

弹性空间管理
    flex-shrink: 收缩因子 开发的时候尽量要避免使用到这个属性!!!(默认值 1)
    flex-grow : 伸展因子
    flex-basis: 分配空间时,每个元素的基准值!!
    flex      : 用来实现等分 等比例布局

<!-- 
    Flex的两组核心概念 : 容器与项目 主轴与侧轴
    一条核心规则 : 项目默认情况下永远排列在主轴的正方向上

    容器: wrap
    项目: item

    flex容器上的属性:
            flex-direction 
            flex-wrap      
            flex-flow      
            
            justify-content               
            align-items
            align-content                                  
-->

    <!-- 
    Flex的两组核心概念 : 容器与项目 主轴与侧轴
    一条核心规则 : 项目默认情况下永远排列在主轴的正方向上

    容器: wrap
    项目: item

    flex容器上的属性:
            flex-direction 
            flex-wrap      
            flex-flow      
            justify-content
            align-items
            align-content

    flex项目上的属性:
            order : order越大元素越往后靠(order可以写负值)
            align-self: 单独控制一个项目的侧轴上的富裕空间


    flex侧轴的富裕空间管理
            align-items: 优先级最低
            align-self:  优先级中等
            align-content: 优先级最高(只有在flex-wrap不为no-wrap时才起作用)

-->

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 
        flex项目上的属性:
                order : order越大元素越往后靠(order可以写负值)
                align-self: 单独控制一个项目的侧轴上的富裕空间
                flex-shrink
                flex-grow : 伸展因子
                flex-basis: 分配空间时,每个元素的基准值!!
                flex      : 用来实现等分 等比例布局

                富裕空间管理 是不会给项目去分配空间的;它只会控制富裕空间的位置
                弹性空间管理 按比例将主轴的富裕空间分配到项目上

                flex布局不是万能的!!! 它最大的优势在于处理等分 等比例布局
    -->
    <style>
        #wrap{
            width: 400px;
            height: 400px;
            border: 1px solid;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;

            display: flex;
        }
        #wrap .item{
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: pink;
            border: 1px solid;
            box-sizing: border-box;

            /*flex-grow:1 ;
            flex-basis: 0%;*/
            /*flex:1  !*等分布局的*!*/
            /*flex-basis: 0%*/
        }

        #wrap .item:nth-child(1){
            flex: 1;
            /*flex-grow: 1;
            flex-basis: 0%;*/
        }
        #wrap .item:nth-child(2){
            flex: 2;
        }
        #wrap .item:nth-child(3){
            flex: 3;
        }
        #wrap .item:nth-child(4){
            flex: 4;
        }
        #wrap .item:nth-child(5){
            flex: 5;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="item">1</div>
        <div class="item">22</div>
        <div class="item">3333</div>
        <div class="item">44444</div>
        <div class="item">555555</div>
    </div>
</body>
</html>

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--
        flex项目上的属性:
                order : order越大元素越往后靠(order可以写负值)
                align-self: 单独控制一个项目的侧轴上的富裕空间
                flex-shrink: 收缩因子 开发的时候尽量要避免使用到这个属性!!!(默认值 1)
                flex-grow : 伸展因子
                flex-basis: 分配空间时,每个元素的基准值!!
                flex      : 用来实现等分 等比例布局

                富裕空间管理 是不会给项目去分配空间的;它只会控制富裕空间的位置
                弹性空间管理 按比例将主轴的富裕空间分配到项目上

                flex布局不是万能的!!! 它最大的优势在于处理等分 等比例布局
    -->
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #wrap{
            width: 110px;
            height: 400px;
            border: 1px solid;
            display:flex;
        }
        .item{
            width: 50px;
            height: 50px;
            background: pink;
            text-align: center;
            flex-shrink: 1;
        }
        .item:nth-child(1){
            width: 200px;
        }

        /*溢出空间:  110 - (4*50 + 200)  = -290px*/
        /*一个flex-shrink要砍掉的值: -290 / 5 = -58*/


        /*
            1.计算收缩因子与基准值乘的总和
                1*200 + 1*4*50 = 400
            2.计算收缩因数
             收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和
                1*200 / 400 = 0.5;
                1* 50 / 400 = 0.125;
            3.移除空间的计算
             移除空间= 项目收缩因数 x 负溢出的空间
                0.5 * -290 = -145
                0.125 * -290 = -36.25
       */


        /*
        flex使用的最佳实践:
                    等分布局
                    等比例布局

                    尽量少使用flex-shrink
                        在设计的时候 让容器的大小高于项目的总和; 这时flex-shrink是没有用的
        */

        /*程序员的核心能力: 解决bug的效率*/
    </style>
</head>
<body>
<div id="wrap">
    <div class="item">1</div>  <!--55-->
    <div class="item">2</div>  <!--13.75-->
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
</body>
</html>