- From: Samuel Bradshaw via GitHub <sysbot+gh@w3.org>
- Date: Mon, 16 Oct 2023 22:34:54 +0000
- To: public-css-archive@w3.org
My use case for this is a left-and-right view in landscape that becomes a top-and-bottom view in portrait (think split screen on a phone). Currently I have to use `border-right` in landscape, and switch to `border-bottom` in portrait. I would prefer setting a gap rule so the line automatically adjusts depending on the `flex-direction`.
```
<style>
#container {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
display: flex;
}
.synced-panel {
overflow: scroll;
padding: 2em;
flex-basis: 100%;
}
.synced-panel:not(:last-of-type) { border-right: 2px solid #eee; }
@media screen and (orientation: portrait) {
#container { flex-direction: column; }
.synced-panel:not(:last-of-type) { border-right: 0; }
.synced-panel:not(:last-of-type) { border-bottom: 2px solid #eee; }
}
</style>
```
<img width="530" alt="Screenshot 2023-10-16 at 4 33 12 PM" src="https://github.com/w3c/csswg-drafts/assets/7323052/4d7cd1ec-dfec-42d4-aba6-78a399ffc2ee">
<img width="287" alt="Screenshot 2023-10-16 at 4 33 19 PM" src="https://github.com/w3c/csswg-drafts/assets/7323052/a9c76bbc-c563-4a80-8f4b-0f6c3ca53bc4">
--
GitHub Notification of comment by samuelbradshaw
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-1765376966 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 16 October 2023 22:34:56 UTC