Notice
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
관리 메뉴

Jade_o.o

[css] display:flex 본문

CSS

[css] display:flex

by jade 2024. 1. 11. 15:43 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS - display:flex</title>
    <link rel="stylesheet" href="./attr5.css">
</head>
<body>
    <h1>Flex와 친해지기</h1>
    <!-- .container>.items.item*5-->
    <div class="container">
        <div class="items item1">1</div>
        <div class="items item2">2</div>
        <div class="items item3">3</div>
        <div class="items item4">4</div>
        <div class="items item5">5</div>
        <div class="items item1">1</div>
        <div class="items item2">2</div>
        <div class="items item3">3</div>
        <div class="items item4">4</div>
        <div class="items item5">5</div>
        <!-- <div class="items item1">1</div>
        <div class="items item2">2</div>
        <div class="items item3">3</div>
        <div class="items item4">4</div>
        <div class="items item5">5</div>
        <div class="items item1">1</div>
        <div class="items item2">2</div>
        <div class="items item3">3</div>
        <div class="items item4">4</div>
        <div class="items item5">5</div> -->
    </div>

    <hr/>
    <ol>
        <li>CSS3 등장부터 나타난 방식</li>
        <li>화면 레이아웃을 구성할 때, 가장 많이 사용하는 벙법 중 하나</li>
        <li>부모요소에 flex를 선언하면, 자식 요소들의 레이아웃이 변경됨</li>
    </ol>

    <h3>flex-container</h3>
    <ul>
        <li>flex 속성을 갖는 요소, flex 부모 요소라고도 함</li>
        <li>
            컨테이너에 적용가능 속성
            <ol>
                <li>flex-direction<span style="color:#cc1111;"> : 방향</span></li>
                <li>flex-wrap<span style="color:#cc1111;"> : 요소들을 정렬하는 기능</span></li>
                <li>justify-content<span style="color:#cc1111;"> : 주축 수평 방향 정렬</span></li>
                <li>align-items<span style="color:#cc1111;"> : 주축 수직 방향 정렬</span></li>
                <li>align-content<span style="color:#cc1111;"> : 여러 행 정렬</span></li>
            </ol>
        </li>
    </ul>
</body>
</html>

html 코드

 

.container{
    max-width: 1000px;
    height: 400px;
    margin: 0 auto; /*부모요소 (현 body)기준으로*/
    background-color: #333;

    display: flex;
    flex-wrap: wrap;
    /* flex - direcion 정렬 방향(주축의 방향을 설정함, 기본값은 row)
        - row : 좌 > 우 정렬
        - row-reverse : 우 > 좌 정렬
        - column : 상 > 하 정렬
        - column-reverse : 하 > 상 정렬
    */
    /* 1. flex-direction: row; */
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */


    /* 2. flex-wrap */
    /* flex-wrap:nowrap; */
    /* flex-wrap: wrap; */


    /* 3. justify-content: 주축의 정렬 방법 
        - flex-start:아이템을 시작점 기준으로 나열
        - flex-end 아이템을 끝점 기준으로 나열
        - center 중앙정렬
        - space-between : 처음과 마지막 아이템을 양 끝에 붙이고, 나머지 영역을 공평하게 나눔
        - space-around : start부터 첫 아이템의 간격, 마지막 아이템부터 end까지의 간격 X 2 = 아이템끼리의 간격
        - sapce-evenly : 아이템들의 모든 영역 공평하게 나눔 
    */

    /* justify-content: flex-start; */
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    /* justify-content: space-around; */
    /* justify-content: space-evenly; */


    /* 4. align-items: 한줄 교차축 정렬
        - flex-direction이 row일 때: 교차축=수직
        - flex-direction이 column일 때: 교차축=수평
    */
    /*기본값*/
    /* align-items: stretch;  */
    /* align-items: flex-start; */
    /* align-items: flex-end; */
    /* align-items: center; */


    /* 5. align-content: 여러줄 교차축 정렬
        - (필수조건)flex-wrap: wrap과 함께 올 수 있는 속성
    */
    /* align-content: flex-start; */
    /* align-content: flex-end; */
    /* align-content: center; */
    /* align-content: space-between; */
    /* align-content: space-around; */
    /* align-content: space-evenly; */
}

.items{
    width: 100px;
    height: 100px;
    font-size: 2rem;
    text-align: center;
    line-height: 100px;
}

.item1{
    background-color: red;
}
.item2{
    background-color: orange;
}
.item3{
    background-color: yellow;
}
.item4{
    background-color: yellowgreen;
}
.item5{
    background-color: blue;
}

css 코드

 

코드 실행 시 결과창

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

[css] animation  (0) 2024.01.11
[css] transform & transition  (0) 2024.01.11
[css] background 속성  (0) 2024.01.11
[css] position  (0) 2024.01.11
[css] 박스 모델 속성  (0) 2024.01.11
'CSS' Related Articles more