CSS'te Flex yapısı yapısı nasıldır?

Randoming321 · 21 Ocak 2023

Flex: 1 komutu ne işe yarar arkadaşlar, acıklayacak var mı?

nyksgod · 23 Ocak 2023

flex-grow : 1 ile aynı anlama geliyor.
içine 3 değer alır üçünü de ayrı ayrı yazmak yerine bir satırda halledilebilir,
flex : flex-grow (default 0) | flex-shrink (default 1) | flex-basis (default auto) şeklinde

örnek vermek gerekirse
flex : 1 0 200px;
şeklinde olabilir.

flex-shrink ise flex-basis ile beraber kullanılır alta küçük bir örnek koyuyorum yorum satırlarını tek tek silerek görebilirsiniz.

HTML:

    <style>
        #main{
            border: 5px solid gray;
            display: flex;
            width: 300px;
            height: 300px;
        }
        /* flex:1 */
        /* flex : flex-grow | flex-shrink | flex-basis */
        #main .content{
            /* flex:1; */
            /* flex-grow: 1; */
        }

        /* flex-shrink ve flex basis */
        .content{
            /* flex-basis: 200px; */
        }
      
        .a{
            /* flex-shrink: 0; */
        }
    </style>

    <main id="main">
        <div class="content a" style="background: rgb(115, 115, 202);">
            <p>Content</p>
        </div>
        <div class="content b" style="background: rgb(115, 202, 129);">
            <p>Content</p>
        </div>
        <div class="content c" style="background: rgb(202, 115, 115);">
            <p>Content</p>
        </div>
    </main>

CSS'te Flex yapısı yapısı nasıldır?

Ayrıntılı düzenleme

Randoming321

Decapat

nyksgod

Femtopat

Benzer konular

Bu konuyu görüntüleyen kullanıcılar