>
display: flex; 와의 투쟁 및 display: grid;  이 레이아웃이 작동하도록 며칠 동안 부모 요소에. 이것이 제가 만들려고하는 목표입니다 :

이 레이아웃과 흐름이 모바일 및 데스크탑에 가능합니까?

피들

HTML
 <div class="item-table">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
    <div class="e">e</div>
    <div class="f">f</div>
  </div>

SCSS
.item-table {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
  @media screen and (max-width: 600px) {
    align-items: flex-start;
    justify-content: flex-end;
    padding-left: 10px;
    padding-right: 10px;
  }
  .a {
    flex: 1 8%;
    border: 1px solid red;
  }
  .b {
    flex: 1 30%;
    border: 1px solid red;
    @media screen and (max-width: 600px) {
      flex: 1 50%;
    }
  }
  .c {
    flex: 1 100%;
    border: 1px solid #f00;
    @media screen and (max-width: 600px) {
      order: 4;
      flex: 0 60%;
      margin-left: 0;
      align-self: left;
    }
}
  .d {
    flex: 1;
    border: 1px solid red;
    @media screen and (max-width: 600px) {
      order: 6;
      flex: 0 20%;
    }
  }
  .e {
    flex: 1;
    border: 1px solid red;
    @media screen and (max-width: 600px) {
      order: 5;
      flex: 0 20%;
    }
  }
  .f {
    flex: 1;
    border: 1px solid red;
    @media screen and (max-width: 600px) {
      flex: 0 20%;
      order: 3;
    }
  }
}

열 A는 8 % 여야합니다. 백분율은 대부분 추정되고 반올림됩니다. 절대적인 완벽 함을 찾지 않고, 게시 된 예제와 다소 비슷한 비율을 얻으려고 노력하십시오.

내가 겪었던 문제는 C D E  일반적으로 F 아래에 쌓입니다.   display: flex 를 사용할 때 행을 공유하기 때문에 600px 미만 .


  • 답변 # 1

    CSS 그리드를 사용하는 접근법.

    모바일 레이아웃으로 시작하고 화면에서> 600px 보다 복잡한 레이아웃을 트리거하려면 미디어 쿼리를 사용하십시오.

    margin 를 사용할 수 있습니다  고르지 않은 높이를 만들 수 있습니다.

    바이올린

    .item-table {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(5, auto);
      grid-gap: .5rem;
    }
    .item-table>div {
      border: 1px solid grey;
      background: pink;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .a,
    .b {
      grid-row: span 3;
    }
    .f {
      grid-column: 1 / 3;
      grid-row: 4 / 6;
    }
    @media (min-width: 600px) {
      .item-table {
        grid-template-columns: 75px 30% 1fr 1.5fr 1fr;
        grid-template-rows: auto auto;
      }
      .a {
        grid-row: 1 / -1;
        width: 75px;
        height: 75px;
      }
      .b {
        grid-row: 1;
      }
      .a,
      .c,
      .d,
      .e {
        margin: .5rem 0
      }
      .f {
        grid-row: 2;
        grid-column: 2 / -1;
      }
    }
    
    
    <div class="item-table">
      <div class="a">a</div>
      <div class="b">b</div>
      <div class="c">c</div>
      <div class="d">d</div>
      <div class="e">e</div>
      <div class="f">f</div>
    </div>
    
    

  • 이전 snmpdconf에서 Net-SNMP extend를 사용할 때 PEN 이후 OID 객체
  • 다음 dji sdk - DJI Android SDK 카메라 프로파일