絶対位置を持たないフレックスアイテムの並べ替え

Question

フレックスボックスを同じ構造（box1、box2、box3、box4の順番）に保ってこのような構成を実現する方法があるのだろうかと思います。

私はこれを得たが、box4は、他のボックスの下に押し下げられている：http://codepen.io/anon/pen/xRVEwW

.container{ 
 
    width:600px; 
 
    position:relative; 
 
} 
 
.box1, .box2, .box3, .box4{ 
 
    width: 200px; 
 
} 
 
.box2, .box4{ 
 
    margin:0 auto; 
 
} 
 
.box1{ 
 
    background:pink; 
 
    position:absolute; 
 
    left:0; top:0; 
 
} 
 
.box2{ 
 
    background:lightgreen; 
 
} 
 
.box3{ 
 
    background:lightgrey; 
 
    position:absolute; 
 
    right:0; top:0; 
 
} 
 
.box4{ 
 
    background:lightblue; 
 
}

<div class='container'> 
 
    <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> 
 
    <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris.</div> 
 
    <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div> 
 
    <div class="box4">Box 4.</div> 
 
</div>

Answer 1

同じ構造を維持フレックスボックスを使用して、組成物のこの種を達成するためにどのような方法があるのだろうか。

はい、HTMLを変更せずにレイアウトを達成する方法があります。ここに行く：

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    width: 600px; 
 
    height: 500px; 
 
} 
 

 
.box1 { flex: 100%; order: 0; } 
 
.box2 { flex: 80%; order: 1; } 
 
.box3 { flex: 100%; order: 3; } 
 
.box4 { flex: 20%; order: 2; } 
 

 
.box1 { background: pink;  width: 200px; } 
 
.box2 { background:lightgreen; width: 200px; } 
 
.box3 { background:lightgrey; width: 200px; } 
 
.box4 { background:lightblue; width: 200px; }

<div class='container'> 
 
    <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> 
 
    <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris.</div> 
 
    <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div> 
 
    <div class="box4">Box 4.</div> 
 
</div>

revised codepen

キーポイント：

• は、カラム方向、ラップ対応のフレックスコンテナを使用してください。
• コンテナの高さを定義します（フレックスアイテムはラップする場所を知っています）。
• 第1列と第3列がフルハイト（flex-basis: 100%または略称flex: 100%）になります。しかし、:-)簡単な方法は...私はせずに同じことを達成することができている
• 第二、第四列が結合するので、必要に応じてその高さを調整し、コラム3

Answer 2

• ラップbox2とbox4共通のdivに
• align-items: flex-start;を追加します（またはbaseline）〜.container

.container{ 
 
    width:600px; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    align-items: flex-start; 
 
} 
 
.box1, .box2, .box3, .box4{ 
 
    width: 200px; 
 
} 
 
.box1{ 
 
    background:pink; 
 
} 
 
.box2{ 
 
    background:lightgreen; 
 
} 
 
.box3{ 
 
    background:lightgrey; 
 
} 
 
.box4{ 
 
    background:lightblue; 
 
}

<div class='container'> 
 
    <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> 
 
    <div> 
 
    <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris.</div> 
 
    <div class="box4">Box 4.</div> 
 
    </div> 
 
    <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, 
 
    id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div> 
 
</div>

http://codepen.io/borkdude/pen/VmaKRZ

Answer 3

Flexプロパティを消去しないとフロートを使用します。ボックス3および4に必要なHTMLコードの変更をボックス1及び2に

float:left、float:right：

.container{ 
 
    width:600px; 
 
} 
 
.box1, .box2, .box3, .box4{ 
 
    width: 200px; 
 
} 
 
.box1{ 
 
    background:pink; 
 
    float: left; 
 
} 
 
.box2{ 
 
    background:lightgreen; 
 
    float: left; 
 
} 
 
.box3{ 
 
    background:lightgrey; 
 
    float: right; 
 
} 
 
.box4{ 
 
    background:lightblue; 
 
    margin:0 auto; 
 
    float: right; 
 
}

<div class='container'> 
 
    <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> 
 
    <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris.</div> 
 
    <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div> 
 
    <div class="box4">Box 4.</div> 
 
</div>

http://codepen.io/anon/pen/eBZBYL