モバイルとデスクトップ

Question

ための再配置フレックスアイテム私はフレックスを使用して、以下のレイアウトを作成しようとしている：

私はフレックスでこのレイアウトを作ることはできますか？

.objectref-use .page-header { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
.objectref-use .page-header .header-col { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 
.objectref-use .page-header .header-content { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
} 
 
.objectref-use .page-header .header-content .together-content { 
 
    flex-wrap: nowrap; 
 
} 
 
.objectref-use .page-header .objectref-title { 
 
    margin-right: 8px; 
 
} 
 
.objectref-use .page-header .objectref-title.header-col { 
 
    justify-content: flex-start; 
 
} 
 
.objectref-use .page-header .objectref-title .header-content { 
 
    flex: 0 1 auto; 
 
    background: blue; 
 
} 
 
.objectref-use .page-header .objectref-timeline { 
 
    flex: 0 0 35px; 
 
    display: flex; 
 
} 
 
.objectref-use .page-header .objectref-timeline .header-content { 
 
    background: pink; 
 
    flex: 1 1 100%; 
 
} 
 
.objectref-use .page-header .objectref-menu.header-col { 
 
    justify-content: flex-end; 
 
} 
 
.objectref-use .page-header .objectref-menu .header-content { 
 
    flex: 0 1 auto; 
 
    background: green; 
 
} 
 
@media screen and (max-width: 768px) { 
 
    .page-header { 
 
    flex-direction: column; 
 
    } 
 
    .page-header .header-row { 
 
    flex-direction: row; 
 
    } 
 
} 
 
@media screen and (max-width: 480px) { 
 
    .page-header { 
 
    flex-direction: column; 
 
    } 
 
    .page-header .header-col { 
 
    flex: 1; 
 
    } 
 
    .page-header .objectef-timeline { 
 
    margin: 0; 
 
    } 
 
}

<div class="objectref-use"> 
 
    <div class="page-header"> 
 
    <div class="header-col objectref-title"> 
 
     <div class="header-content"> 
 
     <h1>title here (can be loooong) [block 1]</h1> 
 
     <h6>text on next line</h6> 
 
     </div> 
 
    </div> 
 

 
    <div class="header-col objectref-timeline"> 
 
     <div class="header-content">timeline [block 3]</div> 
 
    </div> 
 

 
    <div class="header-col objectref-menu"> 
 
     <div class="header-content"> 
 
     <div class="together-content"> 
 
      few button groups here [block 2] 
 
     </div> 
 
     <h6>text on next line</h6> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

これはthe current CSS on Codepenです。ありがとう。

Answer 1

はい、order of flex elementsをcss orderプロパティに変更することができます。

Fiddle

さらに、あなたはflex値を調整することで...など、互いの上に特定のものを積み重ね、フレックス要素の幅を変更することができます。

これをチェックアウトするguide for more information

Fiddle

ul { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    padding: 0; 
 
    margin: 0; 
 
    margin-bottom: 25px; 
 
} 
 

 
li { 
 
    background: lightblue; 
 
    text-align: center; 
 
    flex: 0 1 50%; 
 
    list-style: none; 
 
} 
 

 
.one { 
 
    background: green; 
 
    -webkit-order: 2; 
 
    order: 2; 
 
} 
 

 
.two { 
 
    background: olive; 
 
    -webkit-order: 3; 
 
    order: 3; 
 
} 
 

 
.three { 
 
    -webkit-order: 1; 
 
    order: 1; 
 
    flex: 1 0 100%; 
 
} 
 

 
.four, .five, .six { 
 
    border: 1px solid red; 
 
    flex: 1; 
 
} 
 

 
.seven, .eight, .nine { 
 
    border-bottom: 1px solid white; 
 
    flex: none; 
 
    display: block; 
 
    width: 100%; 
 
}

<ul> 
 
    <li class="one">1</li> 
 
    <li class="two">2</li> 
 
    <li class="three">3</li> 
 
</ul> 
 

 
<ul> 
 
    <li class="four">1</li> 
 
    <li class="five">2</li> 
 
    <li class="six">3</li> 
 
</ul> 
 

 
<ul> 
 
    <li class="seven">1</li> 
 
    <li class="eight">2</li> 
 
    <li class="nine">3</li> 
 
</ul>