[Flex]기존 css를 Flex속성으로 수정하기

html, css학습과제 중 주어진 화면을 똑같이 구성해 보는 문제 2개가 있었다.
하나는 absolute, 하나는 flex를 사용해서 작업했다.
그러다 도현 멘토님 시범을 보고 '나는 flex 사용이 더디니까 flex로 더 연습해 보는게 좋겠다'는 생각이 들어 기존 absolute작업물을 바꿔보기로 했다.

 

 

CSS플렉스박스 flexbox 고유의 유연성이란 서로 다른 공간에서도 똑같은 콘텐츠를 감당한다는 의미이기 때문이다

- ⌜inclusive design patterns⌟ Hedydon Pickering

 

기존 작업물 - absolute 사용

 

 

[새로 배운 점]

• body에 widht, height값 100%을 준 뒤 .containe를 위, 왼쪽 50%씩 위치 시키고
•  transform:translate(-50%, -50%)로 당겨오면 자동 센터!😆
  • 가운데 정렬한다고 left:50% 주고 margin-left로 당겨오거나 width값 억지로 줘서 margin:0 auto로 정렬하지 않아도 됨.
  • transform은 반응형이나 keyframe사용할 때만 썼었는데 이렇게 사용하는 걸 또 배웠다.

body{
  width:100%;
  height:100%;
}
.container{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%)
}

 

 

[놓쳤던 점]

• input박스에 글 작성시 '돋보기 아이콘'과 겹치게 작업했던점

 

 

[추가해 볼 점]

• 세로도 센터로 맞춰보기

 

 

수정  -  flex 사용

 

• body에 높이 값을 100%로주고 flex를 사용.
  • .container를 중간을 배치하기 위해 따로 크기, 위치 값을 줄 필요가 없음

html,body{width:100%;height: 100%;}

body{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.container{}

 

• 자식요소에 flex값을 주면 display:flex을 가진 부모요소를 기준으로 값만큼 등분해서 영역을 잡음 
  • 높이 정렬할 때, vertical-align속성을 주려고 부모요소를 하나 더 만들고 display:table을 주는 번거로운 일을 하지않아도 되다니. 신세계가 아닐 수 없음.

.search{
  display:flex;
  align-items:center;
  border:1px solid #eee;
  border-radius:30px;
  margin-bottom:10px;
}
.fas,
.search a{
  flex:1;
  font-size:12px;
  text-align:center;
}