Can't find an answer why .user-name-box & .user-location divs don't wanna stay on center of parent div...
.main-content{
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: 600px;
background: grey;
}
.user-info{
display: inline-flex;
flex-flow: column nowrap;
justify-content: center;
align-content: center;
width: 300px;
background: red;
}
.user-name-box{
display: flex;
width: 100px;
height: 100px;
background: blue;
color: white;
}
.user-location{
display: flex;
width: 100px;
height: 100px;
background: yellow;
color: black;
}
<div class="main-content">
<div class="user-info">
<div class="user-name-box">user-name-box</div>
<div class="user-location">user-location</div>
</div>
</div>
Thanks in advance!
It's because you are using align-content instead of align-items on .user-info.
.main-content {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: 600px;
background: grey;
}
.user-info {
display: inline-flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
width: 300px;
background: red;
}
.user-name-box {
display: flex;
width: 100px;
height: 100px;
background: blue;
color: white;
}
.user-location {
display: flex;
width: 100px;
height: 100px;
background: yellow;
color: black;
}
<div class="main-content">
<div class="user-info">
<div class="user-name-box">user-name-box</div>
<div class="user-location">user-location</div>
</div>
</div>
Related
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 4 months ago.
I have a horizontally centered column of Flex items ordered from 1 to 5 that are aligned from the top of the container like this:
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container><div class=item>1</div><div class=item>2</div><div class=item>3</div><div class=item>4</div><div class=item>5</div></div>
I would like to let it aligned by the bottom of the container instead. I manage to do it with flex-direction: column-reverse; like in the next Snippet:
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-items: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container><div class=item>1</div><div class=item>2</div><div class=item>3</div><div class=item>4</div><div class=item>5</div></div>
However, as you see, the items get out of order! Is there a way to let a flex column on the bottom without reversing the items order using CSS? I tried every Flex property that I know so far without success.
You can use justify-content: end;
.container {
width: 150px;
height: 150px;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: end;
}
.content {
width: 25px;
height: 25px;
border: 1px solid black;
}
<div class="container">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>
You need to use the justify-content property to align content along the main axis (in your case vertically). You are using align-items which defines how the items should be aligned along the cross axis.
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container>
<div class=item>1</div>
<div class=item>2</div>
<div class=item>3</div>
<div class=item>4</div>
<div class=item>5</div>
</div>
I'm trying to make an item center,but somehow it not work
Here is html part:
<div>
<div className={styles.unanswerQuestionContainer}>
<div className={styles.headerContainer}>
<div>Unanswered Questions</div>
<div>Answered Questions</div>
</div>
</div>
</div>
Here is css part:
.unanswerQuestionContainer {
height: 60vh;
width: 60vw;
border: 1px solid;
display: flex;
margin: 20px 0 0 0;
align-self: center;
}
.headerContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
But it show something like this:
It do not center the div, how can i center this ??
Edit: When i try to inspect then it show all of this is margin:
You need to add following style to outer div(parent) unanswerQuestionContainer
display: flex;
justify-content: center;
align-items: center;
height: 100%;
body{
height: 100vh;
margin: 0;
}
.unanswerQuestionContainer {
height: 60vh;
width: 60vw;
border: 1px solid;
display: flex;
margin: 20px 0 0 0;
align-self: center;
}
.headerContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.outer{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<div class="outer">
<div class="unanswerQuestionContainer">
<div class="headerContainer">
<div>Unanswered Questions</div>
<div>Answered Questions</div>
</div>
</div>
</div>
You will have to adjust which css properties you will use in order to prevent the two h1 from overlapping.
<div className={styles.unanswerQuestionContainer}>
<div class="Questions">
<p id="question-type">Answered Question</p>
<p id="question-type">Unanswered Question</p>
</div>
</div>
.questions h1 {
width: 100px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I have a flexbox parent setted with flex-direction: row.
Inside this parent, I have two children. I would like them to have the same height!
Inside this children I have dynamic content (with variable height).
The way I'm doing, if I add text on the right child, the left one will grow.
But If the left child grows, the right one stays small.
Should not they behave in the same way?
Here is a fiddle: https://jsfiddle.net/4g6uevok/8/
HTML:
<div id="main">
<div class="left">
<div class="title">MY TITLE:</div>
<div class="left-area">
<div class="left-area-row">
<div class="left-area-row-titulo">#1</div>
<div class="left-area-row-info">A</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">#2</div>
<div class="left-area-row-info">B</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">#3</div>
<div class="left-area-row-info">AC</div>
</div>
</div>
</div>
<div class="right">
<div class="title">SECOND TITLE:</div>
</div>
</div>
CSS:
#main {
width: 100%;
height:auto;
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
background-color: red;
}
.left{
width: 400px;
display: flex;
flex-direction: column;
background:lime;
align-items: stretch;
}
.title {
width: 100%;
font-size: 1.5em;
color:#525252;
display: flex;
justify-content: center;
margin-bottom: 20px;
font-weight: bold;
font-family: "emir-bold";
}
.left-area {
width: 100%;
display: flex;
flex-direction: column;
}
.left-area-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-area-row-titulo {
width: 49.5%;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #819196;
color: white;
padding: 6px;
margin:0 2px 4px 0;
}
.left-area-row-info {
width: 49.5%;
display: flex;
align-items: center;
justify-content: center;
background: #CCCCCC;
padding: 6px;
margin:0 0 4px 2px;
}
.right {
width: calc(100% - 430px);
height: 100%;
display: flex;
flex-direction: column;
background:orange;
align-items: stretch;
}
Flex items are aligned to strech by default. Your height:100% value in .right class preventing it to take whole height so try to remove height:100% to the .right element
#main {
width: 100%;
height: auto;
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
background-color: red;
}
.left {
width: 400px;
display: flex;
flex-direction: column;
background: lime;
align-items: stretch;
}
.title {
width: 100%;
font-size: 1.5em;
color: #525252;
display: flex;
justify-content: center;
margin-bottom: 20px;
font-weight: bold;
font-family: "emir-bold";
}
.left-area {
width: 100%;
display: flex;
flex-direction: column;
}
.left-area-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-area-row-titulo {
width: 49.5%;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #819196;
color: white;
padding: 6px;
margin: 0 2px 4px 0;
}
.left-area-row-info {
width: 49.5%;
display: flex;
align-items: center;
justify-content: center;
background: #CCCCCC;
padding: 6px;
margin: 0 0 4px 2px;
}
.right {
width: calc(100% - 430px);
display: flex;
flex-direction: column;
background: orange;
align-items: stretch;
}
<div id="main">
<div class="left">
<div class="title">MY TITLE:</div>
<div class="left-area">
<div class="left-area-row">
<div class="left-area-row-titulo">
#1
</div>
<div class="left-area-row-info">A</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#2
</div>
<div class="left-area-row-info">BA</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#3
</div>
<div class="left-area-row-info">C</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#4
</div>
<div class="left-area-row-info">D</div>
</div>
</div>
</div>
<div class="right">
<div class="title">SECOND TITLE:</div>
</div>
</div>
.main-content{
height: 100%;
width: 60%;
min-height: 800px;
background-color: white;
border-radius: 5px;
margin-left: 1%;
border: solid 1px black;
}
.profile-banner{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 7vw;
margin-top: 7%;
background-color: rgba(71, 135, 195, 0.5);
}
.profile-avatar{
width: 18%;
margin-right: 3%;
img{
width: 100%;
border: solid white 2px;
}
}
.profile-username{
margin-left: 5%;
font-size: 4vw;
color: $font-blue;
font-family: 'Titillium Web', sans-serif;
-webkit-text-stroke: 1px white;
}
.profile-second-sec{
margin-top: 8%;
height: 20vw;
background-color: blue;
}
.profile-third-sec{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 8%;
height: 30vw;
background-color: grey;
overflow-x: scroll;
white-space: nowrap
}
.profile-image-container{
display: flex;
align-items: center;
}
<div class="main-content">
<div class="tab-header font-large">
<i class="fa fa-user"></i> User profile
</div>
<div class="profile-banner flerowspb">
<div class="profile-username">
User profile
</div>
<div class="profile-avatar">
Avatar image
</div>
</div>
<div class="profile-second-sec">
</div>
<div class="profile-third-sec">
>> This is where the images go <<
</div>
</div>
EDIT: added in code snippit, Hope it helps
I trying to create a horizontal scroll div but when i add the content images all it does is squeeze all the images inside of it like so,
So its resizing the images to fit in but i would like them to be normal size and be able to scroll.
Now i tried to add overflow scroll but its not having that effect
.profile-third-sec{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 8%;
height: 30vw;
background-color: $font-grey;
overflow-x: scroll;
}
.profile-image-container{
display: flex;
align-items: center;
}
Now i thought i knew enough on this to be able to do but obviously not! So any ideas will be appreciated.
Thanks
You can remove the flexbox rules. Then provide the image with some properties. Using white-space and overflow should work for you.
example:
.main-content {
height: 100%;
width: 60%;
min-height: 800px;
background-color: white;
border-radius: 5px;
margin-left: 1%;
border: solid 1px black;
}
.profile-banner {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 7vw;
margin-top: 7%;
background-color: rgba(71, 135, 195, 0.5);
}
.profile-avatar {
width: 18%;
margin-right: 3%;
img {
width: 100%;
border: solid white 2px;
}
}
.profile-username {
margin-left: 5%;
font-size: 4vw;
color: $font-blue;
font-family: 'Titillium Web', sans-serif;
-webkit-text-stroke: 1px white;
}
.profile-second-sec {
margin-top: 8%;
height: 20vw;
background-color: blue;
}
.profile-third-sec {
margin-top: 8%;
height: 30vw;
background-color: grey;
overflow-x: scroll;
white-space: nowrap
}
.prgile-third-sec img {
display: block;
width: 100%;
height: auto;
}
.profile-image-container {
display: flex;
align-items: center;
}
<div class="main-content">
<div class="tab-header font-large">
<i class="fa fa-user"></i> User profile
</div>
<div class="profile-banner flerowspb">
<div class="profile-username">
User profile
</div>
<div class="profile-avatar">
Avatar image
</div>
</div>
<div class="profile-second-sec">
</div>
<div class="profile-third-sec">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300"></div>
</div>
Flex have default wrap property, you can try on your code based on following stylesheet.
.className {
display: flex;
flex-wrap: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.class {
display: flex;
flex-wrap: nowrap;
}
I have a front page layout for my portfolio that Im trying to implement some vertical text on. The right section (blue) is where my name will be written vertically. When I try to rotate the text via css transform, it screws up the layout when scrolling. So Im stumped. Youll have to increase the size to full page to view the layout correctly. Name should extend full length of the blue container.
https://codepen.io/marti2221/pen/BdrdZJ
<div class="container">
<div class="left">
<div class="svg-container">
<div class="svg-logo"></div>
</div>
<div class="question-container">
<p>WHO AM I?</p>
<p>WHAT DO I DO?</p>
</div>
</div>
<div class="middle">
<div class="top">
<nav>
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
<a>Link4</a>
</nav>
</div>
<div class="bottom">
<h1>Im an extremely</br> passionate User</br> Interface Design</br> +
Developer</h1>
</div>
</div>
<div class="right">
<h1></h1>
</div>
</div>
.container{
display: flex;
height: 100vh;
background: black;
}
.left{
display: flex;
flex: 1;
background: gray;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.svg-container{
display: flex;
flex-grow: 1;
background: yellow;
width: 100%;
justify-content: center;
}
.svg-logo{
height: 100px;
width: 200px;
background: orange;
}
.question-container{
display: flex;
flex-grow: 1;
background: green;
width: 100%;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
p{
display: flex;
margin-right: 10px;
}
.middle{
display: flex;
flex: 3;
background: red;
flex-direction: column;
}
.top{
display: flex;
flex: 1;
background: aqua;
}
nav{
display: flex;
flex-direction: column;
margin: 65px 0 0 65px;
}
a:before {
content: '\2014';
position: absolute;
margin-left: -40px;
}
a{
margin: 10px 0 10px 0;
font-size: 24px;
}
.bottom{
display: inline-flex;
flex: 1;
background: brown;
align-items: flex-start;
}
h1{
margin-left: 25px;
font-size: 55px;
}
.right{
display: flex;
flex: .5;
background: blue;
}
.name{
transform: rotate(90deg);
}
sideways-lr alone (without transform) will solve it, though as of today only Firefox support it.
Use writing-mode: vertical-lr; in combination with transform: rotate and it will behave more as you expect
Updated codepen
Stack snippet
.container{
display: flex;
height: 100vh;
background: black;
}
.left{
display: flex;
flex: 1;
background: gray;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.svg-container{
display: flex;
flex-grow: 1;
background: yellow;
width: 100%;
justify-content: center;
}
.svg-logo{
height: 100px;
width: 200px;
background: orange;
}
.question-container{
display: flex;
flex-grow: 1;
background: green;
width: 100%;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
p{
display: flex;
margin-right: 10px;
}
.middle{
display: flex;
flex: 3;
background: red;
flex-direction: column;
}
.top{
display: flex;
flex: 1;
background: aqua;
}
nav{
display: flex;
flex-direction: column;
margin: 65px 0 0 65px;
}
a:before {
content: '\2014';
position: absolute;
margin-left: -40px;
}
a{
margin: 10px 0 10px 0;
font-size: 24px;
}
.bottom{
display: inline-flex;
flex: 1;
background: brown;
align-items: flex-start;
}
h1{
margin-left: 25px;
font-size: 55px;
}
.right{
display: flex;
flex: .2;
background: blue;
flex-direction: column;
justify-content: center;
}
.name{
display: flex;
transform: rotate(-180deg); /* changed */
background: pink;
writing-mode: tb-lr; /* for IE */
writing-mode: vertical-lr; /* added */
}
<div class="container">
<div class="left">
<div class="svg-container">
<div class="svg-logo"></div>
</div>
<div class="question-container">
<p>WHO AM I?</p>
<p>WHAT DO I DO?</p>
</div>
</div>
<div class="middle">
<div class="top">
<nav>
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
<a>Link4</a>
</nav>
</div>
<div class="bottom">
<h1>Im an extremely</br> passionate User</br> Interface Design</br> + Developer</h1>
</div>
</div>
<div class="right">
<h2 class="name">Travis Martin</h2>
</div>
</div>