[CSS] flex-box(플렉스)로 쉽게 정렬하기

내가 배운 css의 flex에 대해 알아보고자 한다

 

어떻게 사용하는지 바로 보자

 

 

이렇게 생긴 red 박스와 blue 박스

여기서

 

 display: flex;

를 주면

 

가로가 되고

여기서

 

flex라고 하는 부모 태그에 width를 주고 

 .flex {
      padding: 20px;
      display: flex;
      width: 1000px;
      justify-content: space-between;
      background-color: gray;
    }

 

justify-content: space-between; 을 주게 되면

 

width의 양쪽 끝에 달라붙는걸 볼 수 있다

쉽게 말해 두 박스가 줄다리기하듯 찢어져 붙은 것

이걸 잘 활용하면 box를 이리저리 옮기고 float을 쓰고 하지 않아도 쉽고

 

깔끔하게 정돈된 레이아웃을 만들 수 있다

 

기억하자

.class {
      display: flex;
      justify-content: ;
      align-items: ;
    }

3종 세트만 있으면 고민은 필요 없다

 

ex )

CSS

.flex {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 1000px;
      height: 500px;
      padding: 20px;
      background-color: #2C272E;
    }
  
    .red {
      background-color: #FF6464;
    }
  
    .blue {
      background-color: royalblue;
    }

    .box {
      width: 400px;
      padding: 20px;
      text-align: center;
      color: whitesmoke;
    }

    .box button {
      padding: 10px;
      border: none;
      border-radius: 7px;
      color: whitesmoke;
      background-color: black;
    }

HTML

<div class="flex">
      <div class="red box">
        <h1>red</h1>
        <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
        <button>BOOM!</button>
      </div>
      <div class="blue box">
        <h1>blue</h1>
        <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
        <button>BOOM!</button>
      </div>
    </div>