Я работаю с CSS, и у меня нет большого опыта работы с flex-box, поскольку я только недавно начал применять его, поскольку сеть продолжает развиваться. Я работаю с кодом, который я не совсем понимаю. Все DIV плавают рядом друг с другом в горизонтальной сетке, но я хочу, чтобы каждый .styled-container был вертикальным, а каждый .styled-container - в своем собственном ряду. Я не уверен, какие CSS строки заставляют его делать это, поэтому я хотел бы
1) Лучше понять гибкость и причины этого
2) Как сделать это вертикаль списка
Я ценю это!
CodePen https://codepen.io/CoderPerson87/pen/zYGBpPE
HTML
<div class="family-container">
<div class="styled-container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADCCAMAAAB6zFdcAAAAYFBMVEUAZq7///8AY60AXKozfLnC0eTD1+kAX6t8ps49e7iOr9MAUKUqeLe50OVqlMNGg7zu9foAWakAV6iEqtDM3OtxncnW4+9IiL+xxt+80uaQs9SYuNeevdqyyuE4f7rI2+sR6XqnAAACJUlEQVR4nO3c21aCQBSAYQYM8lSOGallvv9b1lQayAzsWWYsNv93PRez/+UBREgSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADGJU2KLKjvzf2P7CWb3YVsRxHB7jfznQnarPve4O3Zmcnny3CDEUSwe9PRwBxt35u8LZegq4HJVUewr0bQQHWE7wTdDUyu9tvhJ4GggdoI9u00YHcDs1P5djgnEDVQGeE3gayBwgjr3wTCBmap7GCpmkDaQFmE9bY6m7SBqgj1BPIGiiLYQ30yeQNzUPLBeJkgpoGSCI0EUQ1URGgmiGugIELhGTef5xENzDLte4jrpFPPULldTIIWDe99D3Elf4MsDVo8NE2H/UIINAiuL5486/fFP+7470U3uPesn9GABjSgAQ1oQAMa0IAGNKABDRwa0MChAQ0cGtDAoQENnNE0OI6rQZI8Nk3Cl1hUNkg9V8/CF9omOhv4hgrLPMvLvme4WvYckWDlaVCmw77c6MRE8DTQkCAqQrNBWWhIEBOh0aDMdCSIiHDZQE8CeYSLBuXg/4pUJYxQb6ArQZJY0XFCrcFGWQJhhGqDjcJbWSQRKg00JviM4Pu/VahBy7nloHVHODfQek+XIMKpgd4E3RF+Gmi+x7MzwncD3Qm6Inw1yNXcvBLSGsE10J+gPcIqezqOIIGLEHwSyCF9H/hvh1JtT4TRc64MAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIDMBzHnJaGfdaRoAAAAAElFTkSuQmCC" />
<p>Company Name</p>
</div>
<div class="styled-container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADCCAMAAAB6zFdcAAAAYFBMVEUAZq7///8AY60AXKozfLnC0eTD1+kAX6t8ps49e7iOr9MAUKUqeLe50OVqlMNGg7zu9foAWakAV6iEqtDM3OtxncnW4+9IiL+xxt+80uaQs9SYuNeevdqyyuE4f7rI2+sR6XqnAAACJUlEQVR4nO3c21aCQBSAYQYM8lSOGallvv9b1lQayAzsWWYsNv93PRez/+UBREgSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADGJU2KLKjvzf2P7CWb3YVsRxHB7jfznQnarPve4O3Zmcnny3CDEUSwe9PRwBxt35u8LZegq4HJVUewr0bQQHWE7wTdDUyu9tvhJ4GggdoI9u00YHcDs1P5djgnEDVQGeE3gayBwgjr3wTCBmap7GCpmkDaQFmE9bY6m7SBqgj1BPIGiiLYQ30yeQNzUPLBeJkgpoGSCI0EUQ1URGgmiGugIELhGTef5xENzDLte4jrpFPPULldTIIWDe99D3Elf4MsDVo8NE2H/UIINAiuL5486/fFP+7470U3uPesn9GABjSgAQ1oQAMa0IAGNKABDRwa0MChAQ0cGtDAoQENnNE0OI6rQZI8Nk3Cl1hUNkg9V8/CF9omOhv4hgrLPMvLvme4WvYckWDlaVCmw77c6MRE8DTQkCAqQrNBWWhIEBOh0aDMdCSIiHDZQE8CeYSLBuXg/4pUJYxQb6ArQZJY0XFCrcFGWQJhhGqDjcJbWSQRKg00JviM4Pu/VahBy7nloHVHODfQek+XIMKpgd4E3RF+Gmi+x7MzwncD3Qm6Inw1yNXcvBLSGsE10J+gPcIqezqOIIGLEHwSyCF9H/hvh1JtT4TRc64MAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIDMBzHnJaGfdaRoAAAAAElFTkSuQmCC" />
<p>Company Name</p>
</div>
<div class="styled-container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADCCAMAAAB6zFdcAAAAYFBMVEUAZq7///8AY60AXKozfLnC0eTD1+kAX6t8ps49e7iOr9MAUKUqeLe50OVqlMNGg7zu9foAWakAV6iEqtDM3OtxncnW4+9IiL+xxt+80uaQs9SYuNeevdqyyuE4f7rI2+sR6XqnAAACJUlEQVR4nO3c21aCQBSAYQYM8lSOGallvv9b1lQayAzsWWYsNv93PRez/+UBREgSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADGJU2KLKjvzf2P7CWb3YVsRxHB7jfznQnarPve4O3Zmcnny3CDEUSwe9PRwBxt35u8LZegq4HJVUewr0bQQHWE7wTdDUyu9tvhJ4GggdoI9u00YHcDs1P5djgnEDVQGeE3gayBwgjr3wTCBmap7GCpmkDaQFmE9bY6m7SBqgj1BPIGiiLYQ30yeQNzUPLBeJkgpoGSCI0EUQ1URGgmiGugIELhGTef5xENzDLte4jrpFPPULldTIIWDe99D3Elf4MsDVo8NE2H/UIINAiuL5486/fFP+7470U3uPesn9GABjSgAQ1oQAMa0IAGNKABDRwa0MChAQ0cGtDAoQENnNE0OI6rQZI8Nk3Cl1hUNkg9V8/CF9omOhv4hgrLPMvLvme4WvYckWDlaVCmw77c6MRE8DTQkCAqQrNBWWhIEBOh0aDMdCSIiHDZQE8CeYSLBuXg/4pUJYxQb6ArQZJY0XFCrcFGWQJhhGqDjcJbWSQRKg00JviM4Pu/VahBy7nloHVHODfQek+XIMKpgd4E3RF+Gmi+x7MzwncD3Qm6Inw1yNXcvBLSGsE10J+gPcIqezqOIIGLEHwSyCF9H/hvh1JtT4TRc64MAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIDMBzHnJaGfdaRoAAAAAElFTkSuQmCC" />
<p>Company Name</p>
</div>
</div>
CSS
.family-container{
margin-bottom:96px;
display:flex;
width:100%;
justify-content:center;
align-items:center;
}
.styled-container{
flex-direction:column;
display:flex;
align-items:center;
margin-bottom:5px;
margin-right:32px;
}
img{
max-width:64px;
grid-column:span;
border-radius:120px;
}