C3之弹性盒子

最新推荐文章于 2023-03-18 16:22:05 发布

23号婷儿

最新推荐文章于 2023-03-18 16:22:05 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css3 文章标签： css css3

本文链接：https://blog.youkuaiyun.com/qq_46179838/article/details/110006862

css3 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了CSS3中的弹性盒子模型，包括设置到父元素的属性如flex-direction、flex-wrap、justify-content和align-items，以及设置到子元素的属性如order、align-self、flex-grow和flex-shrink。此外，还探讨了flex-basis与width的关系，以及在不同场景下的应用，如动态导航栏、等分布局、固定宽度布局和圣杯布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex盒子

- 常用属性

常用属性

一、设置到父元素的属性（主轴和交叉轴）

1、flex-direction : row（默认值） | row-reverse | column | column-reverse

取值

row：横向从左向右的排列（左对齐）
row-reverse：与row相反
column：纵向从上到下排列（顶对齐）
column-reverse：与column相反

具体效果请往下看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=.0">
    <title>flex弹性盒子</title>    
    <style>
        *{            
            padding:0px;
            margin:0px;
        }
        .wrapper{
            width:500px;
            height:500px;
            border:1px solid black;
            display: flex;
            flex-direction:row;
            /* row | row-reverse | column | column-reverse */
        }
        .content{
            width:100px;
            height:100px;
            border:1px solid #00ffff;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</body>
</html>

在这里插入图片描述
如果你在一个容器内设置了多个盒子，它也只会在同一行等距离的展示出来，不会换行展示。

2、flex-wrap : nowrap（默认值） | wrap | wrap-reverse

取值

nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器有为多行时，里面的子元素一行排列不下，那就会选择换行
wrap-reverse：反转 wrap 排列。

这些都是在必须设置为弹性盒子才能生效的display: flex;
在这里插入图片描述

3、justify-content : flex-start（默认值） | flex-end | center | space-between | space-around

取值

flex-start（默认值）：弹性盒子元素将向行开始位置对齐
flex-end ：弹性盒子元素将向行结束位置对齐
center ：弹性盒子元素在行中间位置对齐
space-between ：容器内的盒子两边各占一个角，剩下的盒子中间自适应分配
space-around ：弹性盒子元素平均地分布在一行中，会保留盒子两边的间距大小相等。

4、align-items : flex-start | flex-end | center | baseline | stretch（默认值）（基于交叉轴，主要还是针对单行元素来处理对齐方式）

取值

flex-start：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：
弹性盒子元素的侧轴（纵轴）结束位置的边界紧靠住该行的侧轴结束边界。
center：
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：
让元素基于里面的内容对齐。如果给一行内的某个元素设置一个margin-top的值，那么再设置baseline时，其他的元素就会向这个元素看齐，你改变宽高也不会造成什么影响。
stretch：
正常情况下，当我们没有设置子元素的高度时，盒子的高度会根据里面的内容自适应高度，但是当我设置上stretch后，它就会直接把盒子的高度撑开和父级高度一样，但必须时前提没设置子元素的高度才行

在这里插入图片描述

5、align-content：flex-start | flex-end | center | space-between | space-around | stretch（默认值）（基于交叉轴，主要针对多行元素来处理对齐方式）

二、设置到子元素的属性

1、order类似于z-index，谁的值就在前面，可以添负数，默认值为0

2、align-self : auto（默认值） | flex-start | flex-end | center | baseline | stretch（子项作为一个个体，它基于交叉轴（纵轴）方向上的对齐方式。）

在单行元素中，子元素自身设置align-self属性后，它不会管父级身上怎么设置，都会应用自己的，说明子元素设置的align-self优先级高于父元素的设置align-items。
在多行元素时，就是父级设置的align-content的优先级高于子元素设置的align-self属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=.0">
    <title>flex弹性盒子</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        .wrapper {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            align-items: center;
        }
        .content {
            width: 100px;
            height: 100px;
            border: 1px solid #00ffff;

        }
        .content:first-of-type {
            align-self: flex-start;
        }
        .content:nth-of-type(2) {
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</body>
</html>

在这里插入图片描述

3、扩张比率——flex-grow : number（当一行中还有剩余空间的时候，它就会让当前的元素按照设置的比例分配剩下的空间，然后在加到自身上，调整最后的大小）

4、收缩比率——flex-shrink : number

5、定义元素盒子的宽度——flex-basis : length | 百分比

三、flex-basis和width的联系

1. width和flex-basis同时存在时

flex-wrap{
      display: flex;
      width: 600px;
      height: 100px;
      border: 1px solid #ddd;
    }
    .flex-item{
      width: 200px;
      flex-basis: 100px;
    }
    .item1{
      background: #66efab;
    }
    .item2{
      background: #efe24e;
    }
    .item3{
      background: #ef6754;
    }
    .item4{
      background: #ef9fef;
    }
    .item5{
      background: #191def;
    }

<div class="flex-wrap">
    <div class="flex-item item1">item1</div>
    <div class="flex-item item2">item2</div>
    <div class="flex-item item3">item3</div>
    <div class="flex-item item4">item4</div>
    <div class="flex-item item5">item4</div>
  </div>

展示结果
在这里插入图片描述
分析：
当flex-basis和width属性同时存在时，width属性不生效，flex item的宽度为flex-basis设置的宽度

2. 只存在width情况，且flex items宽度和大于flex容器宽度

    // 仅展示修改部分
    .flex-item{
      /*flex-basis: 100px;*/
      width: 200px;
    }
    .item1{
      background: #66efab;
      width: 100px;
    }

展示结果

所有flex item等比例被压缩到充满flex容器
结果分析:
当flex空间不够时，由于flex-shrink的默认值为1，所以所有flex items容器等比例被压缩

3. 当存在flex-basis，所有的flex item是宽度之和大于flex容器宽度

  // 仅展示修改的代码
    .flex-item{
      flex-basis: 300px;
      width: 200px;
    }
    .item1{
      background: #66efab;
    }

展示结果

结果分析：
这种情况同2类似，都是在flex-shrink的作用下等比例缩小

4. max-width对flex items宽度的影响

 //仅展示修改部分
    .flex-item{
      flex-basis: 300px;
      max-width: 100px;
    }
    .item1{
      background: #66efab;
    }

展示结果

结果分析:
max-width决定了flex items的最大宽度

5. min-width对flex items宽度的影响

// 仅展示修改内容
.flex-item{
  flex-basis: 80px;
  min-width: 100px;
}
.item1{
  background: #66efab;
}

展示结果
分析：
min-width决定了flex items的最小宽度

此节参考链接