CSS :: Flex, inline-flex

CSS Flex는 어떻게 사용하는가 ?

flex는 display: block; 과 달리 세로 방향으로 오는 것이 아니라 inline tag와 같이 가로형태로 contents가 나타내어지는 것이다. 근데 여기서 flex자체로는 block의 형태를 갖는다.

아래 처럼 자식태그를 사용함으로써 inline과 같이 사용이 가능하다는 점이다.

flex 설정을 위해서는 부모 태그에 container라는 클래스를 준다.

.container {
            display: flex;
            width: 500px;
            height: 500px;
            <body>

<div class="container">
        <div class="item">d</div>
        <div class="item">d</div>
        <div class="item">d</div>
    </div>
</body>

<style>
        .container {
            display: flex;
            width: 500px;
            height: 200px;
        }
        .item {
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">d</div>
        <div class="item">d</div>
        <div class="item">d</div>
    </div>
</body>```

위 코드에서 볼 수 있는 것은 부모 태그의 height와 자식태그인 item class에 높이가 같아진다는 점이다. 자식태그의 flex의 높이를 따로 지정하지 않는다면, 부모태그의 height와 동일하다는 점이 중요하다.

  • width: 500px height: 500px 인 Flex가 생성됨
  • container class 자식태그인 item class가 그 안에 들어가게 되고, flex의 요소가 된다.

flex-wrap : 줄넘김이 적용된다. 가령 contents가 A , B , C 순으로 있다면, 브라우저 크기가 줄어들게 됐을 때, A , B , C 에서 A , B 만 그대로 남아있고, C는 다음줄로 가게된다. 여기서 크기가 더 줄어들게 된다면, 첫 줄에는 A만 남아있고, 그 다음 B, 그 다음 C로 block형 배치 처럼 보이게 될 것이다.

flex-reverse : 브라우저의 크기가 줄어들면 컨텐츠가 안보이게 되는 것이 아니라, 아래로 배치가 된다. 근데 여기서 reverse가 적용돼, A , B , C 순으로 배치된 컨텐츠가 C가 위로 올라가고 A , B 가 아래로 내려가게 된다.

flex-wrap: nowrap; 줄바꿈 x 삐져나간다.

.container {
    display: flex;
    flex-wrap: wrap;
}

inline-flex는 flex와 무엇이 다른가 ?

앞서 언급한 Flex는 부모태그에 display: flex;를 설정하고, 자식태그를 설정하는 부분에서는 동일하다. 하지만, 동일한 순위의 부모태그를 두개 만들었을 때, Flex는 block (수직)으로 컨텐츠가 나열되지만 inline-flex는

아래와 같이 빨간색의 inline-flex 두개가 수평선상에 놓이게 된다.

<style>
        .container {
            display: inline-flex;
            border: 2px solid red;
            width: 300px;
            height: 300px;
            margin: 50px;
        }
        .inlineflex {
            width: 100px;
            border: 1px solid blue;
        }
    </style>
    <div class="container">
        <div class="inlineflex">box</div>
        <div class="inlineflex">box</div>
        <div class="inlineflex">box</div>
    </div>
    <div class="container">
        <div class="inlineflex">box</div>
        <div class="inlineflex">box</div>
        <div class="inlineflex">box</div>
    </div>

구분하기 쉽도록 container class에 margin 값을 넣었다. 뭐가 다르지 했었는데, 코딩하면서 그림으로 확인하니 이해하기 수월했다. 다음엔 정렬기능도 정리 해야겠다.

[spring] API 개발 고급 - 지연 로딩과 조회 성능 최적화2
git fatal: Authentication failed

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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