This question already has answers here:
Make grid container fill columns not rows
(6 answers)
Closed 3 months ago.
I feel really silly right now as I'm sure the solution is quite simple, however I'm wondering how to make divs alternate rows so that I would have a dynamic layout that follows the rules like this:
1 3 5 7 9
2 4 6 8 10
If my html were to look like:
<div 1>
<div 2>
<div 3>
<div 4>
etc.
You can try something like this:
.container {
display: flex;
flex-direction: column;
align-content: flex-start;
flex-wrap: wrap;
height: 50px;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
And for sure you can change the height depending on your needs.
Related
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.
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 3 years ago.
So basically, what I have here is a contact page, that shows each contact's info inside a card. It's basically flex container with flex items. I want cards to expand to full width of a first row (5 cards in a row on desktop). I have managed to achieve that but what I want to have is to have all the cards be the same width. For example if user has 7 contacts, first 5 cards will be displayed in a first row nicely, but second two will expand to take the full width of the second row. Is it possible to make those cards the same width as others?
<div class="d-flex flex wrap">
<div class="contact-card">
<div>
<div class="contact-card">
<div>
<div class="contact-card">
<div>
<div class="contact-card">
<div>
<div class="contact-card">
<div>
</div>
.contact-card {
flex: 1 1 0;
}
It looks like a straight forward Bootstrap layout. I copied CSS from Bootstrap CSS.
You can adjust width (and consequently number of columns) in a row by setting flex:0 0 16.666667% and max-width: 16.666667%; to custom values.
.row {
display: flex;
flex-wrap: wrap;
}
.col-2 {
width: 100%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
/*DEMO*/
*,*::before,*::after{box-sizing:border-box}
.col-2{height:80px;border:1px red solid}
<div class="row">
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
</div>
I'm trying to left align B and then right align C only if there is space, if there is not enough space, how do I make just position itself after B instead of right aligning? is this only doable with javascript or can I do it from CSS?
<div class='A'>
<div class='B'/>
<div class='C'/>
<div>
I actually have it working using javascript to apply css classes and update based on those, but I was wondering if it was possible without doing that.
You can use flexbox. By using justify-content:space-between; items takes space in between of them
.A{
display:flex;
justify-content:space-between;
}
<div class="A">
<div class="B">B</div>
<div class="C">C</div>
</div>
Try out display: flex
like this:
<div class=‚flex a‘>
<div class=‚b‘></div>
<div class=‚spacer‘></div>
<div class=‚c‘></div>
</div>
And use this CSS
.flex {
display: flex;
flex-wrap: wrap;
}
.spacer {
flex: 1 1 auto
}
For more information how flex works look here
Yes you can use
flex-wrap: wrap;
remove display flex in your style
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 3 years ago.
I'm trying with 4 div to get this result in flex. I have my container in display: flex; how to get this result ?
<div class="pictures">
<div class="big"></div>
<div class="small"></div>
<div class="small"></div>
<div class="bottom"></div>
</div>
<div style="display: flex; flex-direction: row;">
<girl/>
<div style="display: flex; flex-direction: column;">
<div style="display: flex; flex-direction: row;">
<horizontal lines image/>
<vertical lines image/>
</div>
<sweet escape image/>
</div>
</div>
The concept you are missing is the "flex-direction" one. It tells the flex box to layout the children either in a row or column. You just need to use that, and nest them!
This question already has answers here:
Flex-box: Align last row to grid
(35 answers)
Targeting flex items on the last or specific row
(10 answers)
Closed 4 years ago.
This snippet demonstrates the problem:
.flex-cont{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.child {
flex-basis: 30%;
height: 70px;
margin-bottom: 25px;
border: 1px solid black;
background-color: blue;
}
<div class="flex-cont">
<div class="child one"></div>
<div class="child one"></div>
<div class="child one"></div>
<div class="child one"></div>
<div class="child one"></div>
</div>
I want the available space to spread in between the child elements. But when there is a row with less elements than columns, I want them to display one after the other, without an empty spot. Any ideas on how to solve this using CSS?