Flex layout with two 'modes'
I want to have a layout that adjusts depending on two content profiles. Both have a close button in the upper right corner. The only difference is that the first has a title plus content, while the second only has content (no title).
This is case #1:
In case 2, I want the content section to take over the title area present in case #1.
I haven't done something like this before, and my flex skills haven't seen any action in quite a while, so I'd appreciate some help here.
Solution
Just use flex-wrap: wrap on the flex container to force the content to a new line, and make the title and the button fixed width to not leave any space for the content if the title is present.
- How to maximize the space between characters/letters in a div (like with space-between in CSS flexbox)?
- havung a issue with full width img with css
- How to use peer pseudo-class to detect existence of peers?
- How can you set the height of an outer div to always be equal to a particular inner div?
- Material UI - Autocomplete default margin?
- css - parent :before pseudoelement with child alt attribute as content
- Border-radius property not working in outlook
- Removing bullets from unordered list
- focus:outline-none not working Tailwind CSS with Laravel
- How to fully override styles of Select component from Angular Material?
- How to set size of SVG image in :before pseudo-class?
- Adding JavaScript to my Plotly Dash app (Python)
- CSS: How to let the user know that not all content fits in a flex container
- Subpixel rendering artefact on Chrome when using position: sticky
- Check the kind of unit in Sass/SCSS to optimise CSS
- How to style a specific word in textarea
- How to prevent line overlapping and make media query work for large screens
- What is the correct way to get the color of a font from a site?
- Why Codemirror editor does NOT scroll horizontally with long line?
- Angular grid layout behaviour
- Are "div > p" & "div p" same?
- Hiding Google Translate bar
- How to convert background-position: % in Tailwind
- Unknown at rule @tailwind css(unknownAtRules)
- How do I know the IntersectionObserver scroll direction?
- Display a card on hover
- How does this <td> overflow the <table>?
- Why doesn't the left sticky position work when the scroll container is the body?
- Programmatically import a CSS file by its relative file path
- Angular: Styles from primeng not working even they are listed in styles.scss