CSS flex (1)- 검색엔진 메인화면 만들기

8404 단어 CSSFlexCSS

항상 나를 골치아프게 만든는 가운데 정렬을 웹 페이지의 검색엔진 상단을 만들어 보며 복습해보겠다.

display-flex

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
         .topheader{
           display:flex;
           background: yellowgreen;
           padding: 10px 5px;
         }
        
        .topheader nav.left a{
          padding:10px;
          display:inline-block;
        }

        </style>
    </head>
    <body>
      <header class="topheader">
         <nav class="left">
           <a href="#">home</a>
           <a href="#">news</a>
           <a href="#">about</a>
         </nav>
         <form>
             <input type="text"/><input type="submit" value="Search"/>
         </form>
      </header>
    </body>
    </html>

이 코드는 플렉스를 적용한 코드이며 , 결과는 다음과 같다.

만약에 display:flex를 제외한다면 결과는 다음과 같이 정렬이 되지않은 모습이다

display: flex; 는 이것이 선언된 요소를 Flexbox container 로 바꾼다.
그러면 이 요소의 자식 요소들은 Flex item 이 되어 한 줄에 놓이게 된다.

각 flex item들은 main axis 나 cross axis 위에 놓이게 된다.

요소들을 main axis 에 정렬 (가로정렬) - justify-content

justify-content 의 종류는 다음과 같다.
flex-start (default) - 왼쪽부터 시작, justify-content 설정을 안한것과 같다.
flex-end
center
space-between
space-around

이 중 space-between 은 플렉스 아이템들이 동일 간격을 두고 양쪽에 위치하도록 만든다 . justify-content : space-between 이 적용되면 다음과 같다.

이 요소들의 가운데에 다른 요소를 추가한 후 확인해 보면 ,

가운데에 올바르게 배치되었음을 확인할 수 있다.

[purplepig4657]함수 객체와 함수의 다양한 형태
GraphQL.. 그래프?.. 뭐시기?..

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage