CSS FlexBox | 모바일에서 요소 재정렬

Null isTrue

CSS Flexbox를 배우려고 노력 중이며 장애를 발견했습니다.

데스크톱 화면 크기에 좌우로 표시되는 콘텐츠가 있고 모바일의 경우 flex-direction: column

시각적 벨로우를 참조하십시오.

데스크탑 :

변하기 쉬운:

다음은이를 수행하는 코드입니다.

 <div class="container">
    <div class="box box1">
      <div class="a">a</div>
      <div class="b">b</div>
    </div>
    <div class="box box2">
       <div class="c">c</div>
      <div class="d">d</div>
    </div>
  </div>

다음은 flexbox 스타일입니다.

.box {
  color: white;
  font-size: 100px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  width: 100vw;
}

.container {
  display: flex;
  height: 100vh;
}

.a, .b, .c, .d {
  height: 50%;
}

@media all and (max-width: 500px) {
  .container {
    flex-direction: column;
  }

  .box {
     height: 50vh;
  }
}

질문 : 모바일의 경우 :-다음 div가 열에있는 그대로 표시 되지만 다음 순서 로 표시되도록하려면 어떻게해야합니까?

ㅏ

씨

디

비

불행히도 해결책을 찾을 수없는 것 같습니다.

여기서 중요한 CSS 줄은 162 줄부터 코드 펜이 있습니다 .

미리 감사드립니다.

Afif 동반

요소 에 대해 display:contents( https://caniuse.com/#feat=css-display-contents ) 고려 .box하면 내부 요소에 순서를 사용할 수 있습니다.

.box {
  color: white;
  font-size: 80px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  width: 100vw;
}
body {
 margin:0;
}
.container {
  display: flex;
  height: 100vh;
  background:blue;
}

.a,.b,.c,.d {
  height: 50%;
  border:2px solid;
}

@media all and (max-width: 500px) {
  .container {
    flex-direction: column;
  }
  .box {
    display:contents;
  }
  .b {
    order:2;
  }
}

<div class="container">
  <div class="box box1">
    <div class="a">a</div>
    <div class="b">b</div>
  </div>
  <div class="box box2">
    <div class="c">c</div>
    <div class="d">d</div>
  </div>
</div>

display: contents요소의 하위 가 요소 자체를 무시하고 요소의 parent의 직계 하위 인 것처럼 표시 되도록 합니다. CSS 그리드 또는 유사한 레이아웃 기술을 사용할 때 래퍼 요소를 무시해야 할 때 유용 할 수 있습니다 .

html을 변경하기 위해 열려 있다면 아래와 같이 할 수 있습니다 :

.container > * {
  color: white;
  font-size: 80px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  border:2px solid;
  box-sizing:border-box;
}
body {
 margin:0;
}
.container {
  display: flex;
  flex-direction:column;
  flex-wrap:wrap;
  height: 100vh;
  background:blue;
  padding:10px;
  box-sizing:border-box;
}

.a,.b,.c,.d {
  height: 50%;
  width:50%;
}

@media all and (max-width: 500px) {
  .a,.b,.c,.d {
    width:100%;
    height:25%;
  }
  .b {
    order:2;
  }
}

<div class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
</div>

그리고 CSS 그리드 :

.container > * {
  color: white;
  font-size: 80px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  box-sizing:border-box;
  border:2px solid;
}
body {
 margin:0;
}
.container {
  display: grid;
  grid-template-areas:  
    'a b'
    'c d';
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  grid-gap:10px;
  min-height: 100vh;
  background:blue;
  padding:10px;
  box-sizing:border-box;
}

.a {
  grid-area:a;
}
.b {
  grid-area:b;
}
.c {
  grid-area:c;
}
.d {
  grid-area:d;
}

@media all and (max-width: 500px) {
  .container {
   grid-template-areas:  
    'a'
    'c' 
    'd'
    'b';
  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr 1fr 1fr;
   }
}

<div class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-01-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

이전 게시물：Hello, Java의 Permute 메소드

TOP 리스트

기사

CSS FlexBox | 모바일에서 요소 재정렬

CSS FlexBox | 모바일에서 요소 재정렬

PrematureCloseException : 연결이 너무 일찍 닫혔습니다.

MDRotatingPieChart를 회전하면 각도 대신 x / y 위치가 변경됩니다.

c # 웹 사이트에서 텍스트를 복사하는 방법 (소스 코드 아님)

jfreecharts에서 x 및 y 축 선을 조정하는 방법

ArrayBufferLike의 typescript 정의의 깊은 의미

Ionic 2 로더가 적시에 표시되지 않음

복사 / 붙여 넣기 비활성화

Google Play Console에서 '예기치 않은 오류가 발생했습니다. 나중에 다시 시도해주세요. (7100000)'오류를 수정하는 방법은 무엇입니까?

정점 셰이더에서 카메라에서 개체까지의 XY 거리

QT Designer를 사용하여 GUI에 이미지 삽입

java Apache POI Word 기존 테이블 셀 스타일 및 서식이있는 행 삽입

Kubernetes Horizontal Pod Autoscaler (HPA) 테스트

Android Kotlin은 다른 활동에서 함수를 호출합니다.

C # HttpWebRequest 기본 연결이 닫혔습니다. 전송시 예기치 않은 오류가 발생했습니다.

어떻게 같은 CustomInfoWindow 다른 이벤트를 할 수 있습니다

rclone으로 원격 디렉토리의 모든 파일을 삭제하는 방법은 무엇입니까?

dataSnapShot.getValue () 반환 데이터베이스에 그겁니다 데이터 종료 널 (null)

ORA-12557 TNS : 프로토콜 어댑터를로드 할 수 없습니다

JNDI를 사용하여 Spring Boot에서 다중 데이터 소스 구성

다음 컨트롤이 추가되었지만 사용할 수 없습니다.

C # Asp.net 웹 API-JSON / XML 변환기 API 만들기