该代码具有三个div,这些div在dom中由div-00#排序
我想使用flexbox(宽度> = 460像素)创建以下布局(请查看图片)
添加:18-12-16-
有谁能建议如何使用flexbox做到这一点?
选项卡顺序还有第二个问题,但是最好对布局进行排序。
ON MOBILE(例如<460px)-在.div-main中:
所有的div都是父div的100%,顺序为.div-001 -div-002 .div-003。
在桌面上(例如> = 460px)-在.div-main中:
由于高度不同,我不使用浮子,因为这种情况发生在台式机上
。
.div-001-位置:右上角。高度:变化。宽度:20%。理想情况下,选项卡索引应该为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>
答案 0 :(得分:0)
无法通过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>
答案 1 :(得分:0)
问题在于给.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>