大佬教程收集整理的这篇文章主要介绍了html – 是否可以使用flexbox混合行和列?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
注意:这是我能得到的最好的:
html,body,.container { height: 100%; } .container { border: 1px solid green; display: flex; flex-wrap: wrap; } .container > div { border: 1px solid black; BACkground: #ececec; flex: 1; } .container > div:nth-of-type(1) { flex: 1 1 100%; } .container>div:nth-of-type(4) { flex: 1 1 100%; }
<div class="container"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> </div>
html,.container { height: 100%; BACkground-color: white; } .container { display: flex; flex-direction: column; /* flex-wrap: wrap; */ } .container div { margin: 10px; flex: 1; BACkground-color: orange; } .container > div:first-child { } .container > div:nth-child(2) { display: flex; BACkground-color: white; } .container > div:nth-child(2) > div:first-child { display: flex; flex-direction: column; BACkground-color: white; margin-right: 20px; } .container > div:nth-child(2) div { flex: 1; margin: 0; } .container > div:nth-child(2) > div:first-child > div:first-child { margin-bottom: 20px; } .container > div:last-child { }
<div class="container"> <!-- flex container --> <div>Div 1</div> <!-- flex item #1 --> <div> <!-- flex item #2 and nested flex container --> <div> <!-- flex item and nested flex container --> <div>Div 2.1.1</div> <!-- flex item --> <div>Div 2.1.2</div> <!-- flex item --> </div> <!-- end flex item / container 2.1 --> <div>Div 2.2</div> <!-- flex item --> </div> <!-- end flex item / container #2 --> <div>Div 3</div> <!-- flex item #3 --> </div> <!-- end .container -->
以上是大佬教程为你收集整理的html – 是否可以使用flexbox混合行和列?全部内容,希望文章能够帮你解决html – 是否可以使用flexbox混合行和列?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。