I'm trying to move a picture from the left to the right, and my H3 element from the right to the left.
I recently just finished learning about flexbox via teamtreehouse.com, but doing it on my own I seem to have become stuck!
Anything I seem to write to do with flex just doesn't seem to work, so I'm presuming I've done something majorly wrong!
#about {
margin-top: 50px;
margin-left: 30px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
<div id="about">
<section>
<img src="img/meprofile.jpg" alt="Photograph of" class="profile-photo">
<h2 class="aboutme">About</h2>
<p>Hi,.</p>
<p>If you'd like to follow me on Twitter, my username is #leehoward05.</p>
</section>
</div>
Your intended flex parent is too high up in the DOM tree. The flex parent must be one level above the children. Try this:
#about > section {
margin-top: 50px;
margin-left: 30px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.aboutme {
order: 0;
}
.profile-photo {
order: 3;
}
https://jsfiddle.net/8kcf5snm/
Related
I want to write these two addresses in my heading, I tried this code but "/" doesn't place in the same line. could anyone help me fix it?
<header>
<nav class="header">
<h1>CRIS</h1>
<p class="light_grey">Art direction design</p>
<div class="address">
<address>Call me (+706)098-0751</address>
<p>/</p>
<address>cris#gmail.com</address>
</div>
<p>Menu</p>
</nav>
</header>
and this is css code :
.header {
justify-content: space-around;
display: flex;
}
.address {
display: flex;
justify-content: space-around;
}
You need to add align-items: center to it:
.address {
display: flex;
justify-content: space-around;
align-items: center;
}
<div class="address">
<address>Call me (+706)098-0751</address>
<p>/</p>
<address>cris#gmail.com</address>
</div>
Because by default, <p> tag has some vertical margins applied it, you could also set .address p { margin: 0; } to get rid of it.
There are several solutions to your problem. For example, here are two of the many:
This is #Hao Wu answer, using align-items: center. <--- Better use this solution.
This is to use margin rules, like this:
.address address,
.address p {
margin-top: auto;
margin-bottom: auto;
}
I'm trying to create "cards" for my team. However, the look weird because the dimensions are different.
My set up looks like this:
<div class="card-wrapper">
<div class="card">Card1</div>
<div class="card">Card2</div>
</div>
My css looks like this now:
.card-wrapper
{
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
}
.card
{
width: 30rem;
background: #000;
align-items: center;
justify-content: center;
}
I can't seem to find a way to make the height the same for all cards. I saw here on stackoverflow that I should:
.card-wrapper {
display:flex;
}
.card {
flex:1;
}
But that does not seem to work. Any suggestions?
Here is a picture of what it currently looks like:
CARDS NOW
i think is because you use
align-items: center
just remove it should have same height for these two card
https://stackblitz.com/edit/typescript-sevm5b
Setting a flex-basis would be helpful. Moreover you don't need the align-items and align-content for this.
* { box-sizing: border-box; }
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
height:20vh
}
.card {
box-shadow: 0 0 4px rgba(0,0,0,0.4);
flex: 0 1 33.33%;
padding: 15px; /* gutter width */
}
<div class="container">
<div class="card"><br></div>
<div class="card"><br></div>
<div class="card"><br><br><br><br><br></div>
</div>
I've been trying to get these objects to center and when I used an <a href> tag, I could see that I was able to click way away from the picture and still the link would activate. I am assuming this means that the child containers are taking up 50% of the width each, despite only a tiny portion of the container being full. Why is there blank space that is preventing me from aligning my objects?
RELEVANT HTML:
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>Previous Project </p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p> Next Project</p>
</div>
</div>
RELEVANT CSS:
.container {
display: flex;
justify-content: center;
}
.containerimg {
width: 30%;
height: auto;
}
.next {
display: flex;
flex-direction: column;
}
.previous{
display: flex;
flex-direction: column;
}
CODEPEN: https://codepen.io/daniel-albano/pen/zYGKZEw?editors=1100
Your question is a little vague, but I'm assuming that you want to center the .previous and .next divs.
Since both of these are using display: flex already, you simply need to add align-items: center to the .previous and .next classes to make them center horizontally. If you also want the content (the image and text) to center vertically, you'll need to add justify-content: center. Here's the result:
.next {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.previous {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
If you're trying to make the images in those divs take up more space, you'll need to increase the width rule below. Since you commented that you need 100%, you'll need to change it to this:
.containerimg {
width: 100%;
height: auto;
}
I found the issue, I needed my images to contain 100% of the space and I needed to assign a width element to the child containers.
.container {
display: flex;
justify-content: center;
width:100vw;
}
.previous, .next{
width:30%;
display:flex;
flex-direction:column;
align-items:center;
}
img{
width:100%;
}
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>caption 1</p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p>caption 2</p>
</div>
</div>
You should be able to solve this issue by adding "align-items: center" to your .next and .previous classes. The reason for this is that when you switch the flex-direction to column that also switches how align-items and justify-content work, essentially reversing them.
.next {
display: flex;
flex-direction: column;
align-items: center;
}
.previous{
display: flex;
flex-direction: column;
align-items: center;
}
I'm trying to use flexbox (justify-content: space-between;) to push the Motorola logo to the left and the red block (nav-bar) to the right. It actually works pretty well as long as there is no anchor tag involved. However, I need anchor tags so that visitors can actually click on each item of the nav-bar and get to the respective section of the website.
How can I make justify-content work without removing the anchor tags?
HTML
<div id="header">
<img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Motorola_Logo_White.png" alt="This is Motorolas Logo">
<div id="nav-bar">
<div id="nav1" class="nav-link"><a href="#prices">Prices</div>
<div id="nav2" class="nav-link"><a href="#prices">Specs</div>
<div id="nav3" class="nav-link"><a href="#prices">Reviews</div>
</div>
</div>
CSS
#header {
background-color: gray;
position: fixed;
justify-content: space-between;
z-index: 1;
display: flex;
width: 100%;
height: 4rem;
}
#header-img {
background-color: orange;
height: 4rem;
width: 25%;
display: flex;
align-items: center;
justify-content: center;
}
#nav-bar {
background-color: red;
width: 25%;
height: 4rem;
display: flex;
justify-content: space-around;
align-items: center;
}
Here you can see it on Codepen
In cases where you have a flex container with left-aligned content - except one or more items you want to right-align, there is a shortcut using the margin property.
If you add the following rule to your existing styles:
#nav-bar {
margin-left: auto; /* Pushes the element right inside a flex container */
}
It should work as you want. You could even remove the justify-content: space-between; rule from your #header selector.
I have a simple block of text sharing a display: flex container with an <a> tag.
Unfortunately, the wrapping is a bit weird, almost as if the <a> tag's "true" width isn't being treated as such, or like it has a width of 0 (judging by how it is positioned).
Is there some styling I can apply to <a> tags to make it act more "text-like"?
JSFiddle
body {
font-size: 32px;
}
body > .container {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
}
body > .container > .foot {
flex: 1 0 100%;
background-color: grey;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
body > .container > .foot > .content {
flex: 1 0 70%;
width: 50%;
height: 350px;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
text-align: center;
}
<div class='container'>
<div class='foot'>
<div class='content'>
We'll be back up shortly. We are undergoing a scheduled maintenance. Apologies for the inconvenience. Check <a href='http://status.mywebsite.com'>http://status.mywebsite.com </a> for updates.
</div>
</div>
</div>
Answer
You have text-align: center which is applying to the text, but not the anchor element.
You have justify-content: flex-start which is applying to the anchor element, but not the text.
All you need is a switch to justify-content: center.
revised fiddle
body {
font-size: 32px;
}
body > .container {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
}
body > .container > .foot {
flex: 1 0 100%;
background-color: grey;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
body > .container > .foot > .content {
flex: 1 0 70%;
width: 50%;
height: 350px;
display: flex;
flex-flow: row wrap;
justify-content: center; /* ADJUSTED */
align-items: center;
align-content: center;
text-align: center;
}
<div class='container'>
<div class='foot'>
<div class='content'>
We'll be back up shortly. We are undergoing a scheduled maintenance. Apologies for the inconvenience. Check <a href='http://status.mywebsite.com'>http://status.mywebsite.com </a> for updates.
</div>
</div>
</div>
Explanation
You wrote:
I have a simple block of text sharing a display: flex container with an <a> tag.
Well, your block of text isn't as simple as you might think.
You're not dealing with a single string.
What you actually have is a flex container with three flex items:
An anonymous flex item wrapping the text before the anchor element
The anchor element
An anonymous flex item wrapping the text after the anchor element
From the spec:
4. Flex Items
Each in-flow child of a flex container becomes a flex item, and each
contiguous run of text that is directly contained inside a flex
container is wrapped in an anonymous flex item.
The behavior you're seeing is three flex items wrapping.
The anchor text itself will not wrap because it is equivalent to a single word. But if you add spaces and text in the anchor it will wrap like everything else.
Also see this post:
Why do I need "text-align: center" when the container has "justify-content: center"?