40546

display: flex not working in CSS

Question:

In my template

<div class="summary-card"> <div ng-repeat="cardData in summaryCardsCtrl.summaryDetails"> <div ng-switch ="cardData.uniqueCardsDataFlag"> <div ng-switch-when=true> <div style="background-color: red; width:170px; height: 50px;"> 1111111 </div> </div> <div ng-switch-default> <div class="cool-grid"> <div style="background-color: blue; width:170px; height: 50px;"> 222222 </div> </div> </div> </div> </div> </div>

ng-switch will be true only once; hence the red div will be only one and the rest will be blue.

CSS looks like:

div.summary-card { display: inline-block; margin: 5px 10px 15px 0px; display: flex; } .cool-grid { display: flex; flex-wrap: wrap; border: 1px solid black; }

Now, they all stack up on top of each other.

<a href="https://i.stack.imgur.com/gkxZM.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/gkxZM.png" data-original="https://i.stack.imgur.com/gkxZM.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

But I want them to show like:

<a href="https://i.stack.imgur.com/2zWQt.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/2zWQt.png" data-original="https://i.stack.imgur.com/2zWQt.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

I am not sure how to give classes inside such a ng-repeat to make them look like this.

<strong>so that only the blue divs inside ng-switch-default wraps around each other and not around the red div.</strong>

Please help.

<strong>UPDATE</strong>

Rendered HTML looks like:

<pre class="snippet-code-html lang-html prettyprint-override"><div class="summary-card"> <!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails"> <div ng-switch="cardData.uniqueCardsDataFlag"> <!----><div ng-switch-when="true"> <!-- <div ng-include="'......'"></div> --> <div style="background-color: red; width:170px; height: 50px;"> 1111111 </div> </div><!----> <!----> </div> </div><!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails"> <div ng-switch="cardData.uniqueCardsDataFlag"> <!----> <!----><div class="cool-grid" ng-switch-default=""> <!-- <div ng-include="'.....'"></div> --> <div style="background-color: blue; width:170px; height: 50px;"> 222222 </div> </div><!----> </div> </div><!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails"> <div ng-switch="cardData.uniqueCardsDataFlag"> <!----> <!----><div class="cool-grid" ng-switch-default=""> <!-- <div ng-include="'.....'"></div> --> <div style="background-color: blue; width:170px; height: 50px;"> 222222 </div> </div><!----> </div> </div><!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails"> <div ng-switch="cardData.uniqueCardsDataFlag"> <!----> <!----><div class="cool-grid" ng-switch-default=""> <!-- <div ng-include="'......'"></div> --> <div style="background-color: blue; width:170px; height: 50px;"> 222222 </div> </div><!----> </div> </div><!----> </div>

Answer1:

I've knocked up a simplified version that I think does what you're after.

The outer div needs flex-wrap:wrap, the red one needs to have its flex-basis set at 100%. The blue ones will then wrap to the next column and be laid out out according to whatever rules you give them...

#outer{ height:200px; border:1px solid grey; display:flex; flex-direction:column; flex-wrap:wrap; justify-content:space-between; width:500px; } #red{ background-color:red; width:100px; flex-basis:100%; } .blue{ flex-basis:25%; width:100px; background-color:blue; }

<a href="https://codepen.io/jenko3000/pen/XqVqeg" rel="nofollow">codepen here</a>

Answer2:

Simply use the bootstrap grid to get the layout you want. You do not have to use display flex for that.

Below is an example fot the layout using bootstrap grid

