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>
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;
}
This question already has answers here:
Keep the middle item centered when side items have different widths
(12 answers)
Closed 3 years ago.
I have a three divs within a flex div. I'm trying to figure out how to prevent the middle div from moving/changing position when the text in the first or last div changes.
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div clas="div1">Text1</div>
<div class="div2">Text2</div>
<div class="div3">Text3</div>
</div>
If Text3 is changed to something different, for example, AnotherText3, note that the center div (Text2) also moves (shifts to the left), I would like Text2 to stay centered and not move.
Text3 could be long in which case it should occupy the space between Text2 and Text3 (while still keeping Text2 in the center) and be truncated when there is no more space left.
Here the link to my jsfiddle.
Try adding this to your code:
.container > div {
width: 33%;
}
Maybe you have to do some other css addings to prevent wrapping of the last div if there are some margins, but this way the content will not expand width of your div.
You can set the flex box's widths to be fixed, don't grow and don't shrink, and use white-space, overflow, and text-overflow properties to truncate the text:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
For example:
.container {
display: flex;
justify-content: space-between;
}
.div1 {
flex-grow: 0; /* flex-grow: 0 means don't grow, 1 means grow*/
flex-shrink: 0; /* flex-shrink: 0 means don't shrink, 1 means shrink */
flex-basis: 300px; /* Width of the flex box stays 300px */
}
.div2 {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 300px;
/* Truncate text */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.div3 {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 300px;
}
This 100% expected. Because width of children is not specified, browser checks the remaining space around them and sets its position. Simplest solution would be adding a width to children elements. Like so:
<div class="container">
<div class="div div1">
Text1
</div>
<div class="div div2">
Text2
</div>
<div class="div div3">
I am a super long text here. I am a super long text here. I am a super long text here. I am a super long text here.
</div>
</div>
.container {
display: flex;
}
.div {
flex-basis: 33.3333%;
}
.div1 {}
.div2 {
text-align: center;
}
.div3 {
text-align: right;
}
You can use CSS Grid on the .container like this to achieve the following layout:
<div class="container">
<div class="left-div">
<div clas="div1"> Text1 </div>
</div>
<div class="div2 center-div"> Text2 </div>
<div class="right-div">
<div clas="div3"> Text4 </div>
</div>
</div>
.container {
display: grid;
grid-template-columns: 2fr 1fr 2fr;
}
.left-div {
display: flex;
justify-content: flex-start;
}
.right-div {
display: flex;
justify-content: flex-end;
}
.center-div {
display: flex;
justify-content: center
}
Working Screenshot:
Two of my go to methods for getting centered content
using position relative:
<div class="container">
<div class="div2"> Text1 </div>
</div>
.div {
position:relative;
Left:50%;
}
using display flex property:
<div class="container">
<div clas="div1"> Text1 </div>
<div class="div2"> Text2 </div>
<div class="div3"> Text3 </div>
</div>
.container {
display: flex;
}
.div1 {
text-align: center;
}
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.
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.
I am trying to stretch the size of an iframe to fill the remaining space within my web app. I know the maximum space is being allocated for the div (by adding a border), but the iframe height itself is not expanding to fill the entire vertical height.
The problem is the row content iframe is not filling the entire vertical space, even though the flexbox is allocating that space appropriately.
Any ideas?
.box {
display: flex;
flex-flow: column;
height: 100vh;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
.row.content iframe {
width: 100%;
border: 0;
}
<div class="box">
<div class="row header">
<h1>Event Details</h1>
<div id="container">
<h5>Test</h5>
</div>
<div data-role="navbar">
<ul>
<li>Players
</li>
<li>Games
</li>
<li>Chat
</li>
</ul>
</div>
</div>
<div class="row content">
<iframe src="players.html"></iframe>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
Here are two things to consider:
When you create a flex container only the child elements become flex items. Any descendants beyond the children are not flex items and flex properties don't apply to them.
Your iframe is not a flex item because it is a child of div class="row content" which is a flex item, but not a flex container. Therefore, no flex properties apply and there is no reason for the iframe to stretch.
To apply flex properties to the children of flex items, you need to make the flex item also a flex container. Try this:
.box .row.content {
flex: 1 1 auto;
display: flex; /* new */
}
With the adjustment above the iframe's parent becomes a (nested) flex container, the iframe becomes a flex item, and default flex settings (including align-items: stretch) go into effect. The iframe should now occupy the full height of the container.
You can fix it with just flexbox, Make sure the container (wrapper) of the iframe has a height set or its parent has, this can be a in pixels percent or VH. and flex-direction:column. The iframe itself needs a flex:1 1 auto; nothing else is needed so no height or width set on it.
Internet explorer can have some problem with the width of the iframe. But it should work vertically. For IE11 make sure you set a min-height:0 on the wrapper.
body{
padding:1em;
display:flex;
flex-direction:column;
align-items:center;
justify-content: center;
height:100vh;
}
.wrap {
display: flex;
flex-direction: column;
width: 80vw;
height: 80vh;
border: 2px solid blue;
min-height: 0;
}
.frame {
flex: 1 1 auto;
border: 0;
}
Simplified jsfidle demo
Complex jsfidle demo