问题
I need to make the pink element at the left and all the other needs to be right side width: calc(100% - 250px) just like the image shows
The reason why I use display: flex I need to use order for mobile and tablet devices. I have been trying with the properties of flex-basis but unfortunately none my tricks are not working 😃
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
body > * {
box-sizing: border-box;
-webkit-box-flex: 1;
-webkit-flex: 1 calc(100% - 250px);
-ms-flex: 1 calc(100% - 250px);
flex: 1 calc(100% - 250px);
padding: 10px;
}
header {
background: tomato;
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
section {
text-align: left;
background: deepskyblue;
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
aside {
background: hotpink;
-webkit-box-flex: 1;
-webkit-flex: 1 250px;
-ms-flex: 1 250px;
flex: 1 250px;
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
footer {
background: lightgreen;
ordeR: 4;
}<header>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam provident at, itaque ea quia. Quaerat accusamus ex reprehenderit harum nulla quis ipsam maxime necessitatibus atque cupiditate quidem, earum laborum pariatur</header>
<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, minima excepturi asperiores delectus eaque eligendi, aliquam quos itaque. Eligendi ipsum sapiente inventore, unde consectetur quos aliquam iure ipsam fugit ratione.</aside>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, modi quis vel tempora assumenda corporis quaerat at pariatur suscipit dolores eveniet, delectus deleniti quisquam. Nisi minus, voluptate repudiandae modi laboriosam</section>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit at placeat voluptate distinctio atque aliquam et enim, quam, laudantium, velit molestias earum culpa ipsam. Deleniti totam natus saepe distinctio officia.</footer>Demo: https://jsfiddle.net/20fet497/
回答1:
You can achieve this layout with a nested flex container set to column direction:
HTML
<aside>aside</aside>
<div id="inner-flex-container">
<header>header</header>
<section>section</section>
<footer>footer</footer>
</div>
CSS
html {
height: 100%;
box-sizing: border-box; /* https://css-tricks.com/box-sizing/ */
}
*, *:before, *:after {
box-sizing: inherit; /* https://css-tricks.com/box-sizing/ */
}
body {
margin: 0;
min-height: 100%;
display: flex; /* body is the outer flex container */
flex-flow: row wrap;
text-align: center;
}
#inner-flex-container {
display: flex;
flex-direction: column;
width: calc(100% - 250px);
}
aside { flex: 1 250px; background: hotpink; }
header { flex: 1; background: tomato; }
section { flex: 4; background: deepskyblue; }
footer { flex: 1; background: lightgreen; }
The code above creates this responsive, flexible layout (and it's all valid HTML):
DEMO 1
Adjusting layout for mobile / tablet devices
With the HTML above, the order property can still be used to re-arrange flex items:
CSS (added the order property and media query)
html {
height: 100%;
box-sizing: border-box; /* https://css-tricks.com/box-sizing/ */
}
*, *:before, *:after {
box-sizing: inherit; /* https://css-tricks.com/box-sizing/ */
}
body {
margin: 0;
min-height: 100%;
display: flex; /* body is the outer flex container */
flex-flow: row wrap;
text-align: center;
}
#inner-flex-container {
display: flex;
flex-direction: column;
width: calc(100% - 250px);
order: 1;
}
aside { flex: 1 250px; order: 0; background: hotpink; }
header { flex: 1; order: 0; background: tomato; }
section { flex: 4; order: 1; background: deepskyblue; }
footer { flex: 1; order: 2; background: lightgreen; }
@media screen and ( max-width: 500px) {
body { flex-direction: column; }
aside { flex: 1; order: 2; }
#inner-flex-container { width: 100%; flex: 1; }
}
DEMO 2
Using order, one block of flex items – aside and #inner-flex-container – can be re-arranged.
A second block of flex items – header, section and footer – can also be re-arranged.
The only limitation to order in this case would be if you wanted to re-arrange aside within the #inner-flex-container block.
(Of course, life being what it is, you've revised your question to say this limitation is exactly what you need :-)
回答2:
Here is a solution doing exactly what you asked, with your structure kept and a media query to re-position the aside when screen gets bigger.
Edit: Second version, using flex and media query.
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
display: flex;
flex-flow: column;
}
body > * {
box-sizing: border-box;
padding: 10px;
}
header {
background: tomato;
flex: 0;
}
section {
flex: 1;
text-align: left;
background: deepskyblue;
}
aside {
flex: 0;
background: hotpink;
}
footer {
flex: 0;
background: lightgreen;
}
@media screen and ( min-width: 500px) {
body {
flex-wrap: wrap;
max-height: 100%;
}
aside {
min-height: 100vh;
width: 150px;
order: 1;
}
header,
section,
footer {
order: 2;
width: calc(100% - 150px);
}
}<header>Header</header>
<aside>Aside</aside>
<section>Section</section>
<footer>Footer</footer>First version, where I used position absolute and flex.
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
display: flex;
flex-flow: column;
position: relative;
}
body > * {
box-sizing: border-box;
padding: 10px;
}
header {
background: tomato;
flex: 0;
}
section {
flex: 1;
text-align: left;
background: deepskyblue;
}
aside {
flex: 0;
background: hotpink;
}
footer {
flex: 0;
background: lightgreen;
}
@media screen and ( min-width: 500px) {
aside {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 150px
}
header,
section,
footer {
margin-left: 150px;
}
}<header>Header</header>
<aside>Aside</aside>
<section>Section</section>
<footer>Footer</footer>回答3:
You actually try to mix kind of a mix of row and column layout. wich flex does not do. But flex boxes can be inbricated, and that will do.
you should not use flex for aside , but height and set height to body (not min-height), from there you can wrap your columns and draw 2 of them in one row.
But the fixed height won't allow body to grow taller and html to scroll, unless you overide this and update body's height via javascript ... if inbrication is really not an option.
html, body {
height: 100%;
width:100%;
}
body {
margin: 0;
height: 100%;/*maybe not min-height but height usable for aside */
/* beside, i guess IE will get it via height */
display:flex;
flex-wrap:wrap;
flex-direction:column;
}
header {
background: tomato;
order: 2;
flex:1;
}
section {
text-align: left;
background: deepskyblue;
order: 3;
width:calc(100% - 250px);/* remove here width of aside , px, %, vw, whatever value used */
flex:4;/* or more, or less, depends how much you want header/footer to shrink when everything is empty or small contents */
}
aside {
background: hotpink;
height:100%;
width:250px;
order:1;
/* no flex values here, just use height */
}
footer {
background: lightgreen;
order: 4;
flex:1;
}
body>* {
box-sizing:border-box;
padding:10px;
/* add X,Y center
display:flex;
font-size:4vw;
align-items:center;
justify-content:center; */
}<header>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam provident at, itaque ea quia. Quaerat accusamus ex reprehenderit harum nulla quis ipsam maxime necessitatibus atque cupiditate quidem, earum laborum pariatur</header>
<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, minima excepturi asperiores delectus eaque eligendi, aliquam quos itaque. Eligendi ipsum sapiente inventore, unde consectetur quos aliquam iure ipsam fugit ratione.</aside>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, modi quis vel tempora assumenda corporis quaerat at pariatur suscipit dolores eveniet, delectus deleniti quisquam. Nisi minus, voluptate repudiandae modi laboriosam</section>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit at placeat voluptate distinctio atque aliquam et enim, quam, laudantium, velit molestias earum culpa ipsam. Deleniti totam natus saepe distinctio officia.</footer>DEMO to play with
To allow aside to be rezized , you may use max-width and min-width (see snippet below)
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
header {
background: tomato;
order: 2;
flex: 1;
}
section {
text-align: left;
background: deepskyblue;
order: 3;
flex: 4;
/* or more, or less, depends how much you want header/ffoter to shrink when everything is empty or small contents */
}
header,
section,
footer {
width: calc(100% - 20%);
/* that's about aside's width */
max-width: calc(100% - 150px);
/* keep room for aside's min-width */
overflow: auto;
}
aside {
background: hotpink;
height: 100%;
min-width: 150px;
/* keep it not smaller than */
width: 20%;
/* don let it grow more than */
order: 1;
}
footer {
background: lightgreen;
order: 4;
flex: 1;
}
body>* {
padding: 10px;
box-sizing: border-box;
overflow: auto;
}<header>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam provident at, itaque ea quia. Quaerat accusamus ex reprehenderit harum nulla quis ipsam maxime necessitatibus atque cupiditate quidem, earum laborum pariatur</header>
<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, minima excepturi asperiores delectus eaque eligendi, aliquam quos itaque. Eligendi ipsum sapiente inventore, unde consectetur quos aliquam iure ipsam fugit ratione.</aside>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, modi quis vel tempora assumenda corporis quaerat at pariatur suscipit dolores eveniet, delectus deleniti quisquam. Nisi minus, voluptate repudiandae modi laboriosam</section>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit at placeat voluptate distinctio atque aliquam et enim, quam, laudantium, velit molestias earum culpa ipsam. Deleniti totam natus saepe distinctio officia.</footer>回答4:
You could try something like this
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.wrapper {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap; /* Safari 6.1+ */
flex-flow: column wrap;
height: 100vh;
}
.wrapper > * {
padding: 10px;
}
.header {
background: tomato;
width: calc(100% - 15%);
}
.aside {
background: hotpink;
-webkit-flex-basis: 100%;
flex-basis: 100%;
width: 15%;
}
.main {
background: deepskyblue;
-webkit-flex-grow: 1;
flex-grow: 1;
width: calc(100% - 15%);
}
.footer {
background: lightgreen;
width: calc(100% - 15%);
}
@media (max-width: 800px) {
.header {
order: 1;
width: 100%;
}
.aside {
order: 2;
-webkit-flex-basis: auto;
flex-basis: auto;
width: 100%;
}
.main {
order: 3;
width: 100%;
}
.footer {
order: 4;
width: 100%;
}
}<div class="wrapper">
<aside class="aside">Aside</aside>
<header class="header">Header</header>
<article class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, modi
quis vel tempora assumenda corporis quaerat at pariatur suscipit
dolores eveniet, delectus deleniti quisquam. Nisi minus, voluptate
repudiandae modi laboriosam.
</p>
</article>
<footer class="footer">Footer</footer>
</div>回答5:
You should use float: right and float: left, and accordingly add width and height. Example could look like this:
html {
height: 100%;
}
body {
margin: 0;
}
header {
background: tomato;
height: 20%;
float: right;
width: 85%;
}
section {
height: 60%;
width: 85%;
background: deepskyblue;
float: right;
}
aside {
background: hotpink;
width: 15%;
height: 100%;
float: left;
}
footer {
background: lightgreen;
width: 85%;
height: 20%;
float: right;
}
来源：https://stackoverflow.com/questions/34380985/how-to-make-side-menu-with-flexbox