css 3 (flexbox)

# What is Flexbox ?

• Flexbox is a one-dimensional layot method for laying out items in rows or columns.
• 생긴지 얼마 기능이고 페이지의 콘텐츠 상자 안에 아이템을 배치할 때 사용된다. 
• Flexbox allows us to distribute space dynamically across elements of an unknown size, hence the term "flex".
• flexbox를 이용하면 하나의 컨테이너 안에서 어떤 요소를 크게하고 작게할지, 요소들 사이에 공간을 얼마나 띄울지, 공간을 균등하게 만들지 등을 유연하게 정할 수 있다.

 

#Flex-Direction

• flex model에는 두 가지 축이 있다
• 그리고 flex로 설정된 아이템들은 순서대로 왼쪽에서 오른쪽을 정렬된다. 
• 하지만 이건 flex direction을 통해서 바꿔줄 수 있음. 컨테이너 안에서 본축의 방향을 결정하는 속성. 
• flex-direction : row 기본적으로 row로 설정되어 있다. 왼쪽에서 오른쪽으로 순서대로 정렬됨.(horizental)

• flex-direction : row-reverse; 본축의 방향이 반대로 바뀜. 
• flex-direction : column /column-reverse 은 vertical로 효과가 적용되는 것. 
• display : flex로 적용했으면 이 미 설정된 크기를 벗어나지는 않는다. 각각의 <div>요소의 크기는 200px인데 전체 컨테이너의 크기는 500px이라면 그냥 그 안에 맞춰서 크기가 들어가게 된다. 

 

#Justify content(양쪽정렬)

• justify-content : flex-start ; 가 기본값으로 설정되어 있음. 항상 왼쪽으로 정렬되는 것은 아니다. 
• 주축을 기준으로 요소와 컨텐츠를 어떻게 설정할지 결정하는 요소다. 
• 컨텐츠의 정렬 방식은 주축방향에 따라 달라진다. 만약 주축이 좌에서 우 방향이라면 시작은 왼쪽, 끝은 오른쪽 일 것이다.  주축 설정은 언제든 변할 수 있다. 
• justify-content : center; 로 설정하면 주축을 따라 중앙으로 옮겨진다. 
• justify-content : space-between; 바깥쪽 여백을 다 없애고 요소 사이에 간격을 띄운다. 즉 요소 사이에만 빈 곳이 생기고 바깥쪽은 사라짐. 요소와 컨테이너 사이에는 빈 곳이 사라짐. 
• justify-content : space-around; 요소의 둘레에 똑같은 면적의 여백을 부여한다. 
• justify-content : space-evenly;  요소사이, 요소와 컨테이너 사이에도 동일한 크기의 여백을 주는 방법. 

 

#Flex-Wrap

• 주축이 수평일때 새로운 행을 만들어 요소를 정렬하고, 주축이 수직일 때는 새로운 열을 만들어 요소를 정렬하는 속성이다. 

#container{
  background-color: #003049;
  width: 90%;
  height: 500px;
  margin: 0 auto;
  border: 5px solid #003049;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: wrap;
}

• flex-wrap : wrap ; 주축이 상->하 방향으로 한 열에 정렬되도록 설정됨. 왼쪽, 위에서 부터 시작된다 
• flex-wrap : wrap-reverse ; 주축은 여전히 상하방향이고 한열에 정렬되지만, 오른쪽 위에서부터 정렬이 시작된다. 
• 여기서 flex-direction을 어떻게 설정하느냐에 따라서 주축의 방향이 바뀌게 된다. 
• flex-wrap 을 설정하지 않거나 flex-wrap : nowrap;으로 정확하게 설정도 가능하다.
• wrap은 교차축의 방향을 결정한다. 

#Align items

• 교차축을 따라 아이템을 배열한다. justify-content는 Main axis를 따라서/ align items는 cross axis를 따라서 배열한다고 보면 됨. 
•  align-items : flex-start ; 행의 주축은 왼쪽에서 오른쪽으로 가게 되고 교차축은 기본적으로 위에서 아래로 향하게 됨.
• align-items : flex-end ; 교차축을 아래에서 위로 향하게 만들어줌 
• align-items : center ;  아이템들의 크기가 다르더라도 기본적으로 중심에 위치하도록 만들어 줌. 교차축이 위에서 아래로 향하기 때문에 기본적으로 텍스트가 들어가도 텍스트는 영향을 받지 않는다.
• align-items : baseline ; 텍스트의 기준선에 맞춰 정렬한다. 글자의 바닥부분을 기준으로 맞춰진다고 생각하면 되고, 텍스트의 크기가 모두 다르다면 baseline을 사용해 맞춰 줄 수 있다.

 

#Align-content & Align-self

• align-content : 행이 여러개일 때 교차축을 기준으로 정렬할 때 사용, 오직 행, 열이 여러개일때만 사용한다. 
• flex-wrap : wrap / wrap-reverse; 이 설정되어 있을때만 align-content가 작동된다. 단일 열이나 행일때는 작동하지 않는다. 
• 여러개가 있을 때, 행이나 열 사이 공간을 조정해줌.
• align-self : 플렉스 컨테이너에서 단일 요소에 사용하거나 플렉스 컨테이너에서 두개의 개별요소에 적용할때 사용한다. 

 

