align items not working flex
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}align items not working flex
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}flex wrap css
<style>
#datadiv {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
}
#datadiv div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h1>The flex-wrap Property</h1>
<div id="datadiv">
<div style="background-color:red;">A</div>
<div style="background-color:green;">B</div>
<div style="background-color:yellow;">C</div>
<div style="background-color:blue;">D</div>
<div style="background-color:cyan;">E</div>
<div style="background-color:indigo;">F</div>
</div>felx-wrap css
The flex-wrap property specifies whether the flexible items should wrap or not. Note: If the elements are not flexible items, the flex-wrap property has no effect.flex inside flex mr-auto not working
// add width to 100% inside flex wrapper dive
<div class="d-flex p-2">
<div class="profile-avatar mr-2">
<img class="avatar-img" src="/images/Avatar" alt="avatar">
</div>
<div class="w-100">
<div class="d-flex mb-1">
<h6 class="text-truncate mb-0 mr-auto">Name</h6>
<p class="small text-muted text-nowrap last-updated" datetime="Timestamp"></p>
</div>
<div class="text-wrap text-break p-1 message">message.Content</div>
</div>
</div>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
