It doesn't work when I set justify-content: space-between on rightContainer, I want Apple on the top and Sony on the bottom.
<div className={styles.mainContainer}>
<div className={styles.leftContainer}>
<div className={styles.profilePicture} />
<p className={styles.profileUsername}>Test Name</p>
</div>
<div className={styles.rightContainer}>
<p>Apple</p>
<p>Sony</p>
</div>
</div>
css
.mainContainer {
display: flex;
width: 100%;
background-color: cadetblue;
}
.leftContainer {
width: 100%;
background-color: red;
text-align: left;
}
.rightContainer {
width: 100%;
background-color: blue;
text-align: right;
justify-content: space-between;
}
justify-content: space-evenly is only applicable to a flexbox. You can use a vertical flexbox to apply space-evenly.
.mainContainer {
display: flex;
width: 100%;
background-color: cadetblue;
}
.leftContainer {
width: 100%;
background-color: red;
text-align: left;
}
.rightContainer {
width: 100%;
background-color: blue;
text-align: right;
justify-content: space-evenly;
display: flex; /*Create a flexbox*/
flex-direction: column; /*Vertical flexbox*/
}
<div class="mainContainer">
<div class="leftContainer">
<div class="profilePicture" />
<p class="profileUsername">Test Name</p>
</div>
<div class="rightContainer">
<p>Apple</p>
<p>Sony</p>
</div>
</div>
Related
I have made the .main_area a flexbox and it has two elements in it but flex-wrap is not working.
I want that if i open it on 820px screen then it shouldautomaticaly wrap is there a solution to this
.main_area {
display: flex;
flex-wrap: wrap;
/* background-color: burlywood; */
height: 80vh;
width: 100%;
}
.picture_area {
display: flex;
align-items:baseline;
justify-content: flex-end;
/* background-color: red; */
height: 80vh;
width: 50%;
}
.picture_area img {
height: 100%;
/* width: 100%; */
float: right;
filter: grayscale(1);
}
.content_area {
/* background-color: blue; */
height: 80vh;
width: 30%;
flex-direction: column;
align-items: center;
justify-content:center;
}```
the html code is
``` <div class="main_area">
<div class="picture_area" id="picture_area">
<img src="./Cartoons_Bugs_Tunes_Looney_Bunny_Bugs_bunny_HD_Wallpapers-removebg.png" alt="">
</div>
<div class="content_area d-flex" id="content_area">
<h1 class="UI_pattern">UI Problem</h1>
<h1 class="UI_pattern">solver</h1>
<p class="UI_para">And this is why my competitors</p>
<p class="UI_para">Simply call me 'Revolver'</p>
<input type="text" class="Busi_email" placeholder="Type your business email">
<button class="UI_button">Get in touch</button>
</div>
</div>
Might have you forgotten to add the selector before your CSS statement?
.main-area{
display: flex;
flex-wrap: wrap;
/* background-color: burlywood; */
height: 80vh;
width: 100%;
}
This should work nicely for you:
.main_area {
display: flex;
flex-wrap: wrap;
/* background-color: burlywood; */
height: 80vh;
width: 100%;
}
.picture_area {
display: flex;
align-items: baseline;
justify-content: flex-end;
/* background-color: red; */
height: 80vh;
width: 50%;
}
.picture_area img {
height: 100%;
/* width: 100%; */
float: right;
filter: grayscale(1);
}
.content_area {
/* background-color: blue; */
height: 80vh;
width: 30%;
flex-direction: column;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
}
#media only screen and (max-width: 820px) {
.main_area {
display: flex;
flex-wrap: wrap;
flex-flow: column;
align-items: center;
justify-content: center;
}
}
<div class="main_area">
<div class="picture_area" id="picture_area">
<img src="https://dummyimage.com/600x400/000/fff" alt="">
</div>
<div class="content_area d-flex" id="content_area">
<h1 class="UI_pattern">UI Problem</h1>
<h1 class="UI_pattern">solver</h1>
<p class="UI_para">And this is why my competitors</p>
<p class="UI_para">Simply call me 'Revolver'</p>
<input type="text" class="Busi_email" placeholder="Type your business email">
<button class="UI_button">Get in touch</button>
</div>
</div>
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>
In the example I have a block div containing div items, the div items are styled to be circles.
I would like to use flex to display them in two rows of three.
I have them displaying in two rows of three but the items are stretched out of shape.
How can I keep the items as circles and display them as two rows of three
body{
background: grey;
}
.block{
background: white;
display: flex;
height: 400px;
flex-flow: row wrap;
justify-content: space-around;
padding: 20px;
position: absolute;
right: 40px;
top: 80px;
width: 540px;
z-index: 1000;
}
.block__item{
background: red;
border-radius: 80px;
color: white;
flex-basis: 33%;
height: 80px;
text-align: center;
width: 80px;
}
<div class="block">
<div class="block__item">1</div>
<div class="block__item">2</div>
<div class="block__item">3</div>
<div class="block__item">4</div>
<div class="block__item">5</div>
<div class="block__item">6</div>
</div>
If you nest the circles inside the block--item class you can centre them inside without distorting their shape:
body {
background: grey;
}
.block {
background: white;
display: flex;
height: 400px;
flex-flow: row wrap;
justify-content: space-around;
padding: 20px;
position: absolute;
right: 40px;
top: 80px;
width: 540px;
z-index: 1000;
}
.block__item {
display: flex;
justify-content: center;
align-items: center;
width: 33%;
}
.block__item_circle {
display: flex;
background: red;
justify-content: center;
align-items: center;
border-radius: 80px;
color: white;
height: 80px;
text-align: center;
width: 80px;
}
<div class="block">
<div class="block__item">
<div class="block__item_circle">1</div>
</div>
<div class="block__item">
<div class="block__item_circle">2</div>
</div>
<div class="block__item">
<div class="block__item_circle">3</div>
</div>
<div class="block__item">
<div class="block__item_circle">4</div>
</div>
<div class="block__item">
<div class="block__item_circle">5</div>
</div>
<div class="block__item">
<div class="block__item_circle">6</div>
</div>
</div>
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>
I need to do the following design using flexbox. I can't use table or dispay:table due to programming requirements
I can't center the text vertically and maintain the same height in all containers:
https://jsfiddle.net/kurtko/2fq6kn6m/
I'm trying to use to items:
align-self:center;
Or to container:
align-items:center;
But I lose the same height in all containers.
Any ideas?
You can add display: flex align-items: center justify-content: center on .one .small .medium
.item {
display: flex;
text-align: center;
}
.one,
.small,
.medium {
display: flex;
align-items: center;
justify-content: center;
}
.one {
align-items: flex-start;
}
.one {
width: 39%;
margin-right: 1%;
background-color: black;
color: white;
}
.two {
width: 29%;
margin-right: 1%;
}
.three {
width: 40%;
}
.medium {
background-color: grey;
color: white;
margin-bottom: 3px;
height: 200px;
}
.small {
background-color: #c0b55a;
color: white;
margin-bottom: 3px;
height: 100px;
}
<div class="item">
<div class="one">
Top
</div>
<div class="two">
<div class="medium">Center</div>
<div class="medium">Center</div>
</div>
<div class="three">
<div class="small">Center</div>
<div class="small">Center</div>
<div class="small">Center</div>
<div class="small">Center</div>
</div>
</div>
Check the demo
I just update on first div what you missed.
added to one:
.one{
align-items: center;
justify-content: center;
display: flex;
}