Как сделать этот макет с помощью flexbox?

У меня есть форма с парой областей к нему, и я пытаюсь выяснить, как получить Flexbox выложить что-то вроде этого:Как сделать этот макет с помощью flexbox?

Если возможно, то как я могу сделать это при использовании наименьшего количества родительских контейнеров? (Или, почему я не хочу этого делать?)

Недостаточно, чтобы не достичь этого, я думаю, что просить правильный ход. Все еще обертываю вокруг себя все это.

источник

2016-10-18 dislikesAppleCores

возможного дубликатом: http://stackoverflow.com/q/40011471/3597276 –

модифицированная демо из дубликата: https://jsfiddle.net/0w8mv3n4/4/ –

.wrapper { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
    -webkit-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
    
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
.wrapper > * { 
 
    padding: 10px; 
 
    flex: 1 100%; 
 
} 
 

 
.header { 
 
    background: tomato; 
 
} 
 

 
.footer { 
 
    background: lightgreen; 
 
} 
 

 
.main { 
 
    text-align: left; 
 
    background: deepskyblue; 
 
} 
 

 
.aside-1 { 
 
    background: gold; 
 
} 
 

 
.aside-2 { 
 
    background: hotpink; 
 
} 
 

 
@media all and (min-width: 600px) { 
 
    .aside { flex: 1 auto; } 
 
} 
 

 
@media all and (min-width: 800px) { 
 
    .main { flex: 3 0px; } 
 
    .aside-1 { order: 1; } 
 
    .main { order: 2; } 
 
    .aside-2 { order: 3; } 
 
    .footer { order: 4; } 
 
} 
 

 
body { 
 
    padding: 2em; 
 
}

<div class="wrapper"> 
 
    <header class="header">Header</header> 
 
    <aside class="aside aside-1">Aside 1</aside> 
 
    <aside class="aside aside-2">Aside 2</aside> 
 
    <footer class="footer">Footer</footer> 
 
</div>

Модифицированный из примера найдено here. Полный кредит на css-трюки.

Редактировать: настоятельно рекомендую статью css-tricks. Очень полезный ресурс для всех вещей Flexbox

источник

2016-10-18 16:33:59 Pat

Мне нужно подождать ~ 10 мин, чтобы отметить это как правильный ответ, но это очевидно. Спасибо! Что это такое: 1 100%; в .wrapper дети делают? – dislikesAppleCores

Это сокращение от установки гибкого роста и гибкой усадки до 1, а гибкая основа - до 100%. Некоторые люди предпочитают стенографию, но я лично думаю, что ее трудно следовать, потому что если бы это было «flex: 1 2», это фактически установило бы только рост/сжимание (потому что 2 - единичное число, тогда как 100% технически нет) – Pat

вы можете построить этот макет из тела с помощью нескольких CSS линий:

html, 
 
body { 
 
    height: 100%;/* or 100vw just for body */ 
 
    margin:0 /* reset */ 
 
} 
 

 
body, 
 
section { 
 
    display: flex; 
 
} 
 
/* eventually : section {overflow:auto} if you want to keep footer down the screen no matter how much content */ 
 
body { 
 
    flex-flow: column; 
 
} 
 
section, 
 
article { 
 
    flex: 1;/* use whole space avalaible if only child or share it evenly when multiple children */ 
 
} 
 
/* add borders to see elements */ 
 
header, 
 
footer, 
 
article { 
 
    border: solid; 
 
    padding: 1em; 
 
} 
 

 
/* break point without mediaqueries ? 
 
uncomment this below */ 
 
/* article { 
 
    min-width:320px;/* 2 articles make break point at average 640px */ 
 
}*/

<header> 
 
    header any height 
 
</header> 
 
<section> 
 
    <article>Side</article> 
 
    <article>Side</article> 
 
</section> 
 
<footer> 
 
    footer any height 
 
</footer>

http://codepen.io/gc-nomade/pen/WGazGX играть с (or download code samples)

источник

2016-10-18 16:48:50

Как сделать этот макет с помощью flexbox?

ответ

Смежные вопросы