flex grow not working as described
You need to add flex-grow:1;
to .d1 . Because flex-grow determines how the remaining space is divided between flex-items and how much each item receives.
So if you don't set flex-grow for some items, they won't get that space, and you won't get elements' widths as you expect.
.d1{
flex-grow: 1;
}
.parent {
display: flex;
border: 1px solid rgba(0, 0, 0, .5);
height: 300px;
width: 300px;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.parent div {
width: 50px;
height: 50px;
background-color: blue;
margin: 1px;
color: white;
text-align: center;
line-height: 50px;
}
.d1 {
flex-grow: 1;
}
.d2 {
flex-grow: 3;
}
<div class="parent">
<div class="d1">1</div>
<div class="d2">2</div>
</div>
flex-grow not sizing flex items as expected
Short Analysis
The problem is that rows 1-3 have two horizontal margins and row 4 only has one.
With horizontal margins at 10px each, row 4 has 10px more free space than the other rows. This throws off the alignment of the columns.
Because flex-grow
applies only to free space, and is heavily influenced by content and margins, it's not the most secure way to size flex items.
Try flex-basis
instead. Add this to your code:
.button { flex-basis: 33.33%; }
#number0 { flex-basis: calc(66.67% + 10px); }
* { box-sizing: border-box; }
.numbers {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: space-between;
}
.button {
display: flex;
flex-basis: 33.33%;
justify-content: center;
align-items: center;
margin: 5px;
border-radius: 5px;
border: 1px solid gray;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
#number0 { flex-basis: calc(66.67% + 10px); }
* { box-sizing: border-box; }
<div class="numbers">
<div class="row">
<div class="button number" id="number1">1</div>
<div class="button number" id="number2">2</div>
<div class="button number" id="number3">3</div>
</div>
<div class="row">
<div class="button number" id="number4">4</div>
<div class="button number" id="number5">5</div>
<div class="button number" id="number6">6</div>
</div>
<div class="row">
<div class="button number" id="number7">7</div>
<div class="button number" id="number8">8</div>
<div class="button number" id="number9">9</div>
</div>
<div class="row">
<div class="button number" id="number0">0</div>
<div class="button" id="colon">:</div>
</div>
</div>
Flex-shrink not working as expected
flex-shrink
is designed to distribute negative free space in the container.
In other words, it only works when flex items are big enough to overflow the container.
You're not having that problem here. There is no negative space. Therefore, I don't believe flex-shrink
is having any effect on your layout.
flex-grow
is consuming the positive free space and seems to be working fine.
You would need to set a flex-basis
or add content to the items to put flex-shrink
in play.
https://www.w3.org/TR/css-flexbox-1/#flex-property
Flex-direction column not working as expected
You should look into "flex-grow" which allows flex items to grow if necessary in order to take up as much space as is available in its container. If all flex-items (in your case: .logo, .search, .button) have a flex-grow value of 1, the remaining space in .container will be distributed to its children equally.
Also, you should use
flex-direction: row;
in your case if you want them to stretch horizontally
Check out this fiddle for reference! https://jsfiddle.net/hgs5w19y/2/
Do I not understand the flex-grow property?
You have to specify a value for flex-basis
as well (not specifying this property causes behaviour similar to using the initial value, auto).
Add flex-basis: 0;
to both children or just set it with the shorthand:
.flex-item {
flex: 1; /* flex-basis is 0 if omitted */
}
.big {
flex-grow: 3;
}
http://codepen.io/anon/pen/JEcBa
flex vs flex-grow producing different results
When you set only flex-grow
, the flex-basis
property remains unaffected. It still defaults to flex-basis: auto
.
When you use the flex
property, flex-basis
gets reset to 0.
So flex: 0
is shorthand for flex-grow: 0
and flex-basis: 0
. This means 0 width.
With flex-grow: 0
you still have flex-basis: auto
.
To understand the difference between flex-basis: 0
and flex-basis: auto
, see this post:
- Make flex-grow expand items based on their original size
flexbox form not filling up full width of available space
Ok I figured it out you do it on the child
.form-container {
background-color: red;
}
.search-form {
display: flex;
align-items: flex-start;
}
.sesrch-form label {
flex-grow: 1;
}
<div class="form-container">
<form role="search" method="get" class="search-form" action="/">
<label>
<span class="screen-reader-text">Test form</span>
<input type="search" class="search-field" placeholder="field" value="search" name="s" title="search input" />
</label>
<input type="submit" class="search-submit button" value="search" />
</form>
</div>
Flexbox: growing div with flex-basis: 0px expands too far when there's lots of content inside it
First of all, you can remove the flex
property and you will still get the same result. I am also removing the properties that won't affect the result as well:
<div style="display: flex; background-color: blue; width: 500px;">
<p style="width: 50px; background-color: cyan; flex-shrink: 0">
Yo
</p>
<div style="display: flex; background-color: green; ">
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
<p style="flex-shrink: 0">This is some text</p>
</div>
</div>
<!-- magenta 500px indicator here added for comparison of width -->
<div style="width: 500px; height: 5px; background-color: magenta; margin-bottom: 10px"></div>
Can I shrink flexbox items into same size when flex items are bigger than the flex container?
I would use display: grid
instead of display: flex
to achieve this. Here is an example:
.flex-container {
font-size: 12px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, minmax(minmax(0, auto), 50%));
width: 200px;
height: 500px;
border: 1px solid #dadfe3;
}
.flex-item {
min-height: 0;
overflow: auto;
margin: 0 20px;
}
.flex-item div {
margin: 4px 0;
background-color: #f0f9ff;
color: #2f88ff;
}
<body>
<div class="flex-container">
<div class="flex-item">
<input type="text" placeholder="filter 1">
<div>item content 1</div>
<div>item content 2</div>
<div>item content 3</div>
<div>item content 4</div>
<div>item content 5</div>
<div>item content 6</div>
</div>
<div class="flex-item">
<input type="text" placeholder="filter 2">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
<div>item 6</div>
<div>item 7</div>
<div>item 8</div>
<div>item 9</div>
<div>item 10</div>
<div>item 11</div>
<div>item 12</div>
<div>item 13</div>
<div>item 14</div>
<div>item 15</div>
</div>
</div>
</body>
Related Topics
Why Doesn't This CSS Transition Work on Svg Inside an Anchor
How to Make a Link Inside a Div Fill the Entire Space Inside the Div
Hide All Elements Except One Div for Print View
-Ms-Filter VS Filter What's the Difference
CSS Hell Simulating Table with Div
Create a Radial Gradient for Internet Explorer 6/7/8
Bootstrap: Center Some Navbar Items
Multi-Column Issue with Horizontal Scroll
Google Chrome, Flash and Z-Index Wrong Behaviour
Use Variable Defined in Config.Rb in SCSS Files
How to Add a Company Logo to Shinydashboard Header (Not Mainpanel or Mainheader)
Make Input Value Uppercase in CSS Without Affecting the Placeholder
Font-Weight Is Not Working Properly
How to Set Keyframes Name in Less
How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width