문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_flexbox
wiki:css:css_note:css_flexbox

목차

CSS Flexbox

  • description : CSS Lists,
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-07-05



Source of the article

CSS Flexbox


CSS Flexbox



예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexible Boxes</title>
    <style>
        .flex-container {
            display: flex;
            background-color: dodgerblue;
            flex-wrap: nowrap;
        }
 
        .flex-container>div {
            background-color: #f1f1f1;
            width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
    </style>
</head>
 
<body>
    <h1>Flexible Boxes</h1>
 
    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
 
    <p>Try to resize the browser window</p>
    <p>A containr with "flex-wrap: nowrap;" will never wrap its items.</p>
    <p><strong>Note:</strong> Flexbox is not supportd in Internet Explorer 10 or earlier versions</p>
</body>
 
</html>


CSS Flexbox Layout Module

플렉스박스 레이아웃 모듈 이전에, 4개의 레이아웃 모듈이 있었습니다.

  • 웹페이지의 섹션을 위한 Block
  • 텍스트를 위한 Inline
  • 2차원 테이블 데이터를 위한 Table
  • 요소의 위치 명시를 위한 Positioned

플렉스박스 레이아웃 모듈은 float 또는 positioning을 사용하지 않고 유연한 반응형 레이아웃 구조 설계를 더 쉽게 만듭니다.

Browser Support

플렉스박스 속성을 모든 현대의 브라우저가 지원합니다.(Chrome, Internet Explorer/Edge, Firefox, Safari, Opera)

Flexbox Elements

플레스박스 모델 사용을 시작하기 위해서, 먼저 플렉스 컨테이너(flex container)를 정의해야 합니다.

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Container</title>
    <style>
        .flex-container {
            /* parent element */
            background-color: dodgerblue;
            display: flex;
        }
 
        .flex-container>div {
            /* direct child elements of the flexible container = flexible itmes */
            border: 2px solid green;
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
        }
    </style>
</head>
 
<body>
 
    <!-- .flex-container>div*3 -->
    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
 
    <p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>
 
    <p>Direct child element(s) of the flexible container automatically becomes flexible items.</p>
 
</body>
 
</html>

Ref

, ,
/var/services/web/dokuwiki/data/pages/wiki/css/css_note/css_flexbox.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki