How to "extract aside" an element from a vertical flexbox layout? - html

Question

Let's say I have a couple elements arranged in a column (using flexbox):
And I would like to "spotlight" element #2 in green and set it aside, but let the rest of the elements remain ordered in a column:
Is there a way to do this with just CSS and retain dynamic layout?
I've thought of a workaround by duplicating the green element and wrapping all of this in another flexbox layout ([2[1234]]) so that in the column case, the first green element is hidden ([#[1234]) whereas in the wider case, the second element is hidden ([2[1#34]), but this is a bit messy in the markup - and actually causes issues when the element has some kind of state (e.g. a <video>) that is expected to be retained in both cases.
I've also thought about using position: absolute on the green element, but I couldn't get that to work nicely either: once I set position: relative on the top-level (black) container, I can position the green element where I want, but setting position: absolute on the column container (red) so that I can position in to the right means green element is now positioned relative to the column container again.
Is there a solution I'm overlooking?

Answer 1

Yes you can do this using just CSS. Here's the code for the answer to your question.
HTML:
<div class="gridcontainer">
<div class="display">
</div>
<div class="flexcontainer">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
</div>
CSS:
.gridcontainer{
display: grid;
background: yellow;
grid-template-columns: 1fr .5fr;
height: 20em;
}
.flexcontainer{
background: skyblue;
padding: .5em;
grid-column: 2;
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.card{
background: pink;
border: .1em solid red;
width: 80%;
padding: 1em;
text-align: center;
}
.flexcontainer .card:hover{
position: absolute;
width: 45%;
height: 15em;
transform: translateX(-50vw) translateY(1vh);
}

Answer 2

const expand = document.querySelector('.expand');
expand.addEventListener('click', () => {
expand.parentNode.classList.toggle('active');
});
body {
margin: 0;
}
aside {
display: flex;
flex-direction: column;
gap: 1em;
flex-wrap: wrap;
width: 50vw;
height: 100vh;
background-color: rgba(0, 0, 0, .1);
padding: 1em;
box-sizing: border-box;
position: relative;
transition: .2s;
}
div {
flex: 1;
background-color: rgba(0, 0, 0, .1);
display: flex;
justify-content: center;
align-items: center;
order: unset;
}
.expand {
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%);
padding: 0;
display: flex;
border: none;
background-color: #ddd;
border-radius: 100%;
width: 24px;
height: 24px;
box-shadow: 0 0 0 3px white;
}
.expand svg {
margin: auto;
border-radius: 100%;
transition: .2s;
}
aside.active {
width: 90vw;
}
.active .expand svg {
transform: rotate(180deg);
}
.active .two {
flex: 100 0 100%;
order: -1;
}
<aside class="aside">
<button class="expand">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm-3 5.753l6.44 5.247-6.44 5.263.678.737 7.322-6-7.335-6-.665.753z"/></svg>
</button>
<div class="one">1</div>
<div class="two">2</div>
<div class="thr">3</div>
<div class="for">4</div>
</aside>

Answer 3

if you want, i can answer this, but not using flexbox, using Grid.