Felder mit fester Breite und Höhe im Flex-Layout werden gestaucht
Wie oben gezeigt,
In der Box hatte das quadratische Div auf der linken Seite ursprünglich eine feste Breite und Höhe, aber nach dem Festlegen des Flex-Layouts wurde es durch die Box auf der rechten Seite zusammengedrückt
Lösung:
// 给被挤的方形div加上
flex-shrink: 0;Grund: Nachdem das übergeordnete Element das Flex-Layout festgelegt hat, kann das untergeordnete Element standardmäßig verkleinert werden (flex-shrink: 1;)
2. Die Innenseite des rechten Rechtecks ist aufgrund des Inhalts zu lang,
Bewirkt, dass die rechte Seite den übergeordneten Bereich extrudiert
Lösung:
// 右侧挤出父级的长方形div加上
width: 0;
// 或
width: inherit;3. Der adaptive Teil im Flex-Layout wird nicht automatisch erweitert
Wie im Bild oben gezeigt, ist der Effekt von div2 offensichtlich nicht das, was wir wollen. Wir möchten oft, dass er sich automatisch bis ganz rechts in die übergeordnete Box erstreckt, genau wie der Effekt im ersten Bild oben
Lösung:
// 在div2 加上
flex-grow: 1;4. Richten Sie beide Enden des Div im Flex-Layout aus
Manchmal müssen wir zwei Divs auf beiden Seiten ausrichten
Lösung:
// 在div1 和 div2 共同父级加上(就是设置 display:flex;那个div)
justify-content: space-between;