Flexbox新手 - 我需要做什么？
[英]New to Flexbox - what do I need to do?
问题描述
代码有三个div，在dom中按div-00＃排序
我想用flexbox创建的（宽度> = 460px）是以下布局（请参阅图片）
补充：18-12-16 -
有人能够建议如何使用flexbox这样做吗？
Tab键顺序存在第二个问题，但我希望首先对布局进行排序。
ON MOBILE（比如<460px） - 在.div-main中：
所有div都是父div的100％，命令为.div-001 -div-002 .div-003。
在桌面上（说> = 460px） - 在.div-main中：
因为不同的高度，我不使用浮动，因为这发生在桌面上 。
.div-001 - 位置：右上角。 身高：变化。 宽度：20％。 理想情况下，tab索引应该是2（因此我使用flex来命令这个'2'）但是知道顺序是按DOM的顺序读出的。
.div-002 - 位置：左上角。 身高：变化。 宽度：80％。 理想情况下，标签索引应为1（因此我使用flex来命令此'1'）
.div-003 - 位置：右（直接低于.div-003）。 身高：变化。 宽度：20％。 理想情况下，标签索引应为3（因此我使用flex来命令这个'3'）
订单（以防万一你想知道）很重要。
* { margin: 0; padding: 0; border: 0; } a:focus, a:hover { color: red; } .header, .footer { width: 100%; max-width: 1220px; margin: 0 auto; background: #000; } .header { height: 50px; } .footer { height: 20px; } .div-main { width: 90%; max-width: 1200px; margin: 0 auto; padding: 10px 0; } .div-main > div { min-height: 50px; box-sizing: border-box; border: 1px solid #f00; padding: 10px; } @media all and (min-width: 460px) { .div-main { display: flex; flex-direction: column; } .div-desktop-left { width: 80%; margin-right: auto; } .div-desktop-right { width: 20%; margin-left: auto; } .div-001 { /* example */ height: 70px; order: 2; } .div-002 { /* example (varying height) */ align-self: flex-start; /* smaller than .div-001 */ height: 50px; /* bigger than .div-001 */ /* height: 360px; */ order: 1; } .div-003 { /* example */ height: 20px; order: 3; } }
<header class="header"></header> <div class="div-main"> <div class="div-001 div-mobile-001 div-desktop-002 div-desktop-right div-desktop-right-001"><a href="#">Desktop link 002</a></div> <div class="div-002 div-mobile-002 div-desktop-001 div-desktop-left div-desktop-left-001"><a href="#">Desktop link 001</a></div> <div class="div-003 div-mobile-003 div-desktop-003 div-desktop-right div-desktop-right-002"><a href="#">Desktop link 003</a></div> </div> <footer class="footer"></footer>
2 个解决方案
解决方案1
0 2018-11-25 14:16:13
用flexbox弄清楚了，
如果您不受技术限制，请使用CSS Grid解决方案：
HTML
body { margin: 0; padding: 0; } main { display: grid; grid-template-columns: 3fr 1fr; height: 300px; } .box { border: 5px solid red; padding: 50px; } .box.three { grid-column: 2; } @media (max-width: 460px) { main { display: flex; flex-flow: column; } .box { border-color: black; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Flexer</title> </head> <body> <main> <div class="box one">one</div> <div class="box two">two</div> <div class="box three">three</div> </main> </body> </html>
解决方案2
0 2018-11-25 18:56:36
问题是给.div-main一个flex-direction：列。这样做.div-desktop-left和.div-desktop-right不会彼此对齐你需要改变的是给.div-main flex -direction：row和flex-wrap：wrap，这将解决问题
* { margin: 0; padding: 0; border: 0; } a:focus, a:hover { color: red; } .header, .footer { width: 100%; max-width: 1220px; margin: 0 auto; background: #000; } .header { height: 50px; } .footer { height: 20px; } .div-main { width: 90%; max-width: 1200px; margin: 0 auto; padding: 10px 0; } .div-main > div { min-height: 50px; box-sizing: border-box; border: 1px solid #f00; padding: 10px; } @media all and (min-width: 460px) { .div-main { display: flex; flex-direction: row; flex-wrap:wrap; } .div-desktop-left { width: 80%; margin-right: auto; } .div-desktop-right { width: 20%; margin-left: auto; } .div-001 { /* example */ height: 70px; order: 2; } .div-002 { /* example */ align-self: flex-start; height: 50px; order: 1; } .div-003 { /* example */ height: 20px; order: 3; } }
<header class="header"></header> <div class="div-main"> <div class="div-001 div-mobile-001 div-desktop-002 div-desktop-right div-desktop-right-001"><a href="#">Desktop link 002</a></div> <div class="div-002 div-mobile-002 div-desktop-001 div-desktop-left div-desktop-left-001"><a href="#">Desktop link 001</a></div> <div class="div-003 div-mobile-003 div-desktop-003 div-desktop-right div-desktop-right-002"><a href="#">Desktop link 003</a></div> </div> <footer class="footer"></footer>
由于我刚接触Flexbox，无法获得所需的东西
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.