flex

한서희·2021년 12월 14일

html

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>

css

.container {
  border: 1px solid red;
  font-size: 0;
}

.container .item {
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-radius: 10px;
  display: inline-block;
  font-size: 16px;
}

👇🏻

🌞 inline
수평으로 쌓이긴 하지만 가로값과 세로값을 가질 수 없다.

🌞 inline-block
inline의 기본적인 특성을 가지지만 block요소처럼 가로와 세로값을 가질 수 있고 margin의 위 아래 값을 쓸 수 있다.

🌞 그림의 .item 사이 여백은 띄어쓰기 한 칸으로 간주
(inline 요소는 텍스트를 다루는데에 특화 되어있기 때문)
font-size를 초기화 하면 여백이 사라진다.

🌞 font-size가 0이기 때문에 .item의 숫자가 보이지 않는다.
.item에 font-size를 설정해 주면 된다.

html

<body>
  <div class="container clearfix">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>

css

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.container {
  border: 1px solid red;
}

.container .item {
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-radius: 10px;
  float: left;
}

👇🏻

🌞 float
요소를 띄우는 개념
.container가 각각의 요소들(.item)을 감싸지 못한다.
clearfix를 사용해 감쌀 수 있다.

🌟🌟🌟🌟🌟

css

.container {
  border: 1px solid red;
  display: flex;
}

.container .item {
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-radius: 10px;
}

👇🏻

🌞 display: flex
가장 많이 사용됨

💡 .container에 적용할 수 있는 속성

display
flex-flow
flex-direction
flex-wrap
align-content
justify-content
align-items

💡 .item에 적용할 수 있는 속성

order
flex
flex-grow
flex-shrink
flex-basis
align-self

한서희

안녕하세요, 개발자를 꿈꾸는 한서희입니다.

이전 포스트

PageList

다음 포스트

flex

PageList

FlexContainers: display & flex-flow & flex-direction & flex-wrap

0개의 댓글