Подскажите, как с помощью flex сделать следующее:
есть div
, содержащий 2 div
, левый и правый:
<div class = 'body'>
<div class = 'element'>
<div>LEFT</div>
<div>RIGHT</div>
</div>
<div class = 'element'>
<div>FIRST</div>
<div>SECOND</div>
</div>
<div class = 'element'>
<div>LAST</div>
</div>
</div>
Но при этом хочется, чтобы если внутри <div class = 'element'></div>
указан всего один div
, то он должен отображаться справа и выглядеть (по ширине и высоте) как правый div
при двухдивной комбинации.
Использовал приведённые ниже стили, но чего-то всё таки не хватает. Подскажите, как надо листы стилей модифицировать?
.body {
width: 100%;
border: 1px solid #000000;
background: #ffffff;
}
.element {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: flex-start;
min-height: 38px;
margin: 5px;
padding: 0px;
}
.element:nth-child(2n) {
background: lightgoldenrodyellow;
}
.element:nth-child(2n+1) {
background: lightpink;
}
.element > div {
align-self: center;
}
.element > div:first-child:not(:last-child) {
width: 175px;
margin-right: 10px;
padding-left: 20px;
font-size: 18px;
font-family: Calibri;
}
.element > div:last-child {
width: calc(100% - 175px);
}
.element > div:first-child:last-child {
font-size: 18px;
font-family: Calibri;
background: red;
}