Is there a way to remove a div but keep its elements?

by

This is the perfect use case of display:contents; (https://caniuse.com/#feat=css-display-contents)

display: contents causes an element’s children to appear as if they were direct children of the element’s parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.

.container {
  display:flex;
}

.one {
  display:contents;
} 

.one p:first-child {
 order:2;
}
<div class="container">

 <div class="one">
  <p>Content 1</p>
  <p>Content 3</p>
 </div>

 <p>Content 2</p>

</div>

More Related Contents:

  1. How to place elements like this
  2. Why don’t flex items shrink past content size?
  3. Targeting flex items on the last or specific row
  4. Can’t scroll to top of flex item that is overflowing container
  5. Last margin / padding collapsing in flexbox / grid layout
  6. Equal height rows in a flex container
  7. Equal width flex items even after they wrap
  8. Equal height children of flex items
  9. How to center elements on the last row in CSS Grid?
  10. flex-grow not sizing flex items as expected
  11. How to specify line breaks in a multi-line flexbox layout?
  12. How to add 1px margin to a flex item that is flex: 0 0 25%?
  13. How can I combine flexbox and vertical scroll in a full-height app?
  14. Why isn’t object-fit working in flexbox?
  15. Keep the middle item centered when side items have different widths
  16. How can I make my flexbox layout take 100% vertical space?
  17. Removing margin from flex items when they wrap
  18. Calculator keypad layout with flexbox
  19. Flexbox alternative for IE9
  20. Prevent flex items from stretching
  21. Flex items not respecting margins and box-sizing: border-box
  22. Flex item should align left, not center, when it wraps
  23. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  24. Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
  25. Why are some of my CSS rules not working?
  26. Flexbox with fixed header and footer and scrollable content
  27. Different implementation of Flexbox in Firefox and Chrome
  28. Why does flex-box work with a div, but not a table?
  29. What are the default values for justify-content & align content?
  30. Sizing flex items on the last row

Leave a Comment