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>
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>
Here is my code, the HTML is probably not of much use
<div class="col-1" v-for="m in messages" :key="m.id">
<div class="message-box">
{{m.id}}
</div>
</div>
here is the CSS
.col-1{
display: flex;
flex-direction: column;
flex-basis: 100%;
flex-wrap: wrap;
flex: 1;
width: 20px;
height: 94vh;
background-color: #747D88;
justify-content:start;
align-items: center;
}
Try to use flex-driection: row and get rid of width prop. You can use min or max -width and using height make sure that you have enough space to wrap items.
check jsfiddle
Just use display: flex and flex-direction: column
.col-1 {
display: flex;
flex-direction: column;
width: 100px;
height: 94vh;
background-color: #747D88;
}
.message-box {
margin: 3px;
background-color: green;
}
<div class="col-1" v-for="m in messages" :key="m.id">
<div class="message-box">
<div>Hello 1</div>
</div>
<div class="message-box">
<div>Hello 2</div>
</div>
<div class="message-box">
<div>Hello 3</div>
</div>
</div>
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 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;
}
I'm currently developing my first website. I've come to a point where I have two divs placed next to each other inside of a flexbox. Both divs have a width and height size in percentages. When I shrink the website, however, the right div overlaps the left div. If they're going to overlap I want them to be placed underneath each other. (It's about the right-side-content div overlapping the left-side-content div)
I've included my HTML and CSS code.
HTML:
<div class="content">
<div class="left-side-content">
<div class="intro">
<div class="brands">
<img src="images/logo%20ster.png" id="logo-ster"/>
</div>
<p class="top-title">Banner and endcard</p>
<h1>STER</h1>
<p class="intro-text">"STER" is a beauty, make-up and lifestyle channel on YouTube hosted by the 16 y/o Aster Marcus.</p>
<button class="view-project-button">View Project</button>
</div>
</div>
<div class="right-side-content">
<img src="images/sponsorloop-collage.png"/>
</div>
</div>
CSS:
.content {
display: flex;
align-items: center;
height: 80%;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.content .left-side-content {
width: 30%;
height: 100%;
display: flex;
align-items: center;
}
.content .right-side-content {
width: 70%;
display: flex;
align-items: center;
justify-content: flex-end;
}
Add the flex-wrap property to .content.
Also, instead of using width for left and right content, use flex-basis instead, or incorporate it into the shorthand flex, as in the snippet below...
.content {
display: flex;
align-items: center;
height: 80%;
width: 90%;
margin-left: auto;
margin-right: auto;
flex-wrap: wrap;
}
.content .left-side-content {
flex: 1 0 30%;
height: 100%;
display: flex;
align-items: center;
}
.content .right-side-content {
flex: 1 0 70%;
display: flex;
align-items: center;
justify-content: flex-end;
}
<div class="content">
<div class="left-side-content">
<div class="intro">
<div class="brands">
<img src="images/logo%20ster.png" id="logo-ster" />
</div>
<p class="top-title">Banner and endcard</p>
<h1>STER</h1>
<p class="intro-text">"STER" is a beauty, make-up and lifestyle channel on YouTube hosted by the 16 y/o Aster Marcus.</p>
<button class="view-project-button">View Project</button>
</div>
</div>
<div class="right-side-content">
<img src="https://placehold.it/300x300" />
</div>
</div>