彼此下方的弯曲设置项目 [英] flex setting items below each other
问题描述
我正在尝试从中间到左侧获得布局，如图所示. 我该如何使灰色div使用flex向上推呢?我应该只使用固定位置吗?考虑过要更改html以为橙色和灰色框创建容器div，但是我想看看如何在不更改html的情况下做到这一点.
i'm trying to get to the layout from middle to left as shown in the picture. How can i make the grey div to push itself up using flex? Should i just use fixed position for it? Thought about changing the html to create container div for the orange and grey boxes, but I want to see how to do it without changing the html.
@import 'general.css';
@import 'reg.css';
@import "768.css" screen and (min-width : 992px);
@import "992.css" screen and (min-width : 1200px);
/*general*/
body, html{
margin: 0;
padding:0;
height: 100%;
}
* {
box-sizing: border-box;
}
/*reg*/
.container{
background-color: red;
text-align: center;
display: flex;
height: 100%;
flex-wrap: wrap;
}
.box{
height: 10%;
width: 100%;
}
header{
background-color: black;
color: white;
width: 100%;
order:1;
}
footer{
background-color: navy;
color: white;
width: 100%;
order:5;
}
.main-content{
background-color: dodgerblue;
height: 60%;
width: 100%;
order:2;
}
.grey{
background-color: grey;
order:4;
}
.orange{
background-color: orangered;
order:3;
}
/*768*/
.box{
height: 11%;
}
.main-content{
height: 67%;
}
.grey{
width: 30%;
order:3;
}
.orange{
background-color: orangered;
width: 70%;
order:4;
}
/*992*/
.main-content{
width: 85%;
order:3;
align-self: flex-end;
height: 80%;
}
.grey{
width: 15%;
order:4;
align-self: flex-start;
height:20% ;
}
.orange{
width:15%;
order:2;
align-self: flex-start;
height: 60%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/index.css">
<title>Document</title>
</head>
<body>
<div class="container">
<header class="box">this is the header</header>
<div class="main-content box">this is main content</div>
<div class="orange box">this is the orange</div>
<div class="grey box">this is the grey</div>
<footer class="box">this is the footer</footer>
</div>
</body>
</html>
推荐答案
您可以使用flex子代的order样式来影响它们在flex父代中的呈现顺序，但是这确实需要一些包装div s，因此您必须稍微更改HTML，否则必须使用CSS网格.以下是您的图片的示例示例:
You can use the order style of flex children to affect what order they are rendered inside of a flex parent, however this does require some wrapping divs so you'd have to change your HTML slightly, otherwise you must use CSS grid. Snippet with working example of your images below:
:root {
--min-height: 80px;
}
* {
border-sizing: border-box;
padding: 0;
margin: 0;
}
html, body, .container {
height: 100%;
}
body {
padding: 10px;
}
div {
border-radius: 10px;
}
.container {
display: flex;
flex-direction: column;
}
.container > div {
margin-bottom: 10px;
}
.container > div:last-child {
margin: 0;
}
.main-content > div {
margin-bottom: 10px;
}
.main-content > div:last-child {
margin: 0;
}
.side-content > div {
margin-bottom: 10px;
}
.side-content > div:last-child {
margin: 0;
}
.header, .footer, .content {
min-height: var(--min-height);
}
.teal.content {
min-height: calc(5 * var(--min-height));
}
.black {
background: rgb(30, 32, 42);
}
.teal {
background: rgb(74, 161, 162);
}
.orange {
background: rgb(253, 170, 82);
}
.gray {
background: rgb(203, 187, 172);
}
.navy {
background: rgb(61, 94, 109);
}
@media screen and (min-width: 768px) {
.side-content {
display: flex;
flex-direction: row;
}
.side-content > div {
margin: 0;
}
.side-content > div:last-child {
margin-right: 10px;
}
.orange {
flex: 2 0 auto;
order: 1;
}
.gray {
flex: 1 0 auto;
order: 0;
}
}
@media screen and (min-width: 992px) {
.main-content {
display: flex;
flex-direction: row;
}
.main-content > div {
margin: 0;
}
.main-content > div:last-child {
margin-right: 10px;
}
.side-content {
order: 0;
flex: 1 0 auto;
flex-direction: column;
margin-right: 10px;
}
.side-content > div:last-child {
margin: 0;
}
.side-content > div:first-child {
margin-bottom: 10px;
}
.orange {
order: 0;
margin-bottom: 10px;
}
.teal {
order: 1;
flex: 7 0 auto;
}
}
<div class="container">
<div class="black header"></div>
<div class="main-content">
<div class="teal content"></div>
<div class="side-content">
<div class="orange content"></div>
<div class="gray content"></div>
</div>
</div>
<div class="navy footer"></div>
</div>
这篇关于彼此下方的弯曲设置项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
