flexbox에서 두 번째 하위 div의 배경색을 변경하십시오.

Question

flexbox의 두 번째 하위 div의 배경색을 빨간색으로 설정하려고하지만 그렇게 할 수 없습니다. 첫 번째 자식의 배경색 만 설정할 수 있습니다.

https://jsfiddle.net/mademoiselletse/e5nhca58/2/

.main{ 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-flow: row wrap; 
 
} 
 
.left_col{ 
 
    width: 350px; 
 
    background-color: green; 
 
}; 
 
.right_col{ 
 
    width: 350px; 
 
    background-color: red; 
 
}

<div class="main"> 
 
    <div class="left_col"> 
 
    This is the left column. It should be green. 
 
    </div> 
 
    <div class="right_col"> 
 
    This is the right column. It should be red. 
 
    </div> 
 
</div>

는

번째 자식 텍스트는 또한 첫번째 아이 다르게 정렬된다. 첫 번째 자녀의 텍스트는 왼쪽으로 정렬되고 두 번째 자녀는 가운데 맞춤으로 정렬됩니다. 나는 flexbox에 처음이다. 도와 주셔서 감사합니다!

Answer 1

;은 CSS에서 허용되지 않으므로 스타일 시트가 손상됩니다. 를 제거하고이 작동합니다

.main{ 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-flow: row wrap; 
 
} 
 
.left_col{ 
 
    width: 350px; 
 
    background-color: green; 
 
} 
 
.right_col{ 
 
    width: 350px; 
 
    background-color: red; 
 
}

<div class="main"> 
 
    <div class="left_col"> 
 
    This is the left column. It should be green. 
 
    </div> 
 
    <div class="right_col"> 
 
    This is the right column. It should be red. 
 
    </div> 
 
</div>