flex弹性布局（所有孩子设置宽度计算后超过父亲时）

最新推荐文章于 2024-07-26 13:50:11 发布

背太阳的牧羊人

最新推荐文章于 2024-07-26 13:50:11 发布

阅读量6.5k

点赞数

分类专栏： CSS 文章标签： flex

本文链接：https://blog.csdn.net/u013565133/article/details/78274514

版权

CSS 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

html部分：

<div class="container container1">
  	<div class="flex-item flex-item1">1 1</div>
  	<div class="flex-item flex-item2">1 2</div>
  	<div class="flex-item flex-item3">1 3</div>
</div>
<div class="container container2">
	  <span class="flex-item flex-item1">2 1</span>
  	<span class="flex-item flex-item2">2 2</span>
</div>
<div class="container container3">
	  <span class="flex-item flex-item1">3 1</span>
  	<span class="flex-item flex-item2">3 2</span>
</div>

css部分：

.container{width: 420px;height: 220px;background: #DBEFFA;margin: 10px}
.container1{display:flex;}
.container2,.container3{display:inline-flex;}

.flex-item{background: #BDD8F5;margin: 10px;color: #000;text-align: center;font-size: 14px;}

/* 这里即使给flex-item设定了宽度又怎样，到最后所有flex-item的宽度和margin宽度之和还是无法超过父亲已经设定好的宽度，最后大家都是老老实实的平分春秋，嗯哼，flex弹性布局告诉你，还是宝宝我最厉害，就算你给直接子元素设置了宽度还是要乖乖听我的话呢，就是让你达不到width:200px;的宽度， */
.container1 .flex-item,.container2 .flex-item,.container3 .flex-item{width: 200px;height:200px;}

这里写图片描述
但是所有的宽度加起来小于我的直接父亲是可以的，就是不能超过我的直接父亲，比如我吧宽度设成width:20px;瞬间大家都瘦身了，大家该怎样就怎样。宽度值起效果。