<pre class="snippet-code-css lang-css prettyprint-override">.row { background: #f8f9fa; } .col { border: solid 1px #6c757d; } .red{ background-color:red; padding: 10px; margin: 10px; height: 120px; } .blue{ background-color: blue; padding: 10px; margin: 10px; } <pre class="snippet-code-html lang-html prettyprint-override"><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-6" class=""> <div class="red"> sd </div> </div> <div class="col-md-6"> <div class="row"> <div class="col-md-6"> <div class="blue"> sd </div> </div> <div class="col-md-6"> <div class="blue"> sd </div> </div> <div class="col-md-6"> <div class="blue"> sd </div> </div> </div> </div> </div> </div>

Answer3:

Check this layout. I have used flex for generating it

U can change the height of red block accordingly

Also the blue blocks will wrap automatically to next row, when it doesn't get enough width on the same line

<pre class="snippet-code-css lang-css prettyprint-override">* { box-sizing: border-box; margin: 0; padding: 0; } .summary-card { display: flex; flex-direction: row; } .left-sec, .right-sec { flex: 1; display: flex; } .right-sec { flex: 1; display: flex; flex-wrap: wrap; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="summary-card"> <div class="left-sec"> <!----> <div ng-repeat="cardData in summaryCardsCtrl.summaryDetails"> <div ng-switch="cardData.uniqueCardsDataFlag"> <!----> <div ng-switch-when="true"> <!-- <div ng-include="'......'"></div> --> <div style="background-color: red; width:170px; height: 50px;"> 1111111 </div> </div> <!----> <!----> </div> </div> <!----> </div> <div class="right-sec"> <div ng-repeat="cardData in summaryCardsCtrl.summaryDetails"> <div ng-switch="cardData.uniqueCardsDataFlag"> <!----> <!----> <div class="cool-grid" ng-switch-default=""> <!-- <div ng-include="'.....'"></div> --> <div style="background-color: blue; width:170px; height: 50px;"> 222222 </div> </div> <!----> </div> </div> <!----> <div ng-repeat="cardData in summaryCardsCtrl.summaryDetails"> <div ng-switch="cardData.uniqueCardsDataFlag"> <!----> <!----> <div class="cool-grid" ng-switch-default=""> <!-- <div ng-include="'.....'"></div> --> <div style="background-color: blue; width:170px; height: 50px;"> 222222 </div> </div> <!----> </div> </div> <!----> <div ng-repeat="cardData in summaryCardsCtrl.summaryDetails"> <div ng-switch="cardData.uniqueCardsDataFlag"> <!----> <!----> <div class="cool-grid" ng-switch-default=""> <!-- <div ng-include="'......'"></div> --> <div style="background-color: blue; width:170px; height: 50px;"> 222222 </div> </div> <!----> </div> </div> </div> <!----> </div>

Recommend

  • How to show complete column as editable in extjs grid(cell editing)?
  • How to fallback to entirely different index page if user has javascript disable?
  • Best HTML5 structure for a layout where the title/header is outside the article tag
  • What is RSL (Runtime shared library ) used for in flash?
  • How to make SASS put relative paths in its output
  • Multiple flexboxes with margin-right, except the last one in the row? Without JS?
  • Function JavaScript : on Menu CSS HTML
  • Select inner HTML item in CSS
  • How do I add a File Type Association in a Windows Phone 8.1 app manifest?
  • How to add closing tag for canvas in three js rendered Canvas?
  • AlertDialog style when using setView()
  • Where these are stored?
  • cell spacing in div table
  • Cut the background to expose the layer below
  • HTML5 video only works in IE. The other browsers shows the black screen
  • Image map in Flex
  • Floated image with variable width and heading with background image
  • AndEngine Applying Transparancy to AndEngine View
  • Authentication in Play! and RestEasy
  • Adjust width of select element according to selected option's width
  • jQuery ready not fired after rails link_to is clicked
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • How can I sort a a table with VBA with given text condition?
  • Display images in Django
  • Problem deserializing objects from cache on MyBatis 3/Java
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Bad request using file_get_contents for PUT request in PHP
  • Change multiple background-images with jQuery
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Change JButton Shape while respecting Look And Feel
  • JFileChooser in front of fullscreen Swing application
  • Modifying destination and filename of gulp-svg-sprite
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • jquery mobile loadPage not working
  • Traverse Array and Display in markup
  • Matrix multiplication with MKL
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to set the response of a form post action to a iframe source?
  • Change div Background jquery