[CSS] Flex

ChenΒ·2024λ…„ 6μ›” 4일
CSSFlex

CSS

λͺ©λ‘ 보기
8/8
post-thumbnail

FlexλŠ” μ½”λ“œλ§Œ

<style>
    .container {
        display: flex;
        /* flex-direction: row; */
        /* justify-content: center; */
        /* align-items: center; */
        height: 80vh;
        background: gray;
    }
    .item {
        /* flex-grow: 1;
        flex-basis: 0; */
        
        flex: 1; /* μΆ•μ•½ν˜• */
        
        /* padding: 2em; */
        border: 3px solid black;
        font-size: 3rem;
        background: white;
    }
    /* .item:nth-child(1){ flex-grow: 1;}
    .item:nth-child(2){ flex-grow: 5;}
    .item:nth-child(3){ flex-grow: 2;}
    .item:nth-child(4){ flex-grow: 3;}
    .item:nth-child(5){ flex-grow: 1;} */

</style>
</head>
<body>
    <div class="container">
        <div class="item">AAA</div>
        <div class="item">B</div>
        <div class="item">CCCCCC</div>
        <div class="item">DDD</div>
        <div class="item">E</div>
    </div>
</body>
</html>

profile
Chen
ν˜„μ‹€μ μΈ λͺ½μƒκ°€
이전 포슀트

[CSS] μΉ΄λ“œ Flip λΈŒλΌμš°μ € λŒ€μ‘

0개의 λŒ“κΈ€