CSS

0219 Flex | grow&shrink | holy_grail_layout

Amarans 2020. 2. 19. 13:28

https://opentutorials.org/course/2418/13526

flex 기타속성 보기

 

<!doctype>
<html>
<head>
    <style>
        .container{
            background-color: powderblue;
            height:200px;
            display:flex;
            flex-direction:row;
        }
        .item{
            background-color: tomato;
            color:white;
            border:1px solid white;         
        }
        .item:nth-child(1){
            flex-basis: 150px;
            flex-shrink: 1;
        }
        .item:nth-child(2){
            flex-basis: 150px;
            flex-shrink: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

<!doctype>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .container{
            display: flex;
            flex-direction: column;
        }
        header{
            border-bottom:1px solid gray;
            padding-left:20px;
        }
        footer{
            border-top:1px solid gray;
            padding:20px;
            text-align: center;
        }
        .content{
            display:flex;
        }
        .content nav{
            border-right:1px solid gray;
        }
        .content aside{
            border-left:1px solid gray;    
        }
        nav, aside{
            flex-basis: 150px;
            flex-shrink: 0;
        }
        main{
            padding:10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>아마란스</h1>
        </header>
        <section class="content">
            <nav>
                <ul>
                    <li>html</li>
                    <li>css</li>
                    <li>javascript</li>
                </ul>
            </nav>
            <main>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia rem dolor nulla nisi consectetur obcaecati perferendis! Obcaecati sequi, ex voluptates expedita sit illum nemo nulla repellat reprehenderit rerum impedit hic, voluptate delectus. Quod aspernatur excepturi autem error quibusdam, maiores perspiciatis fuga! Perspiciatis enim, assumenda impedit cupiditate dignissimos consequuntur animi delectus nobis! Architecto aliquid culpa sunt cumque modi commodi facilis est deleniti, repellendus molestias ea quas dolore explicabo nisi, pariatur amet minima libero voluptates laboriosam officia. Ipsam deleniti recusandae fuga iure beatae molestiae reiciendis blanditiis unde et accusantium quidem ex nulla, dolorum minus accusamus provident odio nisi! Autem adipisci ad reiciendis!
            </main>
            <aside>
                AD
            </aside>
        </section>
        <footer>
            <a href="http://amarans.tistory.com/">홈페이지</a>
        </footer>
    </div>
</body>
</html>