17、flexbox弹性盒模型_display:felx,flex-direction:column,felx-wrap:wrap,-CSDN博客

本文链接：https://blog.csdn.net/qq_46230474/article/details/104868126

flexbox弹性盒模型

给父级添加flex

display: flex;

换行 flex-wrap: wrap;

flex-direction: ; 元素主轴的方向，默认值row，从左到右

row-reverse 从右到左

column从上到下

column-reverse 从下到上

flex-direction:column-reverse

主轴方向对齐方式 justify-content: space-around;

交叉轴对齐方式 align-items: flex-start;

换行之后交叉轴方向排布；默认值stretch，剩下的区域会被等分

align-content: center;

等比例计算，等比例缩放

 <style>
        .fa{
            width: 400px;
            height: 400px;
            background-color: aqua;
            /* 给父级添加flex */
            display: flex;
            /* 换行 */
            flex-wrap: wrap;
            /* flex-direction: ; 元素主轴的方向，默认值row，从左到右  */
            /* row-reverse 从右到左 */
            /* column从上到下 */
            /* column-reverse 从下到上 */
            /* flex-direction:column-reverse; */
            /* 主轴方向对齐方式 */
            justify-content: space-around;

            /* 交叉轴对齐方式 */
            align-items: flex-start;

            /* 换行之后交叉轴方向排布；默认值stretch，剩下的区域会被等分 */
            align-content: center;
        }
        .fa>div{
            width: 100px;
            height: 100px;
        }
        .son1{
            background-color: blanchedalmond;
        }
        .son2{
            background-color: blueviolet;
        }
        .son3{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
        
    </div>
</body>
</html>

弹性增长因子flex-grow 要给在子集才起作用给父级是不可以的

弹性增长因子值越大增长得越大

flex-grow: ;

<style>
        .fa{
            width: 400px;
            height: 400px;
            display: flex;
            background-color: darkblue;
        }
        .fa>div{
            width: 50px;
            height: 100px;

        }
        .son1{
            background-color: brown;
            /* 弹性增长因子 值越大增长得越大*/
            /* flex-grow: 1; */
        }
        .son2{
            background-color: burlywood;
            /* flex-grow: 2; */
        }
        .son3{
            background-color: chartreuse;
            /* flex-grow: 3; */
        }
        .son4{
            background-color: cornflowerblue;
            /* flex-grow: 4; */
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
        <div class="son4"></div>
    </div>

弹性缩放因子 flex-shrink 要给在子集才起作用给父级是不可以的**

值越大缩的越多

 <style>
        .fa{
            width: 400px;
            height: 400px;
            display: flex;
            background-color: darkblue;
        }
        .fa>div{
            width: 150px;
            height: 100px;

        }
        .son1{
            background-color: brown;
            /* flex-shrink （弹性缩放因子) 值越大就缩的越多 */
            flex-shrink: 1;
        }
        .son2{
            background-color: burlywood;
            flex-shrink: 2;
        }
        .son3{
            background-color: chartreuse;
            flex-shrink: 3;
        }
        .son4{
            background-color: cornflowerblue;
            flex-shrink: 5;
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
        <div class="son4"></div>
    </div>
</body>

弹性盒子内的子元素的大小属性 Flex：属性

虽然值是数字，但是要尽量避免去使用数字设置，因为浏览器要进行计算

auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
flex: flex-grow flex-shrink flex-basis;
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

 <style>
        .fa{
            width: 400px;
            height: 400px;
            display: flex;
            background-color: darkblue;
        }
        .fa>div{
            width: 50px;
            height: 100px;

        }
        .son1{
            background-color: brown;
            /* flex:  flex-grow  flex-shrink felx-basis */
            /* 虽然值是数字，但是要尽量避免去使用数字设置 ，因为浏览器要进行计算 */
            /* auto：1 1 auto */
            /* initial: 计算值为 0 1 auto */
            /* none：计算值为 0 0 auto */
            /* inherit：从父元素继承 */

            flex:auto ;
        }
        .son2{
            background-color: burlywood;
            flex: initial;
        }
        .son3{
            background-color: chartreuse;
             flex:initial ;
        }
        .son4{
            background-color: cornflowerblue;
            flex: none;
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
        <div class="son4"></div>
    </div>
</body>

定义项目排序顺序order

  <style>
        .fa{
            width: 400px;
            height: 400px;
            display: flex;
            background-color: darkblue;
        }
        .fa>div{
            width: 50px;
            height: 100px;

        }
        .son1{
            background-color: brown;
            /* 定义项目排序顺序 */
            order: 1;
          
        }
        .son2{
            background-color: burlywood;
           order: 3;
        }
        .son3{
            background-color: chartreuse;
             order: 4;
        }
        .son4{
            background-color: cornflowerblue;
            order: 2;
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
        <div class="son4">4</div>
    </div>
</body>

弹性盒子内的单个子元素在纵轴的顺序 align-self属性

auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。