I have items of different sizes in the flex container which I want to display in several columns of different widths, depending on the content. flex-flow: column wrap works good for me with fixed container height but I have fixed width for container and want the height depending on the content. I.e. I want as many columns as fit in width.
Example, how it must look:
.container {
height: 80px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column wrap;
align-content: left;
}
.container > span {
margin: 3px 12px;
background: #ebd2b5
}
<div class="container">
<span>Apple</span>
<span>Apricot</span>
<span>Avocado</span>
<span>Banana</span>
<span>Bilberry</span>
<span>Blackberry</span>
<span>Blackcurrant</span>
<span>Blueberry</span>
<span>Boysenberry</span>
<span>Currant</span>
<span>Cherry</span>
<span>Cherimoya</span>
<span>Cloudberry</span>
<span>Coconut</span>
</div>
Any solutions with CSS?
No. With pure css you can't.
However if you use align-content: stretch; You can distribute the current columns to the entire container width.
.container {
height: 80px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column wrap;
align-content: stretch;
}
.container > span {
margin: 3px 12px;
background: #ebd2b5
}
<div class="container">
<span>Apple</span>
<span>Apricot</span>
<span>Avocado</span>
<span>Banana</span>
<span>Bilberry</span>
<span>Blackberry</span>
<span>Blackcurrant</span>
<span>Blueberry</span>
<span>Boysenberry</span>
<span>Currant</span>
<span>Cherry</span>
<span>Cherimoya</span>
<span>Cloudberry</span>
<span>Coconut</span>
</div>
Related
I have some flexbox item and it look like this https://jsfiddle.net/19ohjvuf/
This is the html
<div id="property">
<div style="background-color:coral;"><img :src="item.property_image" width="200px" height="200px" /></div>
<div class="grow-this" style="background-color:lightblue;"><h3 class="mt item-element">{{item.property_name}} {{item.property_star_rating}}</h3>
here streetShow On Map2.7km from centre</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">Very Good</div>
</div>
and this is the css
#property {
width: 100% !important;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row;
}
#property div {
flex-basis: 200px;
height: 200px;
}
.mt{
margin-top:0px;
}
.grow-this{
flex-direction:column;
display: flex;
flex-grow: 1 !important;
}
.item-element{
margin-left:1% !important;
flex-flow: row;
}
i want the links inside .grow-this to arrange in a horizontal manner(row). I have tried changing flex-direction to be row
flex-direction:row;
and still they still stack as columns.
What can i do to make the links arrange themselves horizontally?
Instead of flex-flow: row; on .item-element you need to set the container those elements are children of to be flex-direction: row. That is the default value when an element is set to display: flex; so simply remove flex-direction: column; to make .grow-this display its children in a horizontal row:
https://jsfiddle.net/sm36ovxb/1/
Or, if you want .grow-this to be a column, but just have the links display next to each other in a nested row then you could wrap them in another <div> (or a <ul>) and set that to a flex row like this:
https://jsfiddle.net/xgpvmqo9/
Try this: flex-flow: row wrap;
#property {
width: 100% !important;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
justify-content:space-between;
}
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 have an element I'd like to be (cross-axis) centered but also 'grow' to a nominal size even with too-little content, BUT ALSO 'shrink' when the width of the page becomes smaller than 350px wide.
HTML
<div class="parent">
<div class="child">
Some content
</div>
</div>
SCSS
.parent {
display: flex;
flex-direction: column;
align-items: center;
.child {
max-width: 350px;
align-self: stretch;
}
}
Adding align-self: stretch; to .child does the job of making it 350px wide, but it seems to negate the align-items: center; in .parent
Is there a way to do this in CSS that I'm missing? Please note that the element can't just be 350px wide all the time - it must also respond to horizontal page resizing as it does in the example fiddle.
Fiddle: https://jsfiddle.net/1uqpxn8L/1/
UPDATED
I think you should use justify-content to h-align child to center.
Please note, when you apply display: flex property to parent, you should apply flex property to child.
.parent {
background: yellow;
display: flex;
flex-direction: column;
align-items: center;
}
.parent .child {
background: black;
color: white;
text-align: center;
flex: 1 1 auto;
width: 100%;
max-width: 350px;
}
<div class="parent">
<div class="child">
I should be 350px wide
<br> and centered in the yellow
<br> unless the page gets smaller,
<br> in which case I should have
<br> 10px padding on either side.
</div>
</div>
Please see the result here, hope this is what you mean: https://jsfiddle.net/1uqpxn8L/11/
You can do something like this.
HTML
<div class="parent">
<div class="child">
Some content
</div>
</div>
SCSS
.parent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
.child {
width: 350px;
#media(max-width: 350px) {
width: 100%;
}
}
}
.parent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
background-color: red;
}
.child {
width: 350px;
background-color: yellow;
}
#media(max-width: 350px) {
.child { width: 100%; }
}
<div class="parent">
<div class="child">
Some content
</div>
</div>
So whats happening is I'm using a media query to change the width of the child depending on the width of the browser.
You just need to remove the flex-direction property. Then it's working as you expected. But there will be a problem if you want to display children elements as column manner. The shrinking problem occurs with the flex-direction property or flex-flow:column values as I checked.
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"?
I have an input element using flex display and I set its flex-basis width like so:
.flex-row input { flex: 0 1 450px; }
and a flex-row div is contained inside of a flex-container div.
I want the flex-row to only take up the width that the input takes.
When I give flex-container display: flex it takes up 100% width.
When I give it display: inline-flex it compresses the input making it much smaller than 450px.
I don't really care about the width of flex-container, although it would be nice for it to take up the width of its child as well, but how do I make flex-row have the same width as the input (namely, when there is enough room for it, 450px)?
.flex-container {
display: flex;
}
.flex-row {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
}
.flex-row input {
flex: 0 1 450px;
}
<div class="flex-container">
<div class="flex-row">
<input type="text" name="query" class="searchbar" />
</div>
</div>
and here is a fiddle example.
Add the same flex property to the flex-row as you have on the flex-row input.
.flex-row{
display: flex;
flex: 0 1 450px;
align-items: center;
justify-content: center;
}
If you want the row to be centered as well then add the align and justify properties to the flex-container as follows.
.flex-container{
display: flex;
align-items: center;
justify-content: center;
}