css并列两个盒子宽度自适应

CSS并列两个盒子宽度自适应是网页设计的一个重要技巧，它可以让页面布局更加美观和合理。下面我们来介绍一下如何使用CSS并列两个盒子宽度自适应。

.Box-container{
   display:flex;
}

.Box{
   flex:1;
   margin:0 10px;
}

代码中使用了flex布局来实现两个盒子的并列，第一个盒子和第二个盒子之间设置了10px的间距，通过设置flex:1来让盒子自适应宽度。

对于这种需要自适应宽度的盒子设计，我们可以使用百分比来设置宽度，例如设置一个固定的宽度占总宽度的百分比：

.Box-container{
   display:flex;
}

.Box{
   flex:1;
   margin:0 10px;
}

.Box1{
   width:30%;
}

.Box2{
   width:70%;
}

上述代码中，Box1的宽度为总宽度的30%，Box2的宽度为总宽度的70%，通过设置不同的百分比来控制两个盒子的宽度比例。

除了使用百分比来设置宽度比例，我们还可以使用calc函数来进行计算，例如下面的代码：

.Box-container{
   display:flex;
}

.Box{
   flex:1;
   margin:0 10px;
}

.Box1{
   width:calc((100% - 10px) / 3);
}

.Box2{
   width:calc((2 * (100% - 10px)) / 3);
}

上述代码中，使用了calc函数来计算两个盒子的宽度，通过计算得出每个盒子的宽度比例。

通过以上的介绍，相信大家已经掌握了CSS并列两个盒子宽度自适应的技巧，可以灵活运用于网页设计中，实现各种布局效果。