인프런 커뮤니티 질문&답변

air_guri

작성한 질문수

플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)

Festival Section 상세 퍼블리싱

justify-content :center

작성

292

선생님

저는 html의 통일성을 우선시해서 inner를 지우지 않고 각 섹션별로 지우지 않았습니다.

이후 각 section에 flex를 넣었는데 justify-content가 적용이 안되어서 우선은 text-align : center로 가운데 맞췄는데 왜 안되는지 알 수 있을까요?

        <section class="callaction">
            <div class="inner">
                <h2>The Most Simple & Powerful Way<br> to book your trip</h2>
                <a href="#">GET EARLY ACCESS</a>
            </div>
        </section> <!-- callaction -->

 
.callaction{
    background: url(../img/scenery-g46a0830e8_1920.jpg) no-repeat bottom center;
    height: 600px;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.callaction > .inner{
    position: relative;
}
.callaction h2{
    color: white;
    font-size: 48px;
    line-height: 2;
    margin-bottom: 20px;
    font-weight: 300;
}
.callaction::before{
    content: "";
    background: linear-gradient(to right bottom, transparent, skyblue);
    width: 100%;
    height: 100%;
    position: absolute;
}
.callaction a{
    font-size: 20px;
    background: white;
    color: dodgerblue;
    padding: 10px 20px;
    border-radius: 20px;
}
.callaction a:hover{
    background: dodgerblue;
    color: white;
}

* 선생님 푸터영역도 강좌를 보다가 flex를 1: 1: 2비율로 했는데 community영역이 1/4의 영역을 넘어 너무 크게 나오는데 이것도 추가적으로 코드랑 화면 올리겠습니다. 감사합니다.

        <footer>
            <div class="inner">
                <div class="footer_content">
                    <ul class="community">
                        <li><a href="#">Community</a></li>
                        <li><a href="#">Subscribe</a></li>
                        <li><a href="#">Give A Gift</a></li>
                        <li><a href="#">Customer Service FAQ</a></li>
                        <li><a href="#">Access Your Subscription</a></li>
                    </ul>
                    <ul class="netowrk">
                        <li><a href="#">Network</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms Of Service</a></li>
                        <li><a href="#">Advertise</a></li>
                        <li><a href="#">Jobs</a></li>
                    </ul>
                    <ul class="'help">
                        <li>Help Preserve This Project</li>
                        <li>We may earn a commission if you purchase an item </li>
                        <li>featured on our site.</li>
                        <li>Copyright ©  2020 CodingWorks. All rights reserved.</li>
                    </ul>
                </div> <!-- footer_content -->
            </div> <!-- inner -->
        </footer>

 
 
 
footer{
    background: black;
}
.footer_content{
    display: flex;
}
.footer_content ul{}
.footer_content ul li{
    text-align: center;
    border: 1px solid white;
}
.footer_content ul li a{
    color: #959595;
}
.community{
    flex: 1;
}
.network{
    flex: 1;
}
.help{
    flex: 2;
}
.footer_content ul li:first-child a{
    color: white;
}