Flex 연습해보기

요즘 CSS 는 진짜 신기한게 많은거 같다.. 이전에 테이블로 꾸역꾸역 맞췄던 것들이 웹표준 시대가 오면서

CSS3 로 맞추는거 보면 신기한거 같다. 그중에 역시 대단한건 flex ㅠㅠ

패스트 캠퍼스 금일 공부부분의 코드는 꼭 남기고 싶다.

 

HTML

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
  <div class="item">J</div>
  <div class="item">K</div>
  <div class="item">L</div>
  <div class="item">M</div>
</div>

 

CSS

.container {
  border: 4px solid;
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-items: baseline;
}

.container .item {
  width: 120px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size:30px;
  display:flex;
  justify-content: center;
  align-items: center;
}