【超赞弹性布局2】

粉色水杯

已于 2022-03-26 15:51:22 修改

阅读量87

点赞数 1

文章标签： html5

于 2022-03-23 17:08:12 首次发布

本文链接：https://blog.csdn.net/linxuanasd/article/details/123688131

版权

上一篇介绍了开启弹性布局，justify-content，align-items

下面介绍 flex-direction

1.flex-direction

按行水平排序

flex-direction: row;

水平反转

flex-direction: row-reverse;

按列排列同理

flex-direction: column;
flex-direction: column-reverse;

2.flex-warp

前提：改变一下容器宽度

#pink{
            width: 300px;
            height: 400px;
            display: flex;
            /* justify-content:center;
            align-items: center; */
            /* flex-direction: column;
            flex-direction: column-reverse; */
            flex-wrap: nowrap;
            border: 1px solid rebeccapurple;
        }

nowarp:项目总长度大于容器，项目会强行平分容器，不换行

 flex-wrap: wrap;

wrap:会自动换行

以上容器的属性讲解完毕，下面来说一说项目属性

1.order:作用于项目上的属性，数值越小，排列越靠前

 <style>
        #pink{
            width: 600px;
            height: 400px;
            display: flex;
            border: 1px solid rebeccapurple;
        }
        #pink_1{
            width: 100px;
            height: 100px;
            border: 10px solid palevioletred;
            background-color: rgb(211, 167, 167);
            text-align: center;
            line-height: 100px;
        }
        #pink_1:nth-child(1){
            order: 3;
        }
        #pink_1:nth-child(2){
            order: 2;
        }
        #pink_1:nth-child(3){
            order: 1;
        }
        #pink_1:nth-child(4){
            order: 0;
        }
    </style>
</head>
<body>
    <div id="pink">
        <div id="pink_1">粉色水杯1</div>
        <div id="pink_1">粉色水杯2</div>
        <div id="pink_1">粉色水杯3</div>
        <div id="pink_1">粉色水杯4</div>
    </div>
</body>

align-self:假如要单独使其中一个项目居中

 #pink_1:nth-child(3){
            order: 1;
            align-self: center;
        }

2.flex-grow

项目在剩余空间是否放大，将粉色水杯1设置flex-grow：1，其他为0，则1放大。也可以多个放大。

#pink_1:nth-child(1){
            order: 3;
            flex-grow: 1;
        }
        #pink_1:nth-child(2){
            order: 2;
            flex-grow: 0;
        }
        #pink_1:nth-child(3){
            order: 1;
            flex-grow: 0;
        }
        #pink_1:nth-child(4){
            order: 0;
            flex-grow: 0;
        }

3.flex-shrink

默认为1，即在容器空间不足时，项目等比例缩小，但是为0，就不变。

#pink_1:nth-child(1){
            order: 3;
            flex-shrink: 0;
        }

4.flex-basis

用于设置项目宽度，比width的权重高，同时设置，会遵从flex-basis的数值。

 #pink_1{
            width: 100px;
            height: 100px;
            border: 10px solid palevioletred;
            background-color: rgb(211, 167, 167);
            text-align: center;
            line-height: 100px;
            flex-basis: 50px;
        }

5.flex（上三个的中和）

等分放大缩小