My issue is that I have a section within the article that I made a flexbox, and when I reduce the size of the browser those 3 elements in that flexbox will overlap. Any tips?
body {
display: flex;
flex-direction: column;
}
header {
background: blue;
}
main {
display: flex;
flex-direction: row;
flex: auto;
}
article {
flex: 2;
overflow-y: auto;
background: red;
}
aside {
flex: 1;
overflow-y: auto;
background: green;
}
.test {
display: flex;
flex-direction: row;
flex: auto;
align-items: stretch;
background: pink;
}
<body>
<header>
Test
</header>
<main>
<article>
<section>
test
</section>
<section class="test">
<div>
div one
</div>
div two
<div>
div three
</div>
<div>
</div>
</section>
</article>
<aside>
aside
</aside>
</main>
<footer>
</footer>
</body>
http://jsfiddle.net/zLmcyjy6/
Try adding flex-wrap: wrap to the flex container. Flex items do not wrap by default.
In reference to your website (I didn't use your fiddle demo, which has different code), each of the non-wrapping elements is a <section> child of <section class="other">, which is a row-direction, wrap-enabled flex container.
Each <section> flex item has a flex: 1 applied. This translates to:
flex-grow: 1
flex-shrink: 1
flex-basis: 0
With flex-basis set to zero, the initial main size of the flex item is 0, and the width could shrink to that degree, so there's no opportunity to wrap.
I would suggest changing flex-basis: 0 to something like flex-basis: calc(33% - 2em) (i.e., width minus approx. margin, border, padding), for wider screens. So flex: 1 1 calc(33% - 2em).
And then for smaller screens, using a media query, set flex-basis to something like:
#media screen and ( max-width: 500px ) {
.fitness, .education, .pastimes {
flex-basis: 100%;
display: flex; /* optional; for nicer alignment */
flex-direction: column; /* optional; for nicer alignment */ }
}
Alternatively, if you wanted to avoid using media queries, you could set a fixed value to flex-basis which would enable wrap, as well. Something like flex: 1 0 200px.
Related
I have a container which has a display flex property and i set the flex-wrap to wrap.
Problem I am having is that I am getting to much space between items.
My code:
#container {
display: flex;
flex-wrap: wrap;
width: 250px
}
.child {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto
}
<div id="container">
<div class="child">Ss</div>
<div class="child">Very very very long text text text</div>
<div class="child">Small</div>
<div class="child">Medium</div>
</div>
Image:
Can find code in action here:
Fiddle
The flex-grow property distributes free space on the line, based on the value applied.
If you give all items flex-grow: 1, each item will consume equal space.
Since you have two items with flex-grow: 1, they split the space on the line 50-50.
Remove flex-grow. Use margins or padding.
Remove the flex grow and add a gap to create a bit of a space between items.
#container {
display: flex;
flex-wrap: wrap;
width: 250px;
gap: 5px; /*emphasized text*/
}
.child {
flex-shrink: 1;
flex-basis: auto;
}
I'm using flexbox to make my footer stick to the bottom, and for the most part it's working. My problem is, I need the content to be within a specified width, that I set with max-width and center with margin-left:auto; and margin-right:auto;. When I activate flexbox, the contents are squished by the margin-left and margin-right rules, and do not take up the space defined by max-width. I would like to know why this is happening and how to get my footer to look how I want it to look.
Here is how I want my footer to look:
And here is how flexbox is affecting it:
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
div#content {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
max-width: 67.5rem;
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-bottom: 1.875rem;
padding-top: 3.5rem;
}
<body>
<header>...</header>
<div id="content">...</div>
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
<span id="icons">...</span>
</footer>
</body>
If I change max-width to width then it works, but then when I test it in my browser using the device-mobile setting to see how it would look on a mobile device, the width property makes the footer too big and messes up the content. If I take out the margin-left and margin-right properties, then my footer looks like this:
As you can see it's no longer centered. I can't use the flex-basis property because that only affects the height of the footer. Please help.
Edit
Here is a snippet with margin-left and margin-right taken out and replaced with display:flex; and justify-content:space-around;. Be sure to click "Full page" to view with a larger viewport.
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
div#content {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
max-width: 67.5rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-bottom: 1.875rem;
padding-top: 3.5rem;
display: flex;
justify-content: space-around;
}
<body>
<header>...</header>
<div id="content">...</div>
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
<span id="icons">...</span>
</footer>
</body>
This can be done easily with justify-content: space-between;, but looking at your code I feel you may misunderstand a bit how Flexbox itself works. You want your footer to act as a flex container so you can manipulate the child spans as well.
Consider checking out freeCodeCamp's Flexbox Challenges to get a better idea how Flexbox works.
EDIT: CodePen now reflects what OP was meaning to immitate.
Here's a CodePen to play around with.
What this does is makes your footer both a child and container.
First your body becomes a container to allow the main content to grow to fill the space pushing your footer to the bottom of the page. The flex-direction is set to column to flow vertically.
You create a wrapper for your footer, because currently your footer is in the body container which is set to flex-direction:column; where in this case, you want the direction to be row to style horizontally. By default display:flex; will assume you wanted row so direction doesn't need declared. We then justify-content to the center so no matter the width the footer itself will be centered.
You treat your <footer> as both a child and container. As a child we tell it not to grow or shrink and set the basis to auto. As a container, we tell it to distribute space-between its children which allows a consistently equal amount of space between the left & right spans.
body {
display: flex;
height: 100%;
flex-direction: column;
}
.main {
flex: 1 0 auto;
border: 1px solid #000;
}
.wrapper {
display: flex;
justify-content: center;
}
footer {
flex: 0 0 auto;
display: flex;
margin: 1em;
width: 80%;
border: 1px solid #000;
justify-content: space-between;
}
<body>
<div class="main">
<h1>Hello Flex</h1>
<p>This is Flexbox</p>
<h1>Hello Flex</h1>
<p>This is Flexbox</p>
</div>
</body>
<div class="wrapper">
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
</footer>
</div>
I gave up trying to get this to center with flexbox. Instead I used the calc function to calculate the padding-left and padding-right of my <footer> tag. Here is what I came up with (I'm using 47.5rem instead of 67.5rem because I think it's easier to see the behavior).
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
div#content {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
display: flex;
align-items: center;
padding-left: calc(((100vw - 47.5rem)/2) + 1.25rem);
padding-right: calc(((100vw - 47.5rem)/2) + 1.25rem);
padding-bottom: 1.875rem;
padding-top: 3.5rem;
}
#left {
flex: 1;
order: 1;
}
#mid {
flex: 0 0 auto;
order: 2;
}
#icons {
order: 3;
}
<body>
<header>...</header>
<div id="content">...</div>
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
<span id="icons">...</span>
</footer>
</body>
When using flexbox for styling, if the parent container is set to display: flex it will cause the <hr /> to be displayed vertically instead of horizontally.
.container {
display: flex;
flex: 1;
}
<div class='container'>
<h2>Test</h2>
<hr />
</div>
Use flex-grow: 1 or width: 100% so it will grow to match the width of the parent. You probably want to use that in combination with flex-wrap: wrap on .container if you plan on putting more flex children in .container
.container {
display: flex;
flex: 1;
}
hr {
flex-grow: 1;
/* width: 100%; */ /* or this */
}
<div class='container'>
<hr>
</div>
The reason for this is that default value of align-items is stretch so hr will get the same height as largest element in flex-container or in this case h2. And default value for justify-content is flex-start so width of hr is 0.
Easy way to fix this is to use flex-wrap: wrap on parent element and flex: 0 0 100% on hr
.container {
display: flex;
flex-wrap: wrap;
}
hr {
flex: 0 0 100%;
}
<div class='container'>
<h2>Test</h2>
<hr>
</div>
I'm running into an issue using flexbox in IE11. When using flex-direction: column the flex-items overlap:
In other browsers (chrome, safari) it looks like this:
.container {
display: flex;
flex-direction: column;
}
.flex {
flex: 1 1 0%;
}
<div class="container">
<div class="flex">
Hello
</div>
<div class="flex">
World
</div>
</div>
I've made a codepen to demonstrate the issue:
http://codepen.io/csteur/pen/XMgpad
What am I missing to make this layout not overlap in IE11?
It is caused by the 0% in your .flex class. Change it to auto then it should not be a problem:
.flex {
flex: 1 1 auto;
}
Instead of flex: 1 1 0%; use flex: 1 1 auto;
.container {
display: flex;
flex-direction: column;
}
.flex {
flex: 1 1 auto;
}
<div class="container">
<div class="flex">
Hello
</div>
<div class="flex">
World
</div>
</div>
My particular solution to this issue was that I needed to explicitly set the width on the containing element. Since flex is set to column IE11 will automatically expand the width of the container to accommodate the content of the children (remember that the flex boxes are flipped on their sides in column alignment so when they overflow they grow horizontally instead of vertically).
So my code would look like:
.container {
display: flex;
flex-direction: column;
width: 100%; // needs explicit width
}
.flex {
flex: 1 1 auto; // or whatever
}
Note also that flex: 1; compiles to flex : 1 1 0%;, so it's better (for IE users) if you explicitly write flex: 1 1 auto;, as mentioned above.
The first image is way wider than the other two because of the space taken up by the <p></p> element.
How do I ensure that the p wraps at the width of the flex box?
I have a working bootply.
/* CSS used here will be applied after bootstrap.css */
body { background-color: rgba(20,10,10,.4); }
div.container { background-color: white; }
#media (min-width: 1380px) {
div.container {
width: 1400px; } }
div.container section {
display: flex;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-between;
}
div.container section div img {
width:100%;
}
div.container section div p {
width: 100%;
}
div.container section div {
border: 1px solid black;
flex-grow:1;
}
div.container section div+div {
margin-left:4rem;
}
div.container section h1 {
color: #8f825a;
font-size: 2.7rem;
text-transform: none;
}
div.container section h2 {
color: #8f825a;
font-size: 1.8rem;
}
<div class="container">
<h3>H3</h3>
<h2>H2</h2>
<section>
<div>
<img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAKAAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFRDU4MUQyM0ZGQzkxMUU2OEU3Q0ExNzE2NDQzNDYzOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFRDU4MUQyNEZGQzkxMUU2OEU3Q0ExNzE2NDQzNDYzOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVENTgxRDIxRkZDOTExRTY4RTdDQTE3MTY0NDM0NjM4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVENTgxRDIyRkZDOTExRTY4RTdDQTE3MTY0NDM0NjM4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQAFBAQGRIZJxcXJzImHyYyLiYmJiYu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">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>foo dsalkfjds lakfjdlsk fksdalj fldsfjad slkafjdslk fdsajflkds aflkdjsaflkdsjfdslkafjdlks fjlkdsj</p>
</div>
<div>
<img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAKAAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFRDU4MUQyM0ZGQzkxMUU2OEU3Q0ExNzE2NDQzNDYzOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFRDU4MUQyNEZGQzkxMUU2OEU3Q0ExNzE2NDQzNDYzOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVENTgxRDIxRkZDOTExRTY4RTdDQTE3MTY0NDM0NjM4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVENTgxRDIyRkZDOTExRTY4RTdDQTE3MTY0NDM0NjM4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQAFBAQGRIZJxcXJzImHyYyLiYmJiYu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">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</div>
<div>
<img src="">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</div>
</section>
</div>
Instead of flex-grow: 1 use flex: 1:
div.container section div {
flex: 1;
}
revised demo
By using flex-grow: 1 by itself, you're leaving the two other flexibility properties at their default values. Namely, flex-shrink: 1 and flex-basis: auto (content width, in row-direction).
By using the flex property you are defining all three properties: flex: 1 is equivalent to:
flex-grow: 1
flex-shrink: 1
flex-basis: 0 (initial main size 0, not auto)
This allows your flex items to be equal width, regardless of their initial main size.
Other answers here are telling you to add flex-basis: 0 to your code. That effectively does the same thing. The spec recommends you use the flex property, however:
7.2. Components of
Flexibility
Authors are encouraged to control flexibility using the flex shorthand
rather than with its longhand properties directly, as the shorthand
correctly resets any unspecified components to accommodate common
uses.
For a complete explanation of the difference between flex-basis: auto and flex-basis: 0, see this post: Make flex-grow expand items based on their original size
You can add flex-basis: 30%; to div.container section div:
http://www.bootply.com/moTWJ5T9dB
In Your Example just add - flex-basis: 0; to all divs like this:
div.container section div {
border: 1px solid black;
flex-grow: 1;
flex-basis: 0;
}
This results that the divs get flexible, means they receive the specified proportion of the remaining space. E.g. They all have the same width.