It's possible to put a div below other if the parent div is flex and its width is below 300px,-CodePudding

I need a responsive behavior on this. Should work as follows.

I have two block divs inside a flex div, like this:

CSS

.container {
  display: flex;
  border-style: solid;
  border-width: 1px;
}

.image {
  width: 100px;
  height: 100px;
}

HTML

<div class="container">
  <div class="column1">
    <img src="image.jpg" class="image">
  </div>
  <div class="column2">
    <p>This is an image description on the right side. This text should be under the image if div.container width is below 300px.</p>
  </div>
</div>

Current result based on the previous code (width: ~520px):

But if the container width is below 300px (~260px in this example), I need this result (without using grid):

CodePudding user response：

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines so you Just add flex-wrap: wrap to your container class

CodePudding user response：

Create a new class which has the flex-direction set as column. This will make the blocks appear one below the other (within the flex). Below are some code snippets taken from a working code.

.container2 {
    display: flex;
    border-style: solid;
    border-width: 1px;
    flex-direction: column;
}

Modify the container div's class based on a condition like below.

For Eg.: If the container width is greater than 300, use the existing class container, or else use the newly created class container2.

<div #dynamiccontainer [ngClass]=" contentWidth >= 300 ? 'container' : 'container2'">
    .....
</div>

Get the element reference of the container using @ViewChild.

@ViewChild('dynamiccontainer') elementView: ElementRef;

Define a variable to store the container width.

contentWidth: number;

Get the container width using the element reference created.

getContainerWidthUsingElementView() {
    this.contentWidth = this.elementView.nativeElement.offsetWidth;
}

Call this above method to update the container width whenever required.

For Eg.: After View Initialisation, and whenever there is a change in the window size.

ngAfterViewInit() {
    this.getContainerWidthUsingElementView();
}

@HostListener('window:resize', ['$event'])
onResize(event) {
    this.getContainerWidthUsingElementView();
}