W jaki sposób mam rozumieć taki zapis ?

pytanie zadane 17 sierpnia 2019 w HTML i CSS przez Radek Koniarski Użytkownik (870 p.)

jak mam rozumieć taki zapis ? są to dwa osobne divy ? czy jeden w drugim ?

<div class="header1 flex-container flex-100"></div>

2 odpowiedzi

odpowiedź 17 sierpnia 2019 przez Majonez.exe Gaduła (3,490 p.)

To są klasy elementów, nie wiem czy korzystasz z jakiegoś framework'a, każda klasa w class="", to osobny element w języku CSS. Np:

.header1 {
font-size: 30px;
}

.flext-container, .flex-100 {
display: flex;
}

pozwalają one formatować danego diva.

komentarz 17 sierpnia 2019 przez Rafajah Bywalec (2,090 p.)

Dokładnie. Dodatkowo możesz do każdej z tych klas odwołać się w JavaScriptcie np pobierając do zmiennej kolekcję wszystkich elementów danej klasy.

Nie wiem czy do czegoś jeszcze można wykorzystać to, że dany element jest przypisany do klasy ale stylowanie i "odnajdowanie" ich w JavaScriptcie są najbardziej istotnymi.

komentarz 17 sierpnia 2019 przez Radek Koniarski Użytkownik (870 p.)

Zobacz tak ma wyglądać układ jak na codepen ale ten który zrobiłem to nie wyszedł tzn nie wiem co zrobiłem źle ...

https://codepen.io/radek-koniarski/pen/EBQaeQ

a niżej mój kod

<body>
    <div class="wrap">
        <div class="nav"></div>
        <div class="header"></div>
        <div class="section2">
            <section>
                <div class="content"></div>
                <div class="content"></div>
                <div class="content"></div>
                <div class="content"></div>

            </section>
        </div>
        <aside></aside>
        <footer></footer>

 <style>
        * {
            margin: 0;

        }

        .wrap {
            width: 800px;
            margin: 0 auto;

        }

        .nav {
            display: flex;
            flex-flow: row wrap;
            min-height: 50px;
            width: 100%;
            background: red
        }

        .header {
            display: flex;
            flex-flow: row wrap;
            min-height: 50px;
            width: 100%;
            background: blue;

        }

        section {
            display: flex;
            flex-flow: row wrap;
            min-height: 50px;
            justify-content: space-around;
            flex: 1;
            width: 100%
        }

        .content {

            background-color: green;
            width: 100px;
            height: 100px;
            margin: 50px;
        }

        aside {
            width: 300px;
            margin: 0 0 0 50px;
            background: pink;
        }

        footer {

            display: flex;
            flex-flow: row wrap;
            min-height: 50px;
            width: 100%
        }

        .section2 {

            width: 100%;
            display: flex;
            flex-flow: row wrap;
            min-height: 50px
        }
    </style>