1st article

중첩 플렉스박스: 특정 플렉스 아이템을 플렉스 컨테이너로 설정해줄 수도 있다. 그러면 그 컨테이너의 자식 요소들이 플렉스박스처럼 배치된다

                    
                        section {
                            display: flex;
                        } article { flex: 1 200px; }
                    
                

2nd article

중첩 플렉스박스: 특정 플렉스 아이템을 플렉스 컨테이너로 설정해줄 수도 있다. 그러면 그 컨테이너의 자식 요소들이 플렉스박스처럼 배치된다

                    
                        /*
                            3rd Article - 중첩 플렉스박스
                        */
                        article:nth-of-type(3) {
                            display: flex;
                            flex-flow: column;
                            flex: 3 200px;
                        }
                    
                

3rd article

                        
                            article:nth-of-type(3) div:first-child {
                                display: flex; flex-flow: row wrap; flex: 1 100px;
                            }
                            
                            button { flex: 1 auto; }