ブレーク

Question

Fiddle

Iは各行に2つの主要セクションを有する携帯電話でフレックスDIVをネスト、各セクションは、画像やテキストを有しています。これらのセクションを携帯電話のメディアクエリで新しい行に分割するにはどうすればよいですか？もし私が.row-flexにdisplay-direction: column;を置くと、イメージANDテキストもまた壊れてしまい、私はそれを望んでいません。私は

.row-flex { 
 
    display: flex; 
 
} 
 
.col-1 { 
 
    flex: 1; 
 
} 
 
.col-2 { 
 
    flex: 3; 
 
}

<div class="row-flex"> 
 

 
    <a href="#" class="col-1"> 
 
    <img src="http://placehold.it/90x90"> 
 
    </a> 
 

 
    <div class="col-2"> 
 
    <p>text text text text text text text text</p> 
 
    </div> 
 

 

 
    <a href="#" class="col-1"> 
 
    <img src="http://placehold.it/90x90"> 
 
    </a> 
 

 
    <div class="col-2"> 
 
    <p>text text text text text text text text</p> 
 
    </div> 
 

 
</div>

そのような display-direction: columnありません

Answer 1

、あなたが探していることである、それは画像にあるようにそれらを分割したい：flex-direction: column、あなたは要素をラップする必要がありますそれらを作るためにdisplay:flexの行

.row-flex { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.col-1, 
 
.col-2 { 
 
    display: flex 
 
} 
 
.col-1 div { 
 
    flex: 1; 
 
} 
 
.col-2 div { 
 
    flex: 3; 
 
}

<div class="row-flex"> 
 
    <div class="col-1"> 
 
    <a href="#"> 
 
     <img src="http://placehold.it/90x90"> 
 
    </a> 
 
    <div> 
 
     <p>text text text text text text text text</p> 
 
    </div> 
 
    </div> 
 
    <div class="col-2"> 
 
    <a href="#"> 
 
     <img src="http://placehold.it/90x90"> 
 
    </a> 
 
    <div> 
 
     <p>text text text text text text text text</p> 
 
    </div> 
 
    </div> 
 

 
</div>