#Flex-Basis , Grow and shrink

• flex-basis : defines the initial size of an element before additional space is distributed. 요소가 배치되기 전에 요소의 최초 크기를 결정한다.  플렉스 컨테이너에 추가되기 전 시작점 같은 것. 
• width 가 설정되어 있더라도 flex-basis가 있다면 얘가 너비의 기준이 된다. 
• 그럼 그냥 width를 설정하면 되는데 왜 굳이 flex-basis를 사용할까? flex-basis 는 가로인 주축에 걸쳐있기 때문이다. 여기서 flex-direction을 column으로 바꾸면 세로로 주축이 변경된다. 축에따라서 설정이 변경됨 
• flex-grow : controls the amount of available space an element should take up. Accepts a unit-less number value. 공간이 있을때 요소가 그 공간을 얼마나 차지할지 결정한다.  단위를 적지 않아도 작동함. 
• flex-grow를 첫번째와 마지막 div에 동일한 수치로 적용한다면 남는 공간을 동일한 비율로 차지함. 
• 모든 div에 동일하게 적용한다고 하면 내가 적어둔 width는 무시되고 동일한 수치로 적용된다. 

div:nth-of-type(1){
  flex-grow: 1;
}
div:nth-of-type(5){
  flex-grow: 1;
}

• 너무 끝없이 늘어나는게 싫다면 max-width를 설정해주자. 그럼 최대의 넓이를 넘어가지 않는다. 
• flex-grow는 비율을 정하는거라, 하나는 1 다른 하나는 2를 설정해주면 두배의 크기로 늘어난다.
• flex-shrink : if items are larger than the container, they shrink according to flex-shrink. 요소들이 줄어드는 비율을 통제한다. px같은걸 설정해서 정확한 값으로 줄어들게 하는게 아니라, 다른 요소에 비해 얼마나 더 줄어들지 설정하는 것이다. 
• flex-shrink를 0으로 설정해주면 다른애들은 줄어들어도 설정된 애는 줄어들지 않는다. 

 

#Flex shorthand

• flex : flex-grow / flex-shrink / flex-basis 를 한줄에 적을 수 있는 속기법 (순서대로 쓰면 됨)
• 단위가 없는 숫자를 쓰면 기본적으로 flex-grow라고 보면 된다. 퍼센트나 length가 붙은건 flex-basis

 

#반응형 디자인 및 미디어 쿼리 개요

• 다양한 화면크기에 따라 다르게 반응하도록 웹사이트나 어플리케이션을 만드는 것 
• Media queries : media queries allow us to modify our styles depending on particuolar parameters like screen width or device type. 미디어 쿼리는 css와 스타일시트에서 작성 가능함. 스타일을 변경하고 매개변수에 따라 새로운 스타일을 넣을 수 있다. 

 

#미디어쿼리의 능력

• width가 800px이 정확히 됐을 때, 적용되는 코드는 아래에 적는다.

@media(width : 800px){ //화면크기를 설정//
  h1{
    color: aquamarine;
  }
}

• min-width로 설정해주면 800px이 최소 범위가 되고 800px이 넘어가면 색이 변경된다.
• min-width와 max-with를 and로 연결해서 설정도 가능하다 

@media(min-width : 600px) and (max-width : 800px){
  h1{
    color: aquamarine;
  }
}

• 각각의 기능을 설정해줘도 되고, 범위별로 설정해줘도 된다. 보통 min-width를 자주 사용한다
• orientation  : landscape을 설정해주면 

@media(orientation : landscape) {
  body{
    background-color: magenta;
  }
}

 

#반응형 내비게이션 바 제작하기

• 인터넷에 찾아보면 기기별로 반응형일때 사이즈를 찾아 볼 수 있음. 하지만 꼭 정확한건 아니다. 사이즈는 각각의 기기별로 맞춰서 적용시켜주면되고, 미디어 크기별로 디자인을 다르게 할 수 있다.
• <nav>를 디자인해보자. <nav>구성을 세 영역으로 나눔. 양쪽 <a> 한개씩, <ul>태그로 가운데 세 개 구성은 묶어줌. 

 

 <nav>
        <a href="#home">Home</a>
        <ul>

            <li>
                <a href="#Home">Learn More</a>
            </li>
            <li>
                <a href="#Home">About</a>
            </li>
            <li>
                <a href="#Home">Contact</a>
            </li>

        </ul>
        <a href="#signup">Sign Up</a>
    </nav>

• css는 코드를 이렇게 짠다. BUT!!!! 이 코드 그대로 내가 들어갔을때는 <ul>부분에 적용한 justify-content : space-evenly가 적용이 안됨 ㅠㅠㅠㅠㅠ 해결방법을 찾아보자

nav {
  font-size: 1.5em;
  display: flex;
  justify-content: space-between;
}

ul{
  border: 1px solid red;
  flex: 1;
  max-width: 50%;
  display: flex;
  justify-content: space-evenly;
}


ul,li {
  display: inline;
  margin: 0;
  padding: 0;
}