CSS_3

rmfos82·2021년 11월 25일
0

Computers

목록 보기
4/13
post-thumbnail

빨리빨리 일어나는것을 힘들어한다 최근에 아날로그 알람시계를 하나 구입해 사용하고 있는데
효과가 너무 좋다 아주 가끔은 시계를 끄고 다시 잠들긴 하지만 덕분에 생활 패턴이 많이 좋아졌다고 해야하나?
바로 일어나고 못 일어나는것은 나의 의지와도 상관이 있는걸까?

Flex

Flex box는 flex container(부모요소)와 flex item(자식요소)로 구성된다
말하자면 flex container안에 flex item을 넣어 사용하면 되는 것

box(부모)안에 box(자식)

Flex 개념

<body>
    <div class="box_main">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

box_main이 부모요소
box가 자식요소

보는 바와 같이 박스가 세로로 되어 있는데 이것은 div로 주었을 경우 한줄 전체를 차지하는게 div태그 이기 때문이다
이제 박스들을 자유롭게 움직여 보자

Flex 사용

flex는 보통 혼자서 사용되지 않는다

<style>
.box_main {
      display: flex;
        }
</style>

display: flex; : 박스를 flex타입으로 바꿔준다 바로 뒤에 나오겠지만 flex는 자체적으로 가로의 형태를 한다

<style>
.box_main{
    display: flex;
    flex-direction: row;
        }
</style>

flex-direction: row; row라는건 가로를 말하는것이고
flex-direction: column;은 세로를 말한다
이렇게 방향을 지정해주면 된다

row = 가로
column = 세로

가운데 정렬 (align-items)

<style>
 .box_main {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
</style>

align-items: center; : 페이지의 가운데 정렬 center(가운데정렬)외 다른기능도 있으니 코드를 작성해보면서 확인해보자

<style>
.box_main {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
 </style>

flex-directioncolumn;(세로)로 주고 align-items: center;가운데정렬

여기서 끝이 아니다

<style>
.box_main {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content:space-between;
        }
</style>

justify-content:space-between; : 정렬 중 인 박스를 양쪽으로 잡아당기는 속성이다

결론

이렇게

<style>
  	    display: flex;
            flex-direction: row;
            align-items: center;
            justify-content:space-between;
  			
</style>

Flex라는 것은 이렇듯 보통 세트로 따라다니게 되며 CSS 그리드를 구성할때 Flex를 이용해
박스를 좀더 쉽게 사용할 수 있다는 장점이 있다
그렇다고 flex만이 정답은 아니며 CSS페이지 구성에는 다양한 방법들이 있으니 직접 만들어 보도록 하자

profile
새벽에 처음 해보는 개발 공부! 뜨거운메로나

0개의 댓글