I can't make wrap the divs into columns.
Here is my code
.hosts.body
display: flex
flex-direction: column
flex-wrap: wrap
justify-content: flex-start
align-content: flex-start
align-items: flex-start
.server
border-left: 0.3em solid $green
padding: 0.3em
color: $green
margin: 0.1em
background: #c8e6c9
min-width: 12em
max-width: 12em
overflow: hidden
Link: http://codepen.io/CJRoman/pen/YXNGGq
What i'm doing wrong? I can't find out what it needs additionally to wrap.
you need to set a height to containing flexbox element,
try modifying like this:
.body
display: flex
flex-direction: column
flex-wrap: wrap
justify-content: flex-start
align-content: flex-start
align-items: flex-start
height: 500px
this fiddle is a little different but it's just to give you an idea
flex-direction: column means the child-element will align from top to bottom and every one will occupy one line,you can remove it because of the default value is flex-direction: row,which means every child-element will display in one line if the width of flex-container is big enough
Related
so for responsiveness, I have created a flexbox and placed some images inside but for some reason, I am not able to place all the images in the same line. written below is my CSS code. the container-project is the class for the div in which I am placing all the images and the project-img class is the class for every image placed inside the div.
.container-projects{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.project-img{
width: 25%;
height: auto;
border-radius: 30px;
padding: 20px;
}
I see two issues.
One is that you've set flex-wrap to wrap which means that flex items will wrap onto multiple lines, from top to bottom. Try setting it to nowrap instead.
The second depends on how many images you're trying to put in the line. If it's 4 then you're fine, otherwise you want to change the width: 25%; to a different value as at the moment it will be dividing the width of the containing area in to 4. You might want to look into the flex-basis property instead. It defines the default size of an element before the remaining space is distributed.
Add align-items: center;
.container-projects{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
I have a container <div> with display: flex. It has a child <a>.
How can I make the child appear "inline"?
Specifically, how can I make the child's width determined by its content, and not expand to the width of the parent?
What I tried:
I set the child to display: inline-flex, but it still took up the full width. I also tried all other display properties, but nothing had an effect.
Example:
.container {
background: red;
height: 200px;
flex-direction: column;
padding: 10px;
display: flex;
}
a {
display: inline-flex;
padding: 10px 40px;
background: pink;
}
<div class="container">
Test
</div>
http://codepen.io/donpinkus/pen/YGRxRY
Use align-items: flex-start on the container, or align-self: flex-start on the flex items.
No need for display: inline-flex.
An initial setting of a flex container is align-items: stretch. This means that flex items will expand to cover the full length of the container along the cross axis.
The align-self property does the same thing as align-items, except that align-self applies to flex items while align-items applies to the flex container.
By default, align-self inherits the value of align-items.
Since your container is flex-direction: column, the cross axis is horizontal, and align-items: stretch is expanding the child element's width as much as it can. (The column setting is also the reason why display: inline-flex isn't working.)
You can override the default with align-items: flex-start on the container (which is inherited by all flex items) or align-self: flex-start on the item (which is confined to the single item).
Learn more about flex alignment along the cross axis here:
How does flex-wrap work with align-self, align-items and align-content?
Learn more about flex alignment along the main axis here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
In addition to align-self you can also consider auto margin which will do almost the same thing
.container {
background: red;
height: 200px;
flex-direction: column;
padding: 10px;
display: flex;
}
a {
margin-right:auto;
padding: 10px 40px;
background: pink;
}
<div class="container">
Test
</div>
width: min-content also yields the same result.
Not supported in IE11 if that matters to you: https://caniuse.com/mdn-css_properties_width_min-content
I have a container <div> with display: flex. It has a child <a>.
How can I make the child appear "inline"?
Specifically, how can I make the child's width determined by its content, and not expand to the width of the parent?
What I tried:
I set the child to display: inline-flex, but it still took up the full width. I also tried all other display properties, but nothing had an effect.
Example:
.container {
background: red;
height: 200px;
flex-direction: column;
padding: 10px;
display: flex;
}
a {
display: inline-flex;
padding: 10px 40px;
background: pink;
}
<div class="container">
Test
</div>
http://codepen.io/donpinkus/pen/YGRxRY
Use align-items: flex-start on the container, or align-self: flex-start on the flex items.
No need for display: inline-flex.
An initial setting of a flex container is align-items: stretch. This means that flex items will expand to cover the full length of the container along the cross axis.
The align-self property does the same thing as align-items, except that align-self applies to flex items while align-items applies to the flex container.
By default, align-self inherits the value of align-items.
Since your container is flex-direction: column, the cross axis is horizontal, and align-items: stretch is expanding the child element's width as much as it can. (The column setting is also the reason why display: inline-flex isn't working.)
You can override the default with align-items: flex-start on the container (which is inherited by all flex items) or align-self: flex-start on the item (which is confined to the single item).
Learn more about flex alignment along the cross axis here:
How does flex-wrap work with align-self, align-items and align-content?
Learn more about flex alignment along the main axis here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
In addition to align-self you can also consider auto margin which will do almost the same thing
.container {
background: red;
height: 200px;
flex-direction: column;
padding: 10px;
display: flex;
}
a {
margin-right:auto;
padding: 10px 40px;
background: pink;
}
<div class="container">
Test
</div>
width: min-content also yields the same result.
Not supported in IE11 if that matters to you: https://caniuse.com/mdn-css_properties_width_min-content
Using flexbox, how can you align a <p> to its parent's "end"?
According to the documentation, adding align-content: flex-end to the parent element should be enough. However, this isn't working in the example below.
Example:
Here is a simple div containing a p element.
div {
display: flex;
flex-direction: column;
align-content: flex-end; /* This should do the alignment, but doesn't. */
background: yellow;
padding: 50px;
height: 300px;
width: 400px;
}
<div>
<p>Align me to the end.</p>
</div>
jsFiddle
A hacky solution would be to add a ::before to the child with flex: 1, but I'm curious if there is a better solution.
The align-content property only works when there are multiple lines of flex items in a container. This property is designed to distribute the space between lines.
Since there is only one line in your container, align-content is having no effect.
Use align-items in a single line container.
div {
display: flex;
flex-direction: column;
align-items: flex-end; /* changed from align-content */
justify-content: flex-end; /* optional */
background: yellow;
padding: 50px;
width: 400px;
height: 300px;
}
<div>
<p>
Align me in the bottom left corner.
</p>
</div>
revised fiddle
8.4. Packing Flex Lines: the align-content
property
The align-content property aligns a flex container’s lines within
the flex container when there is extra space in the cross-axis,
similar to how justify-content aligns individual items within the
main-axis.
Note, this property has no effect on a single-line flex container.
Only multi-line flex containers ever have free space in the cross-axis
for lines to be aligned in, because in a single-line flex container
the sole line automatically stretches to fill the space.
This question already has an answer here:
Remove space (gaps) between multiple lines of flex items when they wrap
(1 answer)
Closed 6 years ago.
I have a sidebar that is longer than the content (post previews with thumbnails).
I am using flexbox to build the layout and when the sidebar is longer than the previews, there is a huge gap in between.
I want each row to not have a gap in between as it would if the sidebar was nice and short.
I have thrown together a codepen.
//page wrapper for sidebar
.flexPageWrapper {
display:flex;
/* Centering the page */
max-width:1500px;
margin:0 auto;
}
//search results flexbox container
.searchContentWrap {
flex-grow: 1;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-right: 1em;
flex-direction: row;
}
An initial setting of a flex container is align-content: stretch.
This means that multiple lines in a flex container will expand to cover the length (in this case, height) of the container.
The sidebar is increasing the height of the container, causing your thumbnail content to distribute over a taller space.
You can override this default behavior with align-content: flex-start.
.searchContentWrap {
flex-grow: 1;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-right: 1em;
flex-direction: row;
align-content: flex-start; /* NEW */
}
Revised Codepen