<div fxLayout="row" fxLayoutAlign="space-between" style="background-color: blue;">
    <div fxLayout="column" style="width: 50%;">1stOne </div>
    <div fxLayout="column" style="width: 50%;">2bdone</div>
</div>

<hr>

<div fxLayout="row" fxLayoutAlign="space-between" style="background-color: red;">
    <span fxLayout="column" >1stOne </span>
    <span fxLayout="column" >2bdone</span>
</div>

<hr>
<div fxLayout="row" fxLayoutAlign="space-between" style="background-color: red;">
    <span fxLayout="column" fxFlex>1stOne </span>
    <span fxLayout="column" fxFlex>2bdone</span>
</div>

Desired Ouput

----------------1st--------	---------2nd -------------------

myOutput

why fxLayoutAlign is not working
I have alredy Imported FlexLayoutModule in my App.module

Do flexLayout work on inline Items

CodePudding user response：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
 
  <style>
   
.tblrow{
display: flex;
background:#ccc;
padding:10px;
}
</style>
</head>
<body>

 <div  >
    <div fxLayout="column" style="width: 50%;">1stOne </div>
    <div fxLayout="column" style="width: 50%;">2bdone</div>
</div> 

</body>
</html>

CodePudding user response：

<div fxLayout="row" fxLayoutAlign="space-between" style="background-color: blue; display:flex;">
<div fxLayout="column" style="width: 50%;">1stOne </div>
<div fxLayout="column" style="width: 50%;">2bdone</div>

Compare it from your code, just added - "display:flex;" and it worked. Use flex on outer div and then just make width of both inner divs 50%. If it still creates problem , then alongwith "display:flex;" , also add "flex-wrap:wrap;" and it will work as you expect.