换句话说,有可能实现这一目标吗?
注意:这是我能得到的最好的:
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>
解决方法
您可以使用几个嵌套的flexbox实现布局.这是以下代码的结果:
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 -->
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。