[HTML/CSS] 레이아웃 <flex>

- 요소는 원래 위 ->아래, 좌 ->우로 배치

- inline-block : 요소의 배치 방법이 바뀐다, 쓰기 좋은것은 아님

- float : 원래 목적대로 배치

- flex : 좌우, 위아래 배치

- position : 내가 원하는 임의의 위치에 고정

이미지와 텍스트 배치

style= "float :left

사진이 왼쪽으로 배치돼서 아래쪽에 있던 텍스트가 위로 올라왔다

flex 레이아웃(부모속성에 적용)

<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>css 레이아웃 속성 flex</title>
    <style>
        .child{width:100px; height: 100px;}
        .parent{height: 100vh; border: 1px solid black;
                display:flex; flex-direction: row;
                justify-content: space-evenly; /* 주축 방향 정렬 */
                align-items: center; /*반대축 방향 정렬*/
        }

        .box1{background-color: red;}
        .box2{background-color: green;}
        .box3{background-color: violet;}
        .box4{background-color: lightseagreen;}
        .box5{background-color: lightsteelblue;}
        .parent div{ 
            display:flex;
            justify-content: center;
            align-items: center;
        }

    </style>
</head>
<body> 
        <div class="parent">
        <div class="child box1">1</div>
        <div class="child box2">2</div>
        <div class="child box3">3</div>
        <div class="child box4">4</div>
        <div class="child box5">5</div>
    </div>
    
</body>

각 색이 적용된 div(자식속성) 전체를 감싸준 div<부모속성)

부모속성에 display : flex 적용 전 후

수직배치 -> 수평배치

flex방식은 두 개의 축이 생성된다(main 축, cross 축)

- main 축 : 자식들의 정렬 방향

- cross 축 : 정렬방향과 반대

정렬하기

center - 가운데 정렬

외에도 사방으로 정렬 가능

space - ( ) 중간에 공백 만들며 정렬

수평정렬하는 3가지 방법

<style>
        *{list-style: none;}
        #m1 li{ display:inline-block;}
        #m2 li{ float:left;}
    </style>
</head>
<body>
    <ul id="m1">
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li>
    </ul>
    <ul id="m2" style="overflow: hidden;">
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li>
    </ul>
    <ul id="m3" style=" display: flex;">
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li>
    </ul>
</body>

1. inline-block (잘 안씀, 정렬 맞추기가 까다로움)

2. float : left

overflow : hidden

3.display : flex

티스토리툴바