前言

在网页设计中，弹性容器（Flexbox）是一种强大的布局工具，它可以帮助开发人员轻松创建灵活的、响应式的布局结构。而 JavaScript 的弹性容器技术更是将这种灵活性和动态性推向了一个新的高度。通过 JavaScript，我们可以实现更加智能和交互式的弹性容器布局，使得网页可以根据用户的需求动态调整布局结构，提供更加个性化的用户体验。在这篇文章中，我们将深入探讨 JavaScript 弹性容器的概念、原理以及在实际项目中的应用场景。让我们一起探索 JavaScript 弹性容器技术的魅力，以及它如何为网页设计带来新的可能性。

正文

当我们定义一个类名为box的容器，在里面创建两个item并为其添加长与宽的样式

<style>
        .box{
            width: 600px;
            height: 100px;
            background: #7e6464c1; 
          display: flex
      }
        .item{
            height: 100px;
            width: 100px;
            background: #c30d0d;
        }      
    </style>
</head>
<body>
    <div class="box">
        <div class="item  item1">1</div>
        <div class="item  item2">2</div>
    </div>

这时我们可以看见红色的容器掉下来了，因为两个都是块级元素而父容器装不下使第二个红色方块溢出了

那么我们如何使两个item去到同一行呢？

这时我们在父容器box中再添加一个display：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>
        .box{
            width: 600px;
            height: 100px;
            background: #7e6464c1; 
            display: flex;  
        }
        .item{
            height: 100px;
            width: 100px;
            background: #c30d0d;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="item  item1">1</div>
        <div class="item  item2">2</div>
    </div>
</body>
</html>

我们发现这时发现两个item到了同一行，即使他们是块级元素

这时我们再到父容器.box中添加一个flex-direction: column;的属性，我们会发现两个子元素到同一列上去了

.box{
            width: 600px;
            height: 100px;
            background: #7e6464c1; 
            display: flex;  
            flex-direction: column;
        }

因此我们可以得出第一个结论：弹性容器默认的主轴为X轴，子容器全部在主轴上对齐

这时我们给item2添加另一个背景颜色的样式，并且删除它们样式中的宽高，我们再来看看效果

.item{      
       background: #c30d0d;
        }
       .item2{
        background: #1cdd2c;
       }

我们会发现宽没有效果，而高依然是父容器的高

这时我们可以得出第二个结论：子容器默认继承弹性父容器的100%的高

问：我们该如何实现两个子容器一人占据一半呢？

 .item{
            background: #c30d0d;
            flex: 1;
        }

我们只需要在item中加入flex: 1;这个属性。这时两个子容器就会各占一半了

我们如何把两个子容器居中？

.box{
            width: 600px;
            height: 200px;
            background: #7e6464c1; 
            display: flex;  
            justify-content: center;
            align-items: center;
            /* flex-direction: column; */
        }

我们在父容器中添加justify-content: center;样式，这是使子容器水平居中，
然后再添加 align-items: center;样式，这是使子容器在父容器的交叉轴居中这时我们再来看看效果

最后我们再来介绍两个简单的样式： justify-content: space-around;和 justify-content: space-between

    .box{
            width: 600px;
            height: 200px;
            background: #7e6464c1; 
            display: flex;  
            justify-content: space-around;
            align-items: center;

justify-content: space-around; 是一种用于Flexbox布局的属性。这个属性用于定义在flex容器内部如何分配主轴上的空间，使得flex项目之间具有相等的空间，并且项目与容器边缘之间也有相等的空间。 justify-content: space-between; 是一种用于Flexbox布局的属性。这个属性用于定义在flex容器内部如何分配主轴上的空间，使得flex项目之间具有相等的空间，但是第一个和最后一个项目与容器边缘之间没有空间。

总结

总而言之，弹性容器（Flexbox）为Web开发者提供了一种强大的工具，用于创建响应式、灵活且可维护的布局。通过灵活的排列和对齐方式，以及简单而强大的属性，Flexbox使得在不同屏幕尺寸和设备上实现一致且美观的布局变得轻而易举。无论您是刚刚入门的初学者还是有经验的开发者，掌握Flexbox的基础知识都将对您的项目产生积极的影响。

最后，继续学习并探索CSS中更多的布局技术，例如Grid布局等，将有助于大家建立更加复杂和多样化的布局。感谢大家阅读本文，希望你们在未来的项目中享受使用Flexbox所带来的便利与乐趣！

1分钟带你了解什么是弹性容器

前言

正文

总结