-
Notifications
You must be signed in to change notification settings - Fork 0
/
25af57118a82.html
551 lines (430 loc) · 43 KB
/
25af57118a82.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 7.3.0">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon.ico">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" integrity="sha256-XOqroi11tY4EFQMR9ZYwZWKj5ZXiftSx36RRuC3anlA=" crossorigin="anonymous">
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fancyapps/ui@5.0.31/dist/fancybox/fancybox.css" integrity="sha256-gkQVf8UKZgQ0HyuxL/VnacadJ+D2Kox2TCEBuNQg5+w=" crossorigin="anonymous">
<script class="next-config" data-name="main" type="application/json">{"hostname":"prohibitorum.top","root":"/","images":"/images","scheme":"Gemini","darkmode":true,"version":"8.20.0","exturl":false,"sidebar":{"position":"left","width_expanded":320,"width_dual_column":240,"display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"flat"},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"algolia":{"appID":"T3MJ56EZKX","apiKey":"d231b9edc85683ea50e37ff0bdc95d43","indexName":"blog","hits":{"per_page":10}}}</script><script src="/js/config.js"></script>
<meta name="description" content="前言解决嵌套 flex 布局子容器内容超出父容器">
<meta property="og:type" content="article">
<meta property="og:title" content="解决嵌套flex布局子容器内容超出父容器">
<meta property="og:url" content="https://prohibitorum.top/25af57118a82">
<meta property="og:site_name" content="恋の歌">
<meta property="og:description" content="前言解决嵌套 flex 布局子容器内容超出父容器">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162259243.avif">
<meta property="og:image" content="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162308220.avif">
<meta property="og:image" content="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162313181.avif">
<meta property="og:image" content="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162316761.avif">
<meta property="og:image" content="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162319527.avif">
<meta property="og:image" content="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162320839.avif">
<meta property="og:image" content="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162329438.avif">
<meta property="og:image" content="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/20/202202201219813.avif">
<meta property="og:image" content="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/20/202202201220701.avif">
<meta property="og:image" content="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/20/202202201222092.avif">
<meta property="article:published_time" content="2022-02-16T17:26:07.000Z">
<meta property="article:modified_time" content="2023-02-13T18:28:45.000Z">
<meta property="article:author" content="Dedicatus545">
<meta property="article:tag" content="css">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162259243.avif">
<link rel="canonical" href="https://prohibitorum.top/25af57118a82.html">
<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://prohibitorum.top/25af57118a82","path":"25af57118a82.html","title":"解决嵌套flex布局子容器内容超出父容器"}</script>
<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>解决嵌套flex布局子容器内容超出父容器 | 恋の歌</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TDBJV1DQ49"></script>
<script class="next-config" data-name="google_analytics" type="application/json">{"tracking_id":"G-TDBJV1DQ49","only_pageview":false,"measure_protocol_api_secret":null}</script>
<script src="/js/third-party/analytics/google-analytics.js"></script>
<noscript>
<link rel="stylesheet" href="/css/noscript.css">
</noscript>
</head>
<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
<div class="headband"></div>
<main class="main">
<div class="column">
<header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
<div class="site-nav-toggle">
<div class="toggle" aria-label="切换导航栏" role="button">
</div>
</div>
<div class="site-meta">
<a href="/" class="brand" rel="start">
<i class="logo-line"></i>
<p class="site-title">恋の歌</p>
<i class="logo-line"></i>
</a>
<p class="site-subtitle" itemprop="description">koi-no-uta</p>
</div>
<div class="site-nav-right">
<div class="toggle popup-trigger" aria-label="搜索" role="button">
<i class="fa fa-search fa-fw fa-lg"></i>
</div>
</div>
</div>
<nav class="site-nav">
<ul class="main-menu menu">
<li class="menu-item menu-item-search">
<a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
</a>
</li>
</ul>
</nav>
<div class="search-pop-overlay">
<div class="popup search-popup"><div class="search-header">
<span class="search-icon">
<i class="fa fa-search"></i>
</span>
<div class="search-input-container"></div>
<span class="popup-btn-close" role="button">
<i class="fa fa-times-circle"></i>
</span>
</div>
<div class="search-result-container">
<div class="algolia-stats"><hr></div>
<div class="algolia-hits"></div>
<div class="algolia-pagination"></div>
</div>
</div>
</div>
</header>
<aside class="sidebar">
<div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
<ul class="sidebar-nav">
<li class="sidebar-nav-toc">
文章目录
</li>
<li class="sidebar-nav-overview">
站点概览
</li>
</ul>
<div class="sidebar-panel-container">
<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
<div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%AD%A3%E6%96%87"><span class="nav-number">2.</span> <span class="nav-text">正文</span></a></li></ol></div>
</div>
<!--/noindex-->
<div class="site-overview-wrap sidebar-panel">
<div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
<img class="site-author-image" itemprop="image" alt="Dedicatus545"
src="https://avatars.githubusercontent.com/u/48575405?v=4">
<p class="site-author-name" itemprop="name">Dedicatus545</p>
<div class="site-description" itemprop="description">Index-Librorum-Prohibitorum</div>
</div>
<div class="site-state-wrap animated">
<nav class="site-state">
<div class="site-state-item site-state-posts">
<a href="/archives/">
<span class="site-state-item-count">173</span>
<span class="site-state-item-name">日志</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<a href="/categories/">
<span class="site-state-item-count">9</span>
<span class="site-state-item-name">分类</span></a>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags/">
<span class="site-state-item-count">141</span>
<span class="site-state-item-name">标签</span></a>
</div>
</nav>
</div>
<div class="links-of-author animated">
<span class="links-of-author-item">
<a href="https://github.com/Dedicatus546" title="GitHub → https://github.com/Dedicatus546" rel="noopener me" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
</span>
<span class="links-of-author-item">
<a href="mailto:1607611087@qq.com" title="E-Mail → mailto:1607611087@qq.com" rel="noopener me" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
</span>
</div>
<div class="cc-license animated" itemprop="license">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans" class="cc-opacity" rel="noopener" target="_blank"><img src="https://fastly.jsdelivr.net/npm/@creativecommons/vocabulary@2020.11.3/assets/license_badges/small/by_nc_sa.svg" alt="Creative Commons"></a>
</div>
</div>
</div>
</div>
</aside>
</div>
<div class="main-inner post posts-expand">
<div class="post-block">
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
<link itemprop="mainEntityOfPage" href="https://prohibitorum.top/25af57118a82">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="https://avatars.githubusercontent.com/u/48575405?v=4">
<meta itemprop="name" content="Dedicatus545">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="恋の歌">
<meta itemprop="description" content="Index-Librorum-Prohibitorum">
</span>
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="解决嵌套flex布局子容器内容超出父容器 | 恋の歌">
<meta itemprop="description" content="">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
解决嵌套flex布局子容器内容超出父容器
</h1>
<div class="post-meta-container">
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2022-02-16 17:26:07" itemprop="dateCreated datePublished" datetime="2022-02-16T17:26:07+00:00">2022-02-16</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">更新于</span>
<time title="修改时间：2023-02-13 18:28:45" itemprop="dateModified" datetime="2023-02-13T18:28:45+00:00">2023-02-13</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/%E7%BC%96%E7%A8%8B/" itemprop="url" rel="index"><span itemprop="name">编程</span></a>
</span>
</span>
<span class="post-meta-break"></span>
<span class="post-meta-item" title="本文字数">
<span class="post-meta-item-icon">
<i class="far fa-file-word"></i>
</span>
<span class="post-meta-item-text">本文字数：</span>
<span>1.7k</span>
</span>
<span class="post-meta-item" title="阅读时长">
<span class="post-meta-item-icon">
<i class="far fa-clock"></i>
</span>
<span class="post-meta-item-text">阅读时长 ≈</span>
<span>6 分钟</span>
</span>
</div>
</div>
</header>
<div class="post-body" itemprop="articleBody"><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>解决嵌套 <code>flex</code> 布局子容器内容超出父容器</p>
<span id="more"></span>
<h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><p><code>flex</code> 布局作为一种新的布局方案，可以说是非常的好用，能够解决大部分的布局问题</p>
<p>相比于传统的 <code>display</code> 、 <code>position</code> 、 <code>float</code> 来说，<code>flex</code> 的学习成本更低</p>
<p>性能方面我不懂，这里贴一个帖子</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.zhihu.com/question/271492607">flex 布局对性能的影响主要体现在哪方面？</a></p>
</blockquote>
<p>随着时间的推移，现在基本上主流的 <code>UI</code> 库都使用 <code>flex</code> 布局来构建栅格组件了</p>
<p>激进一点的，比如 <code>naive-ui</code> 使用了 <code>grid</code> 布局</p>
<p>像以前的居中布局，大部分用的 <code>position</code> + <code>transform</code> （子元素宽高可不确定） <code>position</code> + <code>margin</code> （子元素宽高必须确定）</p>
<p>又或者首页的侧边栏固定宽度，中间自适应大小，大部分用基于 <code>float</code>的双飞燕或者圣杯（之前的帖子有写过实现）</p>
<p>记忆这些特殊的布局总是让人恼火</p>
<p>但是 <code>flex</code> 之后，一切都变得简单了</p>
<p>居中？简简单单</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 应用于父元素 */</span></span><br><span class="line"><span class="selector-class">.parent</span> {</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line"> <span class="attribute">justify-content</span>: center;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.child</span> {</span><br><span class="line"> <span class="comment">/* 啥都不用写 */</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>如果使用 <code>position</code> + <code>transform</code> 的话</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.parent</span> {</span><br><span class="line"> <span class="comment">/* 必须指定为relative */</span></span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.child-1</span> {</span><br><span class="line"> <span class="comment">/* 宽高可未知 */</span></span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">transform</span>: translate:(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.child-2</span> {</span><br><span class="line"> <span class="comment">/* 宽高必须确定 */</span></span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>固定一栏 + 自适应一栏？简简单单</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"aside"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"main"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.parent</span> {</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aside</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="comment">/* 禁止收缩 */</span></span><br><span class="line"> <span class="attribute">flex-shrink</span>: <span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.main</span> {</span><br><span class="line"> <span class="comment">/* 自适应占满 */</span></span><br><span class="line"> <span class="attribute">flex-grow</span>: <span class="number">1</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>看起来好像没简单多少，但是个人觉得心智负担减少了很多</p>
<p>在使用 <code>flex</code> 作为布局模式的时候，很多情况下需要嵌套的使用</p>
<p>比如如下的布局（网易云播放器的一个 <code>UI</code>）</p>
<p><img data-src="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162259243.avif"></p>
<p>忽略那个喜欢的按钮</p>
<p>实现这个布局，一般我们使用两层 <code>flex</code></p>
<p><code>html</code> 结构如下</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"music"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"img"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"1.jpg"</span>/></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"info"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"name"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"album"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<p><code>css</code> 如下</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.music</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.img</span> {</span><br><span class="line"> <span class="attribute">flex-shrink</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.img</span> <span class="selector-tag">img</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.info</span> {</span><br><span class="line"> <span class="attribute">flex-grow</span>: <span class="number">1</span>;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">flex-direction</span>: column;</span><br><span class="line"> <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>这个时候我们就得到了一个简易版的布局</p>
<p><img data-src="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162308220.avif"></p>
<p>看上去已经没什么问题了</p>
<p>但是如果我们的歌曲名非常的长，长到超出了父元素的宽度（这里指 <code>div.music</code> ）</p>
<p>这个时候我们一般会设置为超出部分显示省略号，也就是使用下面的 <code>css</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.name</span> {</span><br><span class="line"> <span class="attribute">white-space</span>: nowrap;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line"> <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>那么此时会出现下面的状况</p>
<p><img data-src="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162313181.avif"></p>
<p>这里 <code>div.music</code> 并没有被撑开，因为我们设置为了 <code>400px</code></p>
<p><img data-src="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162316761.avif"></p>
<p>而 <code>div.info</code> 由于子元素被撑开了</p>
<p>按正常思维来说，虽然 <code>div.info</code> 设置了 <code>flex-grow: 1</code> ，但是它的宽度应该是不能超过 <code>div.music</code> 的</p>
<p>这时，我们就需要在 <code>div.info</code> 加上一个 <code>width: 0</code> ，或者 <code>min-width: 0</code> 或者 <code>overflow: hidden</code>，效果就会符合逻辑</p>
<p><img data-src="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162319527.avif" alt="使用 width: 0"></p>
<p><img data-src="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162320839.avif" alt="使用 min-width: 0"></p>
<p><img data-src="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/16/202202162329438.avif" alt="使用 overflow: hidden"></p>
<p>是不是很神奇</p>
<p>这种撑开的现象不只出现在文字不换行上，只要子 <code>flex</code> 的内部的元素的宽度和超过这个父元素的宽度时都会出现</p>
<p>虽然很久前就知道了这个，不过一直它当特性来用</p>
<p>借着这次要写下来，就顺便找了找网上的文章，看看有没有解释原理的</p>
<p>然后我在 <code>css</code> 规范上 <code>flex</code> 一节找到了一些解释</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.w3.org/TR/css-flexbox-1/#min-size-auto">4.5. Automatic Minimum Size of Flex Items</a></p>
</blockquote>
<p>关键点就在 <code>min-width</code> 这个属性上</p>
<blockquote>
<p>In general, the content-based minimum size of a flex item is the smaller of its content size suggestion and its specified size suggestion</p>
</blockquote>
<p>一般情况下， <code>flex</code> 布局的子元素的最小尺寸是根据该子元素内容的大小和指定的大小的最小值确定的</p>
<p>而 <code>min-width</code> 在 <code>flexItem</code> 下默认情况下的值为 <code>auto</code></p>
<p>这时候就造成了最小的尺寸等于 <code>flexItem</code> 内容的大小来确定</p>
<p>对应到我们的举的例子中， <code>div.info</code> 既是 <code>flex</code> 元素，又是 <code>flexItem</code></p>
<p>对于 <code>div.music</code> 来说， <code>div.info</code> 的内容由它的子元素大小来确定</p>
<p>这样由于 <code>div.info</code> 过长，所以溢出了 <code>div.music</code> 规定的区域（由于 <code>div.music</code> 设置了固定宽，所以溢出）</p>
<p>而当我们 设置 <code>min-width</code> 或者 <code>width</code> 为 <code>0</code> 时</p>
<p>此时 <code>flexItem</code> 的尺寸最小值就变成指定的大小和内容大小的最小值了</p>
<p>而由于设置的值为 <code>0</code> ，意味着 <code>flexItem</code> 的最小值为 <code>0</code></p>
<p>这时候 <code>div.info</code> 的尺寸最小值为 <code>0</code> ，也就只能占据 <code>div.music</code> 剩余的宽度了（ <code>div.info</code> 设置了 <code>flex-grow: 1</code>）</p>
<p>那为什么设置 <code>overflow: hidden</code> 也可以生效呢？</p>
<blockquote>
<p>To provide a more reasonable default minimum size for flex items, the used value of a main axis automatic minimum size on a flex item that is not a scroll container is a content-based minimum size; <strong>for scroll containers the automatic minimum size is zero, as usual.</strong></p>
</blockquote>
<p>没错，规范中指出在默认情况下 <code>flexItem</code> 的最小尺寸为它的内容大小确定</p>
<p>而当 <code>flexItem</code> 成为滚动容器之后，此时 <code>flexItem</code> 的最小尺寸就为 <code>0</code> 了</p>
<p>所以也就能和 <code>min-width: 0</code> 和 <code>width: 0</code> 生成一样的效果了</p>
<p>在下面的注意事项中，我还发现了一个有趣的点</p>
<blockquote>
<p>Note also, <strong>when content-based sizing is used on an item with large amounts of content, the layout engine must traverse all of this content before finding its minimum size</strong>, whereas if the author sets an explicit minimum, this is not necessary. (For items with small amounts of content, however, this traversal is trivial and therefore not a performance concern.)</p>
</blockquote>
<p>在使用基于内容大小的最小尺寸下，这意味着引擎必须遍历该 <code>flexItem</code> 的内容才能确定最小值，如果这样的 <code>flexItem</code> 过多，可能就会造成性能问题</p>
<p>而如果我们明确了最小值，那么引擎就不必去遍历内容来知道大小了</p>
<p>在了解上面之后，其实不必使用嵌套的 <code>flex</code> 也可以复现这个过程</p>
<p><code>html</code> 如下</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"flex"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"flexItem"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"flexItem__content"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"flexItem"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"flexItem__content"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"flexItem"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"flexItem__content"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"flexItem"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"flexItem__content"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<p><code>css</code> 如下</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.flex</span> {</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">250px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.flexItem</span> {</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid black;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.flexItem__content</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>效果如下：</p>
<p><img data-src="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/20/202202201219813.avif"><br>可以看到这里我们设置 <code>flexItem</code> 的内容 <code>div.flexItem__content</code> 为 <code>100px</code></p>
<p>而此时 <code>flexItem</code> 并没有按默认情况下进行收缩（默认情况下 <code>flex-shrink</code> 为 <code>1</code>）</p>
<p>而当我们设置 <code>min-width: 0</code> 之后， 盒子正确的进行了收缩</p>
<p><img data-src="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/20/202202201220701.avif"></p>
<p>此时 <code>div.flexItem__content</code> 依然为 <code>100px</code> ，但 <code>flexItem</code> 却不会被影响到了</p>
<p><img data-src="https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/2022/02/20/202202201222092.avif"></p>
</div>
<footer class="post-footer">
<div class="post-copyright">
<ul>
<li class="post-copyright-author">
<strong>本文作者： </strong>Dedicatus545
</li>
<li class="post-copyright-link">
<strong>本文链接：</strong>
<a href="https://prohibitorum.top/25af57118a82" title="解决嵌套flex布局子容器内容超出父容器">https://prohibitorum.top/25af57118a82</a>
</li>
<li class="post-copyright-license">
<strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
</li>
</ul>
</div>
<div class="post-tags">
<a href="/tags/css/" rel="tag"># css</a>
</div>
<div class="post-nav">
<div class="post-nav-item">
<a href="/5d0998d51282" rel="prev" title="使用mitt来作为Vue3中的事件总线（EventBus）">
<i class="fa fa-angle-left"></i> 使用mitt来作为Vue3中的事件总线（EventBus）
</a>
</div>
<div class="post-nav-item">
<a href="/0f6aabfdf118" rel="next" title="什么是base64编码">
什么是base64编码 <i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</footer>
</article>
</div>
<div class="comments gitalk-container"></div>
</div>
</main>
<footer class="footer">
<div class="footer-inner">
<div class="copyright">
©
<span itemprop="copyrightYear">2024</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">Dedicatus545</span>
</div>
<div class="wordcount">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="fa fa-chart-line"></i>
</span>
<span>站点总字数：</span>
<span title="站点总字数">393k</span>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="fa fa-coffee"></i>
</span>
<span>站点阅读时长 ≈</span>
<span title="站点阅读时长">23:50</span>
</span>
</div>
<div class="site_sign">
<span class="post-meta-item">
<span>
如果我和狗一样有尾巴的话，一定会藏不住这份喜悦，而尾巴一直摇个不停吧。
</span>
</span>
</div>
</div>
</footer>
<div class="toggle sidebar-toggle" role="button">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</div>
<div class="sidebar-dimmer"></div>
<div class="back-to-top" role="button" aria-label="返回顶部">
<i class="fa fa-arrow-up fa-lg"></i>
<span>0%</span>
</div>
<noscript>
<div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>
<script src="https://fastly.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="https://fastly.jsdelivr.net/npm/@fancyapps/ui@5.0.31/dist/fancybox/fancybox.umd.js" integrity="sha256-a+H7FYzJv6oU2hfsfDGM2Ohw/cR9v+hPfxHCLdmCrE8=" crossorigin="anonymous"></script>
<script src="https://fastly.jsdelivr.net/npm/lozad@1.16.0/dist/lozad.min.js" integrity="sha256-mOFREFhqmHeQbXpK2lp4nA3qooVgACfh88fpJftLBbc=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/sidebar.js"></script><script src="/js/next-boot.js"></script>
<script src="https://fastly.jsdelivr.net/npm/algoliasearch@4.23.3/dist/algoliasearch-lite.umd.js" integrity="sha256-1QNshz86RqXe/qsCBldsUu13eAX6n/O98uubKQs87UI=" crossorigin="anonymous"></script>
<script src="https://fastly.jsdelivr.net/npm/instantsearch.js@4.67.0/dist/instantsearch.production.min.js" integrity="sha256-TW7D3X/i/W+RUgEeDppEnFT2ixv5lzplKH0c58D92dY=" crossorigin="anonymous"></script><script src="/js/third-party/search/algolia-search.js"></script>
<script src="/js/third-party/fancybox.js"></script>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/gitalk@1.8.0/dist/gitalk.css" integrity="sha256-AJnUHL7dBv6PGaeyPQJcgQPDjt/Hn/PvYZde1iqfp8U=" crossorigin="anonymous">
<script class="next-config" data-name="gitalk" type="application/json">{"enable":true,"github_id":"Dedicatus546","repo":"gitalk","client_id":"f7dc1ebbf18fc0fd3a5c","client_secret":"0893318788a1b62f883bdace8c12e6c42d76b402","admin_user":"Dedicatus546","distraction_free_mode":true,"proxy":"https://strong-caramel-969805.netlify.app/github_access_token","language":"zh-CN","js":{"url":"https://fastly.jsdelivr.net/npm/gitalk@1.8.0/dist/gitalk.min.js","integrity":"sha256-MVK9MGD/XJaGyIghSVrONSnoXoGh3IFxLw0zfvzpxR4="},"path_md5":"1645003567"}</script>
<script src="/js/third-party/comments/gitalk.js"></script>
<!-- hexo injector body_end start -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11.1.9/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11.1.9/swiper-bundle.min.css">
<style>
:root {
--swiper-theme-color: var(--theme-color);
--swiper-pagination-bottom: 0;
}
.swiper {
padding-bottom: 32px;
margin-bottom: 20px;
}
.swiper .swiper-slide .swiper-slide-img {
display: block;
width: 100%;
object-fit: contain;
background: var(--body-bg-color);
margin: 0;
}
</style><!-- hexo injector body_end end --></body>
</html>