Question

我正在尝试从中间到左边的布局，如图所示。如何使用Flex使灰色div向上推呢？我应该只使用固定位置吗？考虑过要更改html以为橙色和灰色框创建容器div，但我想看看如何在不更改html的情况下做到这一点。

example picture

@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>

Answer 1

我看不到仅使用flex的任何解决方案，因为盒子会成行排列。因此，正如您提到的，为灰色框使用定位是实现此目的的唯一方法。

这是使用网格的解决方案：

body, html {
    height: 100%;
    padding:0;
    margin: 0;
}

* {
    box-sizing: border-box;
}

.container {
    display: grid;
    grid-template-areas:
        "a"
        "b"
        "c"
        "d"
        "e";
    grid-template-rows: 1fr 60% 1fr 1fr 1fr;
    height: 100%;
    background-color: red;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
}

header {
    grid-area: a;
    color: white;
    background-color: black;
}

.main-content {
    grid-area: b;
    background-color: dodgerblue;
}

.orange {
    grid-area: c;
    order: 4;
    background-color: orangered;
}

.grey {
    grid-area: d;
    background-color: grey;
}

footer {
    grid-area: e;
    color: white;
    background-color: navy;
}

@media ( min-width: 768px ) {
    .container {
        grid-template-areas:
            "a a"
            "b b"
            "d c"
            "e e";
        grid-template-rows: 15% 4fr 1fr 15%;
        grid-template-columns: 15% 1fr;
}

@media ( min-width: 992px ) {
    .container {
        grid-template-areas:
            "a a"
            "c b"
            "d b"
            "e e";
        grid-template-rows: 15% 4fr 1fr 15%;
        grid-template-columns: 15% 1fr;
    }
}

<div class="container">
    <header class="box">this is the header</header>
    <div class="box main-content">this is main content</div>
    <div class="box orange">this is the orange</div>
    <div class="box grey">this is the grey</div>
    <footer class="box">this is the footer</footer>
</div>

Answer 2

您可以使用order样式的flex子代来影响它们在flex父代中的显示顺序，但是这确实需要一些div包装，因此您必须更改HTML略，否则必须使用CSS网格。以下是您的图片的工作示例的片段：

: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>

彼此下方弯曲设置项目

2 个答案: