목차

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개의 레이아웃 모듈이 있었습니다.

플렉스박스 레이아웃 모듈은 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

, ,