I have a 2 column container. On the left side, there is an image. On the right side, I have 2 <p> elements. I want to position one <p> element at the top, the other at the bottom of the container.
I tried to use flexblox, with align-items to stretch, but that doesn't work. Although flex-start and flex-end does work.
Is this even possible with flexbox?
.container {
display: flex;
align-items: stretch;
}
img {
display: block;
width: 100%;
}
.element-box {
height: 100%;
}
<div class="container">
<div>
<img src="https://placeimg.com/640/480/nature">
</div>
<div class="element-box">
<p>Should be on Top</p>
<p>Should be on Bottom</p>
</div>
</div>
You can make your element-box a column flexbox and give justify-content: space-between. Also remove height: 100% from it.
See demo below:
.container {
display: flex;
align-items: stretch;
}
img {
display: block;
width: 100%;
}
.element-box {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="container">
<div>
<img src="https://placeimg.com/640/480/nature">
</div>
<div class="element-box">
<p>Should be on Top</p>
<p>Should be on Bottom</p>
</div>
</div>
You need flex for second container too where you are having you <p> elements, please look at css below it'll help you:
.element-box {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}
Related
i have a simple question.
My code:
'''
<div class="container">
<div class="child_1">
</div>
<div class="child_2">
</div>
</div>
<div class="another_div">
</div>
'''
How to place 'another_div' next to 'child_2' ?
You have to wrap all your content in a new <div> with a class main-container (say).
Now, set the display of the main container to flex;
display: flex;
As another <div> is supposed to be added to the left of the elements of the <div> with class container, we set the flex-direction to row-reverse.
flex-direction: row-reverse;
The entire main container gets aligned to the right. As it's already in reverse, we set justify-content to flex-end.
justify-content: flex-end;
The another_div is added at the bottom and not on the top, which implies the items are vertically aligned to the bottom. For this, we align the items to the flex-end.
align-items: flex-end;
.main-container {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: flex-end;
}
Link to codepen: https://codepen.io/geekyquentin/pen/wvyJOBX
.child_1,
.child_2,
.another_div {
width: 100px;
height: 100px;
}
.child_1,
.child_2 {
border: 1px solid red;
}
.another_div {
border: 1px solid black;
order: 1;
}
body {
display: flex;
flex-direction: row;
align-items: flex-end;
}
<div class="container">
<div class="child_1"> </div>
<div class="child_2"> </div>
</div>
<div class="another_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 have the following code:
.parent {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.firstChild {
flex: 1;
text-align: left;
}
.lastChild {
flex: 1;
text-align: right;
}
<div class="parent">
A very loooooooooooooooooong link
<span>Work</span>
<span class="lastChild">Other</span>
</div>
Complete fiddle here
The Problem is: The first flex child (long link) element is larger than its content (because of flex-grow). So when the user click next to its text, it also activates the link.
We used flex-grow here in order to make 1. and 3. childs equally wide, so the 2. element can stand -almost- in the middle (since the flex childrens' width vary a lot). How can i achieve this without using flex-grow? Or in other words, how can i guarantee that, the link's width is equal to its text's width?
simply use this.
<div class="parent">
<div class="firstChild">
A very looooooooooooooooooooong link
</div>
<div>
<span>Work</span>
</div>
<div class="lastChild">
<span>Other</span>
</div>
</div>
Wrap it with an additional span.firstChild:
.parent {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.firstChild {
flex:1;
text-align:left;
}
.lastChild {
flex:1;
text-align:right;
}
/* for overview */
a {
border: 1px solid red;
}
<div class="parent">
<span class="firstChild">
A very loooooooooooooooooong link
</span>
<span>Work</span>
<span class="lastChild">Other</span>
</div>
Try this one:
.parent {
display: grid;
align-items: center;
justify-items: start;
grid-auto-flow: column;
justify-content: space-between;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}
<div class="parent">
A very looooooooooooooooooooong link
<div>
<span>Work</span>
</div>
<div class="lastChild">
<span>Other</span>
</div>
</div>
I'm trying to make something similar to Bootstraps jumbotron class using flexbox. I want everything to be centered vertically and horizontally, but I want anything inside of the box to still respect standard HTML rules. That is, if I make an <h1> and then an <h4> I want them to be on separate lines; however, with my current flexbox properties, that's not happening. See the example below -- it looks like titlesubtitle instead of title\nsubtitle
.Jumbotron {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<div class="Jumbotron">
<h1>title</h1>
<h4>subtitle</h4>
</div>
You can introduce a new, non-flex parent to wrap those elements, so that parent will be the centered flex-child, and it's children will just be normal, non-flex children
.Jumbotron {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<div class="Jumbotron">
<div>
<h1>title</h1>
<h4>subtitle</h4>
</div>
</div>
Or for your example, if you just want the children of the flex parent to be on their own line, use flex-direction: column;
.Jumbotron {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
}
<div class="Jumbotron">
<h1>title</h1>
<h4>subtitle</h4>
</div>
I'm now working on a problem for a few hours (not that experienced :D) and right now I'm pretty close, but theres a last thing not working:
I have multiple divs with different orientations in each other. An inner parent div has flex-direction: column; and the child has flex-direction: row; but its not shown inline.
JSFiddle Link: Live Demo
HTML
<div class="flexcon_game">
<div class="flexcon_game_left">
Left
</div>
<div class="flexcon_game_center">
<div class="flexcon_game_center_top">
center_top
</div>
<div class="flexcon_game_center_mid">
<p> (-- </p>
<p> -:- </p>
<p> --) </p>
</div>
<div class="flexcon_game_center_bottom">
center_bottom
</div>
</div>
<div class="flexcon_game_right">
right
</div>
CSS
.flexcon_game{
width: 80%;
margin: auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
}
.flexcon_game_left{
background-color: red;
}
.flexcon_game_right{
background-color: green;
}
.flexcon_game_center{
flex-direction: column;
justify-content: space-around;
background-color: orange;
}
.flexcon_game_center_mid{
flex-flow: row nowrap;
}
Paragraphs are block level elements. Setting the flex direction to row doesn't change that. You have to explicitly make them inline in your CSS:
.flexcon_game{
width: 80%;
margin: auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
}
.flexcon_game_left{
background-color: red;
}
.flexcon_game_right{
background-color: green;
}
.flexcon_game_center{
flex-direction: column;
justify-content: space-around;
background-color: orange;
}
.flexcon_game_center_mid{
flex-flow: row nowrap;
}
.flexcon_game_center_mid p{
display: inline;
}
<div class="flexcon_game">
<div class="flexcon_game_left">
Left
</div>
<div class="flexcon_game_center">
<div class="flexcon_game_center_top">
center_top
</div>
<div class="flexcon_game_center_mid">
<p> (-- </p>
<p> -:- </p>
<p> --) </p>
</div>
<div class="flexcon_game_center_bottom">
center_bottom
</div>
</div>
<div class="flexcon_game_right">
right
</div>