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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Flexbox ======
<WRAP left notice 70%>
  * description : CSS Lists, 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-07-05
</WRAP>
<WRAP clear></WRAP>
\\
\\
=====Source of the article==== 
[[https://www.w3schools.com/css/css3_flexbox.asp|CSS Flexbox]]\\

\\
======CSS Flexbox======
{{:wiki:css:css_note:flex-box-01.png?400|}}\\
\\
====예제====
<code css>
<!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>
</code>
\\
=====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)를 정의해야 합니다.\\
====예제====
<code css>
<!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>
</code>
=====Ref=====
{{:wiki:css:css_note:flexbox_layout.png?600|}}
  
{{tag>오션, CSS Flexbox,}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
