문서의 이전 판입니다!

CSS Flexbox

description : CSS Lists,
author : 오션
email : shlim@repia.com
lastupdate : 2021-03-16

Source of the article

CSS Lists

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

오션,, CSS, Flexbox,

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

목차

CSS Flexbox

Source of the article

CSS Flexbox

예제

CSS Flexbox Layout Module

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

사용자 도구

사이트 도구

목차

CSS Flexbox

Source of the article

CSS Flexbox

예제

CSS Flexbox Layout Module

문서 도구