Inspiring

Question

Help with CSS Code

Forum|Forum|3 years ago
April 9, 2022
3 replies
842 views

Hello
I came across some css code and I need help in understanding it.
I found the code here: https://www.quackit.com/css/flexbox/tutorial/create_a_responsive_flexbox_layout.cfm

What does the arrow mean? #main > article {
Also what does this mean? order: -1;
Also the media query section:
#main > nav,
#main > aside {
flex: 0 0 20vw;
---------------------------

#main > article {
flex: 1;
background: #ffffdf;
}
#main > nav,
#main > aside {
background: #e9e9e9;
}

#main > nav {
order: -1;
}

<!doctype html>
<title>Example</title>
<html>
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
    box-sizing: border-box;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
}

#main {
    display: flex;
    flex: 1;
    flex-direction: column;
}

#main > article {
    flex: 1;
      background: #ffffdf;
}
#main > nav,
#main > aside {
    background: #e9e9e9;
}

#main > nav {
    order: -1;
}

header {
    background: #ffa07a;
    height: 15vh;
}

footer {
    background: #2f97ff;
    height: 10vh;
}

h1 {
font-size: 3.0em;
font-weight: bold;
margin: 0px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
color: #ffffd9;
font-family: Georgia, serif, serif;
text-shadow: 2px 1.5px 3px #000000;
}

p {
font-family: 'Open Sans', sans-serif;
font-size: 1.1em;
font-weight: bold;
color: #14110e;
line-height: 1.3em;
text-align: left;
margin: 0px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
word-wrap: break-word;
}

@media screen and (min-width: 576px) {
    #main {
        flex-direction: row;
    }
    #main > nav,
    #main > aside {
        flex: 0 0 20vw;
    }
}

</style>

<body>
<header><h1>Header</h1>
</header>

<div id="main">

<article><p>Article</p>
</article>

<nav><p>Nav</p>
</nav>

<aside><p>Aside</p>
</aside>
</div>

<footer><p>Footer</p>
</footer>

</body>
</html>

This topic has been closed for replies.

Nancy OShea

Community Expert

This is a Dreamweaver product forum. For code reference, I urge you to add these sites to your browser bookmarks.

Nancy O'Shea— Product User & Community Expert

B i r n o u

Legend

it's cool to repeat the links indicated by @L e n a

davidhelpAuthor

Inspiring

Thanks for the help.

What is agravating is the many ways to do the same thing and those trying to help at various websites use different ways to display the same layout.

I found this at the CSS-Tricks> Guides site and it is pretty straight forward and makes sense to me for the most part where as the original post from me, that person used code unfamiliar to me such as " #main > article { "

Simple layout that I understand for the most part using @media all and (min-width:

https://codepen.io/chriscoyier/pen/vWEMWw

From this article:

A Complete Guide to Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

L

L e n a

Community Expert

in fact the answer of @osgood_ is well seen, but it will not work because the second SPAN is itself encapsulated in its parent, the first SPAN, so it will inherit the color of this one. and wont demonstrate the purpose

in fact the > operator indicates the very first level of encapsulation,

so in the example below, only the first two P direct childs of BODY will be affected...

the third P being itself child of DIV and thus not first child of BODY will not be affected

<style>
   body > p {
      color:red;
   }
</style>
<body>
    <p>first</p>
    <p>second</p>
    <div>
        <p>third</p>
    </div>
</body>

concerning ORDER, I will add that the negative sign allows to regress the order below 1 thus accentuates the priority

https://developer.mozilla.org/en-US/docs/Web/CSS/order

concerning the media request, I suppose you are referring to the description

flex : 0 0 20vw

the three parameters stands for

flex-grow,
flex-shrink
flex-basis

you will get a clear description there https://css-tricks.com/snippets/css/a-guide-to-flexbox/

if that is the vw unit that cause your question, it is a relative unit

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

chapter Relative length units

O

osgood_

Legend

in fact the answer of @osgood_ is well seen, but it will not work because the second SPAN is itself encapsulated in its parent, the first SPAN, so it will inherit the color of this one. and wont demonstrate the purpose

By @L e n a

Good catch. I should have tested before I posted. I'm obviously losing it now I'm not involved with web-development so much these days!!!

L

L e n a

Community Expert

In fact, I would have made the same mistake as you and while reading your answer, I suddenly clicked on the inheritance, which made me realize that it could not demonstrate the concept 😉

O

osgood_

Legend

The arrow selector will apply the styling to any child element within its parent element.

In the example below only the child span text of the wrapper will be red. The span text within the child span won't be affected.

.wrapper > span {

color: red;

}

<span>

Some text in child span

</span>

</div>

Whereas if you did;

.wrapper span {

color: red;

}

All text within span tags in the wrapper would be red.

order: -1;

That just reorders the position of where an element appears in mobile or desktop devices

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded