display:flex; flexbox에 대한 총결산

나 자신display:flex;부모 요소에 display:flex라고 쓰면 아이 요소는 마음대로 옆에 배열되죠!
이렇게 생각하지만 뿐만 아니라 요소의 넓이에 대해서도 하위 요소의 넓이를 지정하여 두 줄로 나눌 수 있어 사용하기 편리하기 때문에 총괄해 보았다.

display:flex;무엇입니까?

부모 원소:flex;일반적인 상황에서 세로로 배열된 서브 원소는 가로로 배열된다!
예를 들어 부모 요소에서display:flex;이 색상이 바래질 때

      <ul class="flex">
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
      </ul>

css 설명

/*親要素に対してdisplay flexを指定する*/
.flex{
  display:flex;
}

.child{
  height:100px;
  list-style:none;
  width:100px;
}
.child:nth-child(1){
  background-color:blue;
  }
.child:nth-child(2){
  background-color:yellow;
}
.child:nth-child(3){
  background-color:red;
}
.child:nth-child(4){
  background-color:purple;
  }
.child:nth-child(5){
  background-color:green;
}

이런 상황에서 결과는 수평으로 배열된list 요소일 수 있다. 그림과 같다.

이것만으로float처럼 부요소의 높이가 0으로 바뀌지 않고 사용하기 쉽지만 더욱 쉽게 사용할 수 있다.

flex:auto;부모 요소에 아이 요소를 배열하라!

flex:auto;에서 기술한 장면은 다음 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 둘레를 분석하도록 한다.

/*親要素に対してdisplay flexを指定する*/
.flex{
  display:flex;
  background-color:gray;
  height:300px;
  padding:0;
  margin:0;
}

.child{
  height:100px;
  list-style:none;
  flex:auto;  /*flex:autoで幅を指定せずとも横並びいっぱいに配置*/
}
.child:nth-child(1){
  background-color:blue;
  }
.child:nth-child(2){
  background-color:yellow;
}
.child:nth-child(3){
  background-color:red;
}
.child:nth-child(4){
  background-color:purple;
  }
.child:nth-child(5){
  background-color:green;
}

결과:

이렇게 하면 하위 요소의 너비를 지정하지 않아도 하위 요소는 부모 요소로 확장됩니다.

flex-wrap:wrap;화면 너비에 따라 하위 요소를 여러 줄로 설정합니다!

하위 요소가 가득 배열되어도 화면 사이즈가 작아지면 하위 요소마다 작아진다.이런 상황에서 미디어 조회를 사용하여 특정한 화면의 폭이 특정한 사이즈보다 작을 때flex-wrap:wrap을 사용한다.사용자 정의 외관을 정의합니다!
flex-wrap:wrap;에서 설명한 대로 해당 매개변수의 값을 수정합니다.(max-width:1000px)

/*省略*/
.
.
@media (max-width:1000px){
  .flex{
    flex-wrap:wrap;
  }
  .child{
    width:50%;
  }
}

지금
화면 너비가 1000px 이하이면 하위 요소는 50% 너비로 가로로 배열되고 부모 요소를 초과한 부분은 아래로 회전하여 여러 줄을 형성합니다.
결과 1: 1000px 이하 시

결과 2: 1000px 이상 시

이 미디어 조회와flex-wrap:wrap;코디를 통해 폭이 작아지지 않는 스포티한 디자인을 쉽게 디자인할 수 있습니다!

flex-direction:column;원소를 세로로 배열합니다!

스마트폰 화면 등을 세로로 배치하고 싶어요!
이럴 때는flex-direction:column;사용할 수 있습니다!이를 부모 요소로 기술하면 부모 요소는 수직으로 배열됩니다.그리고 이때도 언론 조회와 함께 사용하세요.스마트폰 화면에서 볼 수 있는 화면 폭의 최대치가 670px라고 가정하자.

@media (max-width:670px){
  .flex{
    flex-direction:column;
  }
  .child{
    margin:auto; /*listには幅が指定してあるのでmargin:auto;で中央に配置*/
  }
}

결과: 670px 이하

총결산

이렇게 하면flexbox는 미디어 조회와 결합하여 사용하면 수동적인 디자인을 간단하게 설계할 수 있다.
[요약]
display:flex; 부모 요소에 적용(가로 배열 하위 요소)
display:auto; 하위 요소에 적용 (하위 요소를 상위 요소에 가로로 정렬)
flex-wrap:wrap;상위 요소에 적용 (하위 요소의 폭을 지정하여 상위 요소를 초과한 하위 요소를 아래로 회전)
flex-direction:column; 부모 요소에 적용(가로 배열 하위 요소)