Я пытаюсь сделать макет в CSS, используя flex-боксы, и я пытаюсь исправить элемент до конца, поместив растущий разделитель перед ним.
Макет состоит из нескольких вариантов и пользовательского выбора, который дает дополнительные параметры. Внизу есть несколько кнопок навигации. Я выделил разделитель для подтверждения его ширины / высоты.
Дело в том, что это работает горизонтально, а не вертикально! есть идеи?
Редактировать: в фрагменте выполнения это неочевидно, потому что высота меняется, я хотел зафиксировать последний ряд в нижней части страницы
.row-container {
list-style: none;
display: flex;
flex-flow: wrap;
justify-content: space-between;
}
.col-container {
display: flex;
flex-flow: column;
list-style: none;
justify-content: space-between;
}
.scheme {
height: 100px;;
margin: 8px;
padding: 4px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background-color: gainsboro;
font-size: 1.5em;
text-align: center;
flex-grow: 1;
flex-basis: 15%;
}
.sep {
flex-grow: 1;
background-color: gold;
}
.selected {
background-color: deepskyblue;
box-shadow: 0 4px 4px 0 gray;
color: white;
}
.elem {
flex-grow: 1;
margin: 8px;
padding: 8px;
border: none;
text-align: center;
}
.small-btn {
flex-basis: 100px;
margin: 8px;
padding: 8px;
border: none;
text-align: center;
background-color: dimgray;
color: white;
}
.btn {
background-color: dimgray;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example</title>
<link rel="stylesheet" type="text/css" media="screen" href="./test.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="col-container">
<div class="row-container">
<div class="scheme" id="first">
Choice1
</div>
<div class="scheme" id="second">
Choice2
</div>
<div class="scheme" id="third">
Choice3
</div>
<div class="scheme" id="custom">
Custom
</div>
</div>
<div class="row-container" id="custom-opt">
<button class="btn elem">Choose xyz</button>
<button class="btn elem">Choose abc</button>
</div>
<div class="sep"></div>
<div class="row-container">
<btn class="small-btn">cancel</btn>
<div class="sep"></div>
<btn class="small-btn">prev</btn>
<btn class="small-btn">next</btn>
</div>
</div>
<script>
var scheme = "";
$("#custom-opt").hide();
$(".scheme").click(function () {
if (scheme!= "") {
if (scheme==$(this).attr("id")) {return;}
if (scheme=="custom") {$("#custom-opt").hide();}
$("#"+scheme).removeClass("selected");
}
scheme = $(this).attr("id");
$(this).addClass("selected");
if (scheme == "custom") {
$("#custom-opt").show();
}
});
</script>
</body>
</html>