[ CSS] FLEX BOX를 배워보자

FLOAT

 

 

FLEX BOX 의 큰 2가지

1번째

.container {
  background: beige;
  height:100vh;
}

 

보이는 화면의 전체에 적용하겠다. 

vh view height

 

% 소속되어 있는 분모에 퍼센테이지만큼 사용하겠다.

 

 

.container {
  background: beige;
  height:100vh;
  display: flex;
  flex-direction: row;
}

 

  display: flex;박스를 적용하겠다 container 에서

flex-direction:  flex 박스의 유형을 설정하겠다.

 

row는 기본 유형

flex-direction: row-reverse;

 

 flex-direction: column;

 flex-direction: column; 도 반대로 하고 싶으면 위에처럼 reverse를 붙여주면된다.

 

---

한쪽에 꽉찼을때 자동 줄바꿈을 하지 않는상태를

.container {
  background: beige;
  height:100vh;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
}

이며 기본값이다.

 

만약 아래와같이 줄바꿈을 하고 싶다면

.container {
  background: beige;
  height:100vh;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

 

.item{
  width:40px;
  height:40px;
  border: 1px solid black;
}

 박스별 테두리 설정

 

border도 한줄에서 하듯이

 

 

 flex  박스 또한 아래와 같이 한줄로 할수있따.

.container {
  background: beige;
  height:100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-flow: column nowrap;
}

 

 

.container {
  background: beige;
  height:100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-flow: row nowrap;
  justify-content: flex-end
}

 

justify-content: flex-end;

justify-content: flex-start;

justify-content: center;

 

 

justify-content: space-around;

박스 사이의 간격은 가가 박스 좌우 마진 값에서 정해진다.

  

justify-content: space-evenly;

 등간격으로 만들어 준다.

 justify-content: space-between;

좌우 맨 끝 박스는 끝에 붙이며 나머지는 등간격으로 배치

---

.container {
  background: beige;
  height:100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* flex-flow: row nowrap; */
  
  justify-content: space-between; /* main*/
  align-items: baseline;
  align-content: ;
}

 

 align-items: baseline;

baseline을 사용함으로써 컨텐츠 위치를 동일 하게 한다.

baseline  없을시 모습

 

  justify-content: space-between; /* main*/
  align-items: baseline;
  align-content: space-around;
}

 

 justify-content:가 flexbox에서 메인축에대한 설정이라면

align-items: 그에 직각이되는 축에대한 설정을하는것이다.

---

.item1 {
  background: red;
  flex-grow:1;   
}

.item1 {
  background: red;
  flex-grow:2;
    
}
.item2 {
  background: #62efff;
    flex-grow:1;
}
.item3{
  background: red;
   flex-grow:1;

 

 

---

.container {
  background: beige;
  height:100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* flex-flow: row nowrap; */
  
  align-items:center;

}

.item{
  width:40px;
  height:40px;
  border: 1px solid black;
}

.item1 {
  background: red;
  flex-grow:2;
   flex-shrink:2;
    
}
.item2 {
  background: #62efff;
    flex-grow:1;

    flex-shrink:2;
}
.item3{
  background: red;
   flex-grow:1;

  flex-shrink:2;

.item1 {
  background: red;
  flex:2 2 auto; /* grow, shrink, basis*/
  align-self: center;
}
.item2 {
  background: #62efff;
    flex-grow:1;
}
.item3{
  background: red;
   flex-grow:1;

 

align-self: center; container에 구애받지 않고 하나의 박스 위치 조절 가능

 

flex box 연습 사이트

https://flexboxfroggy.com/#ko

Flexbox Froggy