This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
How to Right-align flex item?
(13 answers)
Closed 1 year ago.
I have a div which have 2 child div, now what I want is
For the right child, it should display text at the most right side.
For the left child, its content should be full in length until right content.
div is
<div class="FindInStoreLocation__store">
<div class="FindInStoreLocation__store__name">
<span class="Text-ds">Roosevelt Collection</span>
</div>
<div class="FindInStoreLocation__store__distance">
<span class="Text-ds">1.2 miles</span>
</div>
</div>
How can I write its Css with flex so that I can see content in one line like:
Roosevelt Collection. 1.2 miles
How I am getting it like
You can use justify-content: space-between; for the desired effect.
Read more about it here.
.FindInStoreLocation__store
{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
border: 1px solid black;
}
<div class="FindInStoreLocation__store">
<div class="FindInStoreLocation__store__name">
<span class="Text-ds">Roosevelt Collection</span>
</div>
<div class="FindInStoreLocation__store__distance">
<span class="Text-ds">1.2 miles</span>
</div>
</div>
EDIT:
I think what you want for mobile devices is to not break words between lines
like:
Roosevelt 1.2
Collection miles
but instead in one line itself.
What you need to do is use white-space property with value nowrap along with overflow: hidden.
.FindInStoreLocation__store
{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
}
<div class="FindInStoreLocation__store">
<div class="FindInStoreLocation__store__name">
<span class="Text-ds">Roosevelt Collection</span>
</div>
<div class="FindInStoreLocation__store__distance">
<span class="Text-ds">1.2 miles</span>
</div>
</div>
Add this CSS code:
.FindInStoreLocation__store{
display: flex;
justify-content: space-between;
flex-direction: row;
}
Explanation:
Flex provides a layout that with other properties can help you create the layout you need.
we set the flex-direction to row because we want both elements in a row and we set justify-content to space-between because it sets the maximum space that is available between the elements of the row.
Related
I am trying to replicate stackoverflow-like design and ran into problem.
<div class="flex-grow-0 pd-around-m"> # line 1
<div class="flex-col fill-row mr-around-s"> # line 2
<div class="flex-row fill-row"> # line 3
<div class="flex-col justify-center mr-around-m"> # line 4
//Buttons
</div>
<span>
//Long Text!!
</span>
</div>
<div class="answer-bottom"></div>
</div>
</div>
.fill-row {
width: 100%
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.mr-around-m {
margin: 1rem;
}
.justify-center {
justify-content: center;
}
When I enter long text in <span>, <div> in line 2, line 3 goes out of div box in line 1.
I tried adding white-space: pre-line to div in line 2 and directly at span but still text goes out of the box.
How can I keep the text inside parent div?
navigation bar on the left has property width:20% but gets squashed. Is this because of the textbox problem I asked above?
EDIT
https://jsfiddle.net/pzcu2yjn/
Here's a replication of my problem. if you make the text in span short enough, navbar and menu will have some empty space in the left maintaining 20% of the screen. however, if you leave the long text as it is, it gets squashed and 20% gets ignored
Few things:
On using flex it is good to provide width for left and right container since container will not know what it should when content increases.
Once you have the width assigned to the right container that is when you can use wrap functionality so the wrap works only for right container and it doesn't have no impact on less container. overflow-break-word;
NOTE:
I have removed unwanted code from the code, you can put it back it has no impact if those are needed.
.flex-row {
display: flex;
width: 100%;
}
.navbar {
display: flex;
flex-direction: column;
justify-content: flex-start;
border-right: 0.05rem solid var(--main-border-color);
align-items: flex-end;
width: 20%;
border: 1px solid red;
}
.pd-around-m {
width: 80%;
border: 1px solid blue;
display: inline-block;
overflow-wrap: break-word;
}
<div class="flex-row">
<div class="navbar">
<div>
menu1
</div>
</div>
<div class="flex-grow-0 pd-around-m">
<div class="flex-col fill-row mr-around-s">
<div class="fill-row">
<span>
AaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaa
</span>
</div>
<div class="answer-bottom"></div>
</div>
</div>
</div>
You can add overflow: hidden; to prevent the text from going outside of your div.
There's a very similar question with a precise answer:
<span> element going outside of <div> element
I want to be able to create a div with a set size (in this example 100x100).
Then i want to be able to add x number of elements inside the div, in this example we can say 10 buttons with the size of 10x10 and align them vertically.
This means all buttons should be in a single column.
Then if i resize and make the new size 80x80 i should have 2 columns, the first with the first 8 buttons and then a new columns with the last 2 buttons.
I have tried with
flex-wrap: wrap;
display: flex;
flex-direction: column;
align-content: flex-start;
It aligns vertically but then when i resize the buttons keeps going over the bottom.
How can i align all elements so they are aligned vertically but if the height are not enought it should overflow into a new column. So no set number of columns since it could be x number of columns depending on the size.
Is this possible using css?
I think it only works when you give the container a maximum height. Is this what you need?
.container {
flex-wrap: wrap;
display: flex;
flex-direction: column;
align-content: flex-start;
max-height: 100px;
}
.button {
width: 100px;
height: 10px;
border: solid thin black;
}
<div class="container">
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
I have a div with two items in it. I put them in a column an needed the first item to justify: center and the second one to justify: flex-end. How do I do this?
HTML:
<div class="wrapper wrapper--login">
<h1 class="wrapper--login__title">
Demo or Die
</h1>
<a class="btn wrapper--login__btn" href="#">
Log in
</a>
</div>
css:
.wrapper--login{
display: flex;
flex-direction: column;
justify-content: flex-end;
}
The wrapper need a height and the title margin: auto 0
Note, this will center the item in the available space left (container minus bottom element), not in the center of the container.
To center it relative to the container, check these posts:
center-and-bottom-align-flex-items
center-and-right-align-flexbox-elements
.wrapper--login{
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 200px;
}
.wrapper--login__title {
margin: auto 0;
}
<div class="wrapper wrapper--login">
<h1 class="wrapper--login__title">
Demo or Die
</h1>
<a class="btn wrapper--login__btn" href="#">
Log in
</a>
</div>
I'm having big trouble centering two elements in a flex container. What I would like to do is to center one element at the top of the flex container (using flex-start ?) and one element at the bottom of the container (flex-end ?). I have tried several options, but was unable to get what I want. Most of my tries ended in one element in the top left half of the container, and the other one in the bottom right one.....
Please have a look at: jsfiddle
<!DOCTYPE html>
<body>
<div class="flexcontainer1">
<div class="txt1"> Some text here </div>
</div>
<div class="flexcontainer2">
<div class="row">
<div class="txt2"> Some more text </div>
<div class="txt2"> Even more text </div>
</div>
</div>
</body>
Is this at all possible ?
Furthermore: I'm telling the elements to be centered, but it looks like the second line (Even more text) is not centered at all. Or is this just optical ?
Thanks,
Hans
The .row container between the flex container and the flex items is annoying, so get rid of it.
And then,
.flexcontainer1, .flexcontainer2 {
display: flex; /* Magic begins */
flex-direction: column; /* Vertical layout */
align-items: center; /* Center horizontally */
}
.flexcontainer1 { justify-content: space-around; }
.flexcontainer2 { justify-content: space-between; }
.flexcontainer1, .flexcontainer2 {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid black;
}
.flexcontainer1 {
justify-content: space-around;
height: 250px;
}
.flexcontainer2 {
justify-content: space-between;
height: 150px;
}
.txt1 {
font-size: 3.0vw;
}
.txt2 {
font-size: 2.2vw;
}
<div class="flexcontainer1">
<div class="txt1">Some text here</div>
</div>
<div class="flexcontainer2">
<div class="txt2">Some more text</div>
<div class="txt2">Even more text</div>
</div>
Using a two-column flexbox layout, how can different-sized children be made to fill all available space, instead of all children having the height of the tallest child of the row?
I set up a demo on jsbin that illustrates the problem. I'd like for all the children to be the size of their wrapped contents.
#container {
width: 800px;
display: flex;
flex-wrap: wrap;
}
.cell {
width: 300px;
flex; 1 auto;
}
<div id="container">
<div class="cell">
Cells with arbitrarily long content.</div>
<div class="cell">
</div>
<div class="cell">
</div>
<div class="cell">
</div>
<div class="cell">
</div>
</div>
</body>
</html>
This is how Flexbox rows are expected to behave. Flexbox is not meant to recreate Masonry with pure CSS: items in one row cannot occupy space allocated for a preceding/following row (same goes for columns if you're using column orientation). You can use align-items to prevent them from stretching, but that's about it:
http://cssdeck.com/labs/9s9rhrhl
#container {
width: 800px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.cell {
width: 300px;
flex: 1 auto;
padding: 10px;
border: 1px solid red;
}
Otherwise, you should be using the column orientation or the multi-column module (see this SO answer: https://stackoverflow.com/a/20862961/1652962)