New to Flexbox - what do I need to do?
3
The code has three divs that are ordered in the dom by div-00#
What I'd like to create using flexbox (for width >= 460px) is the following layout (please see images)
Added: 18-12-16 -
is anyone able to suggest how to do this using flexbox?
There is a second issue with the tab order but would appreciate sorting the layout first.
ON MOBILE (say < 460px) - within the .div-main:
All the divs are 100% of the parent div, ordered .div-001 -div-002 .div-003.
ON DESKTOP (say >= 460px) - within the .div-main:
Because of varying heights I'm not using floats, as this happens on desktop
.
.div-001 -- Position: Top Right. Height: Varying. Width: 20%. Ideally the tab index should be 2 (therefore I've used flex to order this '2') but know that the order is read out by the order of the DOM.
.div-002 -- Position: Top Left. Height: Varying. Width: 80%. Ideally the tab index should be 1 (therefore I've used flex to order this '1')
.div-003 -- Position: Right (Directly below .div-003). Height: Varying. Width: 20%. Ideally the tab index should be 3 (therefore I've used flex to order this '3')
The order (just in case you were wondering) is important.
* {
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>css css3 flexbox
asked Nov 25 '18 at 13:13
Geoff CapesGeoff Capes
165
add a comment |
3
The code has three divs that are ordered in the dom by div-00#
What I'd like to create using flexbox (for width >= 460px) is the following layout (please see images)
Added: 18-12-16 -
is anyone able to suggest how to do this using flexbox?
There is a second issue with the tab order but would appreciate sorting the layout first.
ON MOBILE (say < 460px) - within the .div-main:
All the divs are 100% of the parent div, ordered .div-001 -div-002 .div-003.
ON DESKTOP (say >= 460px) - within the .div-main:
Because of varying heights I'm not using floats, as this happens on desktop
.
.div-001 -- Position: Top Right. Height: Varying. Width: 20%. Ideally the tab index should be 2 (therefore I've used flex to order this '2') but know that the order is read out by the order of the DOM.
.div-002 -- Position: Top Left. Height: Varying. Width: 80%. Ideally the tab index should be 1 (therefore I've used flex to order this '1')
.div-003 -- Position: Right (Directly below .div-003). Height: Varying. Width: 20%. Ideally the tab index should be 3 (therefore I've used flex to order this '3')
The order (just in case you were wondering) is important.
* {
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>css css3 flexbox
asked Nov 25 '18 at 13:13
Geoff CapesGeoff Capes
165
add a comment |
3
3
3
The code has three divs that are ordered in the dom by div-00#
What I'd like to create using flexbox (for width >= 460px) is the following layout (please see images)
Added: 18-12-16 -
is anyone able to suggest how to do this using flexbox?
There is a second issue with the tab order but would appreciate sorting the layout first.
ON MOBILE (say < 460px) - within the .div-main:
All the divs are 100% of the parent div, ordered .div-001 -div-002 .div-003.
ON DESKTOP (say >= 460px) - within the .div-main:
Because of varying heights I'm not using floats, as this happens on desktop
.
.div-001 -- Position: Top Right. Height: Varying. Width: 20%. Ideally the tab index should be 2 (therefore I've used flex to order this '2') but know that the order is read out by the order of the DOM.
.div-002 -- Position: Top Left. Height: Varying. Width: 80%. Ideally the tab index should be 1 (therefore I've used flex to order this '1')
.div-003 -- Position: Right (Directly below .div-003). Height: Varying. Width: 20%. Ideally the tab index should be 3 (therefore I've used flex to order this '3')
The order (just in case you were wondering) is important.
* {
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>css css3 flexbox
asked Nov 25 '18 at 13:13
Geoff CapesGeoff Capes
165
The code has three divs that are ordered in the dom by div-00#
What I'd like to create using flexbox (for width >= 460px) is the following layout (please see images)
Added: 18-12-16 -
is anyone able to suggest how to do this using flexbox?
There is a second issue with the tab order but would appreciate sorting the layout first.
ON MOBILE (say < 460px) - within the .div-main:
All the divs are 100% of the parent div, ordered .div-001 -div-002 .div-003.
ON DESKTOP (say >= 460px) - within the .div-main:
Because of varying heights I'm not using floats, as this happens on desktop
.
.div-001 -- Position: Top Right. Height: Varying. Width: 20%. Ideally the tab index should be 2 (therefore I've used flex to order this '2') but know that the order is read out by the order of the DOM.
.div-002 -- Position: Top Left. Height: Varying. Width: 80%. Ideally the tab index should be 1 (therefore I've used flex to order this '1')
.div-003 -- Position: Right (Directly below .div-003). Height: Varying. Width: 20%. Ideally the tab index should be 3 (therefore I've used flex to order this '3')
The order (just in case you were wondering) is important.
* {
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>* {
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>* {
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>css css3 flexbox
css css3 flexbox
asked Nov 25 '18 at 13:13
Geoff CapesGeoff Capes
165
asked Nov 25 '18 at 13:13
Geoff CapesGeoff Capes
165
edited Dec 16 '18 at 11:32
Geoff Capes
asked Nov 25 '18 at 13:13
Geoff CapesGeoff Capes
165
asked Nov 25 '18 at 13:13
Geoff CapesGeoff Capes
165
asked Nov 25 '18 at 13:13
Geoff CapesGeoff Capes
165
165
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
Couldn't figure it out with flexbox,
Heres a solution using CSS Grid if you're not technology restricted:
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>answered Nov 25 '18 at 14:16
DmitriyDmitriy
600215
1
Almost! The divs can all be of varying height - .div-001 (top right) can be smaller than .div-002 (top left). The way you suggest means (I think ) that .div-003 sits immediately below both .div-001 and .div-002 - also I'm not sure on how the widths work with grid
– Geoff Capes
Nov 25 '18 at 16:04
add a comment |
0
The problem is with giving .div-main a flex-direction: column by doing that .div-desktop-left and .div-desktop-right will not align next to each other what you need change is to give .div-main flex-direction: row and flex-wrap: wrap and that will solve the problem
* {
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>answered Nov 25 '18 at 18:56
sara moghanamsara moghanam
10915
1
Hi Sara, again Almost - .On Mobile: div-001 is first, .div-002 is second, .div-003 is third - On Desktop: .div-002 is top left, .div-001 is top right, .div-003 is right (directly underneath of .div-001) - Your solution means: div-001 is top left, .div-002 is top right, .div-003 is right (directly underneath of .div-001). This could also be done with floats.
– Geoff Capes
Nov 25 '18 at 22:57
See the update.
– sara moghanam
Nov 26 '18 at 7:36
Hi Sara, again almost - The problem is that if .div-002 is greater in height than .div-001 then .div-003 does not sit directly below .div-001 instead it sits below the bottom of .div-002 on desktop I wanted the divs on the right to sit directly below (please see update, the second image)
– Geoff Capes
Dec 16 '18 at 11:30
I can't figure it out but you can apply a negative margin-top to div-003 to turn around this problem and if that not accepted consider using CSS grid.
– sara moghanam
Dec 16 '18 at 14:12
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53467821%2fnew-to-flexbox-what-do-i-need-to-do%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Couldn't figure it out with flexbox,
Heres a solution using CSS Grid if you're not technology restricted:
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>answered Nov 25 '18 at 14:16
DmitriyDmitriy
600215
1
Almost! The divs can all be of varying height - .div-001 (top right) can be smaller than .div-002 (top left). The way you suggest means (I think ) that .div-003 sits immediately below both .div-001 and .div-002 - also I'm not sure on how the widths work with grid
– Geoff Capes
Nov 25 '18 at 16:04
add a comment |
0
Couldn't figure it out with flexbox,
Heres a solution using CSS Grid if you're not technology restricted:
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>answered Nov 25 '18 at 14:16
DmitriyDmitriy
600215
1
Almost! The divs can all be of varying height - .div-001 (top right) can be smaller than .div-002 (top left). The way you suggest means (I think ) that .div-003 sits immediately below both .div-001 and .div-002 - also I'm not sure on how the widths work with grid
– Geoff Capes
Nov 25 '18 at 16:04
add a comment |
0
0
0
Couldn't figure it out with flexbox,
Heres a solution using CSS Grid if you're not technology restricted:
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>answered Nov 25 '18 at 14:16
DmitriyDmitriy
600215
Couldn't figure it out with flexbox,
Heres a solution using CSS Grid if you're not technology restricted:
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>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>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>answered Nov 25 '18 at 14:16
DmitriyDmitriy
600215
answered Nov 25 '18 at 14:16
DmitriyDmitriy
600215
answered Nov 25 '18 at 14:16
DmitriyDmitriy
600215
answered Nov 25 '18 at 14:16
DmitriyDmitriy
600215
600215
1
Almost! The divs can all be of varying height - .div-001 (top right) can be smaller than .div-002 (top left). The way you suggest means (I think ) that .div-003 sits immediately below both .div-001 and .div-002 - also I'm not sure on how the widths work with grid
– Geoff Capes
Nov 25 '18 at 16:04
add a comment |
1
Almost! The divs can all be of varying height - .div-001 (top right) can be smaller than .div-002 (top left). The way you suggest means (I think ) that .div-003 sits immediately below both .div-001 and .div-002 - also I'm not sure on how the widths work with grid
– Geoff Capes
Nov 25 '18 at 16:04
1
1
Almost! The divs can all be of varying height - .div-001 (top right) can be smaller than .div-002 (top left). The way you suggest means (I think ) that .div-003 sits immediately below both .div-001 and .div-002 - also I'm not sure on how the widths work with grid
– Geoff Capes
Nov 25 '18 at 16:04
Almost! The divs can all be of varying height - .div-001 (top right) can be smaller than .div-002 (top left). The way you suggest means (I think ) that .div-003 sits immediately below both .div-001 and .div-002 - also I'm not sure on how the widths work with grid
– Geoff Capes
Nov 25 '18 at 16:04
add a comment |
0
The problem is with giving .div-main a flex-direction: column by doing that .div-desktop-left and .div-desktop-right will not align next to each other what you need change is to give .div-main flex-direction: row and flex-wrap: wrap and that will solve the problem
* {
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>answered Nov 25 '18 at 18:56
sara moghanamsara moghanam
10915
1
Hi Sara, again Almost - .On Mobile: div-001 is first, .div-002 is second, .div-003 is third - On Desktop: .div-002 is top left, .div-001 is top right, .div-003 is right (directly underneath of .div-001) - Your solution means: div-001 is top left, .div-002 is top right, .div-003 is right (directly underneath of .div-001). This could also be done with floats.
– Geoff Capes
Nov 25 '18 at 22:57
See the update.
– sara moghanam
Nov 26 '18 at 7:36
Hi Sara, again almost - The problem is that if .div-002 is greater in height than .div-001 then .div-003 does not sit directly below .div-001 instead it sits below the bottom of .div-002 on desktop I wanted the divs on the right to sit directly below (please see update, the second image)
– Geoff Capes
Dec 16 '18 at 11:30
I can't figure it out but you can apply a negative margin-top to div-003 to turn around this problem and if that not accepted consider using CSS grid.
– sara moghanam
Dec 16 '18 at 14:12
add a comment |
0
The problem is with giving .div-main a flex-direction: column by doing that .div-desktop-left and .div-desktop-right will not align next to each other what you need change is to give .div-main flex-direction: row and flex-wrap: wrap and that will solve the problem
* {
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>answered Nov 25 '18 at 18:56
sara moghanamsara moghanam
10915
1
Hi Sara, again Almost - .On Mobile: div-001 is first, .div-002 is second, .div-003 is third - On Desktop: .div-002 is top left, .div-001 is top right, .div-003 is right (directly underneath of .div-001) - Your solution means: div-001 is top left, .div-002 is top right, .div-003 is right (directly underneath of .div-001). This could also be done with floats.
– Geoff Capes
Nov 25 '18 at 22:57
See the update.
– sara moghanam
Nov 26 '18 at 7:36
Hi Sara, again almost - The problem is that if .div-002 is greater in height than .div-001 then .div-003 does not sit directly below .div-001 instead it sits below the bottom of .div-002 on desktop I wanted the divs on the right to sit directly below (please see update, the second image)
– Geoff Capes
Dec 16 '18 at 11:30
I can't figure it out but you can apply a negative margin-top to div-003 to turn around this problem and if that not accepted consider using CSS grid.
– sara moghanam
Dec 16 '18 at 14:12
add a comment |
0
0
0
The problem is with giving .div-main a flex-direction: column by doing that .div-desktop-left and .div-desktop-right will not align next to each other what you need change is to give .div-main flex-direction: row and flex-wrap: wrap and that will solve the problem
* {
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>answered Nov 25 '18 at 18:56
sara moghanamsara moghanam
10915
The problem is with giving .div-main a flex-direction: column by doing that .div-desktop-left and .div-desktop-right will not align next to each other what you need change is to give .div-main flex-direction: row and flex-wrap: wrap and that will solve the problem
* {
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>* {
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>* {
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>answered Nov 25 '18 at 18:56
sara moghanamsara moghanam
10915
edited Nov 26 '18 at 7:35
answered Nov 25 '18 at 18:56
sara moghanamsara moghanam
10915
answered Nov 25 '18 at 18:56
sara moghanamsara moghanam
10915
answered Nov 25 '18 at 18:56
sara moghanamsara moghanam
10915
10915
1
Hi Sara, again Almost - .On Mobile: div-001 is first, .div-002 is second, .div-003 is third - On Desktop: .div-002 is top left, .div-001 is top right, .div-003 is right (directly underneath of .div-001) - Your solution means: div-001 is top left, .div-002 is top right, .div-003 is right (directly underneath of .div-001). This could also be done with floats.
– Geoff Capes
Nov 25 '18 at 22:57
See the update.
– sara moghanam
Nov 26 '18 at 7:36
Hi Sara, again almost - The problem is that if .div-002 is greater in height than .div-001 then .div-003 does not sit directly below .div-001 instead it sits below the bottom of .div-002 on desktop I wanted the divs on the right to sit directly below (please see update, the second image)
– Geoff Capes
Dec 16 '18 at 11:30
I can't figure it out but you can apply a negative margin-top to div-003 to turn around this problem and if that not accepted consider using CSS grid.
– sara moghanam
Dec 16 '18 at 14:12
add a comment |
1
Hi Sara, again Almost - .On Mobile: div-001 is first, .div-002 is second, .div-003 is third - On Desktop: .div-002 is top left, .div-001 is top right, .div-003 is right (directly underneath of .div-001) - Your solution means: div-001 is top left, .div-002 is top right, .div-003 is right (directly underneath of .div-001). This could also be done with floats.
– Geoff Capes
Nov 25 '18 at 22:57
See the update.
– sara moghanam
Nov 26 '18 at 7:36
Hi Sara, again almost - The problem is that if .div-002 is greater in height than .div-001 then .div-003 does not sit directly below .div-001 instead it sits below the bottom of .div-002 on desktop I wanted the divs on the right to sit directly below (please see update, the second image)
– Geoff Capes
Dec 16 '18 at 11:30
I can't figure it out but you can apply a negative margin-top to div-003 to turn around this problem and if that not accepted consider using CSS grid.
– sara moghanam
Dec 16 '18 at 14:12
1
1
Hi Sara, again Almost - .On Mobile: div-001 is first, .div-002 is second, .div-003 is third - On Desktop: .div-002 is top left, .div-001 is top right, .div-003 is right (directly underneath of .div-001) - Your solution means: div-001 is top left, .div-002 is top right, .div-003 is right (directly underneath of .div-001). This could also be done with floats.
– Geoff Capes
Nov 25 '18 at 22:57
Hi Sara, again Almost - .On Mobile: div-001 is first, .div-002 is second, .div-003 is third - On Desktop: .div-002 is top left, .div-001 is top right, .div-003 is right (directly underneath of .div-001) - Your solution means: div-001 is top left, .div-002 is top right, .div-003 is right (directly underneath of .div-001). This could also be done with floats.
– Geoff Capes
Nov 25 '18 at 22:57
See the update.
– sara moghanam
Nov 26 '18 at 7:36
See the update.
– sara moghanam
Nov 26 '18 at 7:36
Hi Sara, again almost - The problem is that if .div-002 is greater in height than .div-001 then .div-003 does not sit directly below .div-001 instead it sits below the bottom of .div-002 on desktop I wanted the divs on the right to sit directly below (please see update, the second image)
– Geoff Capes
Dec 16 '18 at 11:30
Hi Sara, again almost - The problem is that if .div-002 is greater in height than .div-001 then .div-003 does not sit directly below .div-001 instead it sits below the bottom of .div-002 on desktop I wanted the divs on the right to sit directly below (please see update, the second image)
– Geoff Capes
Dec 16 '18 at 11:30
I can't figure it out but you can apply a negative margin-top to div-003 to turn around this problem and if that not accepted consider using CSS grid.
– sara moghanam
Dec 16 '18 at 14:12
I can't figure it out but you can apply a negative margin-top to div-003 to turn around this problem and if that not accepted consider using CSS grid.
– sara moghanam
Dec 16 '18 at 14:12
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53467821%2fnew-to-flexbox-what-do-i-need-to-do%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
