弹性盒子容器属性

最新推荐文章于 2024-09-05 01:30:55 发布

River766

最新推荐文章于 2024-09-05 01:30:55 发布

阅读量403

点赞数

文章标签： java html 前端

本文链接：https://blog.csdn.net/weixin_72636648/article/details/126396177

版权

本文详细介绍了弹性盒子模型中的容器属性，包括`flex-wrap`用于控制子元素换行方式，以及`align-content`用于调整行与行之间的间隙。同时，也探讨了项目的属性，如`flex`用于分配剩余空间，`align-self`允许自定义对齐方式，以及`order`、`flex-grow`和`flex-shrink`用于控制元素顺序和大小变化。这些属性对于创建响应式和自适应布局至关重要。

摘要由CSDN通过智能技术生成

1、容器属性——添加弹性容器上

flex-wrap属性：指定弹性盒子的子元素换行方式
- flex-wrap: wrap; 换行，第一行显示在上方
- flex-wrap: wrap-reverse; 换行，第一行显示在下方
- flex-wrap: nowrap; 默认值，不换行
注意：父元素有固定高度且高度大于子元素换行后高度之和换行中间有缝隙

父元素高度有内容撑开换行没有缝隙
align-content属性：折行,行与行之间有间隙,去除间隙（去掉了中间的间隙）

要设置： flex-wrap: wrap;
- align-content: flex-start; 顶端没有行间距
- align-content: flex-end; 底对齐没有行间距
- align-content: center; 居中没有行间距
- align-content: space-between; 两端对齐，中间自动分配, 元素位于各行之间留有空白空间
- align-content: space-around; 自动分配距离，元素位于各行之前、之间、之后都留有空白空间, 中间的间距是两端间距的两倍,
- align-content: space-evenly;平均对齐，元素位于各行之前、之间、之后都留有空白空间，行间距自动分配间距相等
```
 .warp {
          display: flex;
            /* 设置后没有间隙 上端 下端*/
            align-content: flex-start;
            align-content: flex-end;
      
            /* 设置后没有间隙 中间*/
            align-content: center;
            /* 自动分配距离 */
            align-content: space-around;
            /* 两端对齐，中间自动分配 */
            align-content: space-between;
            /* 行间距自动分配 间距相等*/
            align-content: space-evenly;
        }
```

2、项目属性——写在弹性子元素上

flex属性：剩余空间的分配

应用场景 : 两、三栏自适应

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            height: 500px;
            background-color: chartreuse;
            display: flex;
        }

        .box p:nth-child(1),
        .box p:nth-child(3) {
            width: 200px;
            height: 480px;
            background-color: red;
        }

        .box p:nth-child(2) {
            /* 中间剩余空间分配 */
            flex: 1;
            height: 480px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>左边</p>
        <p>中间</p>
        <p>右边</p>
    </div>
</body>

</html>

复合写法

flex-flow:flex-direction  flex-wrap;
例：
flex-floe:cloumn wrap;

align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）

此属性和弹性容器的 align-items 属性作用相同

align-self: stretch; 如果弹性子元素没有高度或高度为auto，将占满整个容器的高度
align-self: flex-start;（侧轴）交叉轴起点对齐
align-self: flex-end; （侧轴）交叉轴终点对齐
align-self: center; （侧轴）交叉轴中点对齐

.warp .box1 {
            height: auto;
            background-color: red;
            align-self: auto;
            align-self: stretch;
        }

        .warp .box2 {
            background-color: pink;
            align-self: flex-start;
            align-self: flex-end;
        }

        .warp .box3 {
            background-color: brown;
            align-self: center;
        }

order属性；子元素的排列次序

属性值为数值，没有单位，默认数值为0，数值越小，排列越靠前
必须为整数，不能为小数，可以为负数

 .warp .box1 {
            background-color: red;
            order: 1;
        }

        .warp .box2 {
            background-color: pink;
            order: 0;
        }

        .warp .box3 {
            background-color: brown;
            order: -1;
        }

flex-grow属性：子元素的放大比例（子项宽度和<父盒子宽度的时候）

属性值为数值，没有单位，默认值为0，表示不放大
负值对该属性无效
可以为小数
注意：当容器有剩余空间时有效

 .warp {
            width: 400px;
            height: 400px;
            display: flex;
        }

        .warp div {
            width: 100px;
            height: 100px;
        }

        /* 剩余空间400-300=100 */
        .box1 {
            background-color: red;
            flex-grow: 2;
            /* 100+100*2/4 = 150 */
        }
        .box2 {
            background-color: pink;
            flex-grow: 1;
            /* 100+100*1/4=125 */
        }

        .box3 {
            background-color: brown;
            /* 100+100*1/4=125 */
            flex-grow: 1;
        }

flex-shrink属性：子元素的缩小比例（子项宽度和>父盒子宽度的时候）
- 属性值为数值，没有单位
- 默认值为1，表示当空间不足时，等比例缩小
- 属性值为0，表示当空间不足时，不缩小
- 负值对该属性无效

可以为小数

  .warp {
            width: 500px;
            height: 400px;
            display: flex;
        }
        .warp div {
            width: 200px;
            height: 100px;
        }
        /*不足空间，缺了100 600-500=100*/
        .box1 {
            background-color: red;
            flex-shrink: 2;
            /*200 - 100 * 1/4 = 150 */
        }
        .box2 {
            background-color: pink;
            flex-shrink: 1;
            /*200 - 100 * 1/4 = 175*/
        }
        .box3 {
            background-color: brown;
            flex-shrink: 1;
            /*200 - 100 * 1/4 = 175*/
        }