πŸ”΅ CSS - flexible

jea_iΒ·2022λ…„ 2μ›” 7일
CSS
0

CSS

λͺ©λ‘ 보기
18/19
post-thumbnail
<body>
    <div class="box floatLayout">
        <div class="item i1"></div>
        <div class="item i2"></div>
        <div class="item i3"></div>
        <div class="item i4"></div>
    </div>
    <!-- λΆ€λͺ¨μš”μ†Œ :  flex box or λΆ€λͺ¨λ°•μŠ€ -->
    <div class="box flexLayout">
        <!-- 정렬될 λŒ€μƒ : flex item -->
        <div class="item i1"></div>
        <div class="item i2"></div>
        <div class="item i3"></div>
        <div class="item i4"></div>
    </div>
</body>

<style>
div.box{
    width: 1080px;
    outline: 2px solid red;
    margin: 0 auto;
    margin-top: 80px;
}
div.box .item{
    width: calc(50% - 20px);
    height: 300px;
}
div.box .i1{background-color: #fc0;}
div.box .i2{background-color: #f90;}
div.box .i3{background-color: #f30;}
div.box .i4{background-color: #99f;}

div.floatLayout{
    overflow: hidden;
}
div.floatLayout .item{
    float: left;
    margin: 0 10px;
}
div.floatLayout .i3,
div.floatLayout .i4{margin-top: 20px;}

div.flexLayout{
    /* λΆ€λͺ¨μš”μ†Œμ— flex 적용 */
    /* User Agent : display: block; */
    display: flex;
    justify-content: space-around;
    /* μ•„μ΄ν…œκ°’μ΄ λΆ€λͺ¨λ°•μŠ€ 크기보닀 클 λ•Œ 적용 */
    flex-wrap: wrap;
    /* ν–‰μ˜ 간격 */
    row-gap: 20px;
}
div.flexLayout .item{}
</style>
profile
jea_i
μ—΄μ •μ—΄μ •μ—΄μ •πŸ”₯
이전 포슀트

πŸ”΅ CSS - emoziFont

λ‹€μŒ 포슀트

πŸ”΅ CSS - pseudoClass

0개의 λŒ“κΈ€

κ΄€λ ¨ μ±„μš© 정보