I'm trying to retain the first 2 child elements on the same row while the third element is in its own below at full width, all while using flex.
I'm particularly interested in using the flex-grow and flex-shrink properties on the first 2 elements (which is one of my reasons for not using percentages) however the third element really must be full width and below the first two.
The label element is added programmatically after the text element when there's an error and I can't change the code.
How do I force the label element to span a 100% width below the other two elements which are positioned using flex?
.parent {
display: flex;
align-items: center;
width: 100%;
background-color: #ececec;
}
.parent * {
width: 100%;
}
.parent #text {
min-width: 75px;
flex-shrink: 2.25;
}
<div class="parent">
<input type="range" id="range">
<input type="text" id="text">
<label class="error">Error message</label>
</div>
When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100%, and enable wrap on the container.
The item now consumes all available space. Siblings are forced on to other rows.
.parent {
display: flex;
flex-wrap: wrap;
}
#range, #text {
flex: 1;
}
.error {
flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
border: 1px dashed black;
}
<div class="parent">
<input type="range" id="range">
<input type="text" id="text">
<label class="error">Error message (takes full width)</label>
</div>
More info: The initial value of the flex-wrap property is nowrap, which means that all items will line up in a row. MDN
Depends if it's
Flex-direction:row (it's by default row) / on parent container
Try using justify-self: stretch / on the child that you want full width
Flex-direction-column / on a parent container
-Try using align-self: stretch / on the child that you want full width
Hopefully will help someone in some situations, usually helps me
Related
I am trying to get 2 divs that do not have a common parent div to be the height of the larger div. (using display: flex).
As shown in the above code, I would like <child-div1> and <child-div2> to have the same height. Currently, I have display: flex on the <parent-div> which successfully makes <middle-div1> and <middle-div2> to have the same height. However, I can't seem to figure out how to ensure that <child-div1> and <child-div2> have the same height.
<parent-div style="display: flex">
<middle-div1>
<child-div1></child-div1>
</middle-div1>
<middle-div2>
<child-div2></child-div2>
</middle-div2>
</parent-div>
In order to figure it out you could right click in the page, then select inspect element, and you going to see a window like this:
by clicking the most left icon and hovering over the two divs, you are going to see the exact width x height
Add display: flex to the <middle-div> flex items.
This will automatically apply align-items: stretch to the <child-div> children. (Just note that a height rule will override align-items: stretch.)
With that layout, you can set both children to have height: inherit; it's inheriting the height from the tallest part of the container. So for example, if you have an image on one side that is 400 px tall, that stretches the container, therefore, allowing the other child to grow in height also.
.container {
display: flex;
}
.one, .two {
height: inherit;
width: 50%;
}
.one {
background-color: lightblue;
}
.two {
background-color: darkgreen;
color: white;
}
<div class="container">
<div class="one">1<br><img src="https://dummyimage.com/400x400/000/fff&text=test"></div>
<div class="two">2</div>
</div>
One solution is to add height:100%; to child-div1 and child-div2
<parent-div style = "display: flex">
<middle-div1>
<child-div1 style="height: 100%;"></child-div1>
</middle-div1>
<middle-div2>
<child-div2 style="height: 100%;"></child-div2>
</middle-div2>
</parent-div>
Question
Can you produce such layout with CSS?
I want to have a single row with 2 children:
Child A has multiple rows,
Child B has a single one.
I want the the layout in which:
Child A accomodates on a single line as many children as possible for A and B to still fit on a single line.
Child A has the smallest width possible to achieve #1.
Child B then takes all the remaining space.
My HTML:
<div class="Container">
<div class="ChildA">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="ChildB">
<button>
Click me please
</button>
</div>
</div>
My desired layout:
Sketch of a solution using Flexbox
So far I came up with the following CSS using Flexbox:
.Container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
border: 4px solid black;
}
.ChildA {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: 4px solid red;
}
.ChildB {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
border: 4px solid blue;
}
It produces layout pictured below. The problem is it violates rule #2 - child A does not have the smallest width possible, but instead takes all the remaining space, which I want to be taken by child B instead.
CSS Grid?
It seems the solution may be possible using CSS Grid (and it's auto-fit value), but I haven't been able to produce a fully working one myself yet. The closes I've come is that pen, which works fine on some window widths, but I cannot work out how to remove max-width: 50vw constraint.
Note
I want a fully dynamic/flexible solution, which would work with content of any size in the containers.
Children content in my example are inputs and button, but that's just a random example - they can be <div>s or any other elements, if it makes the layout easier to implement.
Fiddle
https://codepen.io/anon/pen/mjdmXG?editors=1100
This question already has answers here:
One flex/grid item sets the size limit for siblings
(6 answers)
Closed 5 years ago.
With flexbox, the childs by default resize according to the widest element.
Is there some way to define that a particular child will control the width, even if it's smaller? With selectors maybe?
Codepen: https://codepen.io/dsomekh/pen/rwEYYE
Code:
.center {
display: flex;
align-items: center;
justify-content: center;
}
.first {
border: 1px solid red;
margin-bottom: 0.5vw;
}
.second {
border: 1px solid red;
}
.wrapper {
font-family: Calibri;
display: flex;
flex-direction: column;
}
<html>
<div class="center">
<div class="wrapper">
<div class="first">This DIV is bigger. However, can it shrink according to it's brother?</div>
<div class="second">This div is smaller.Can it control the width?</div>
</div>
</div>
</html>
Here's the important CSS rule to know:
flex: {number} {number} {number};
The third number is the default size of a flex-item (width, if the flex item is in a row). By default it is auto meaning a flex-item's default size is dictated by it's content.
The first and second numbers are proportionally how much it can grow or shrink by, respectively, compared to other flex items if there is room along the main axis (again, width if this flex item is in a row).
So, you cannot set the default size of a flex-item to be relative to a sibling's intrinsic size - i.e. that which is dictated by it's content - but you can set the default size of a flex-item (and it's sibling items) to all be the same and let them grow or shrink.
I find myself often doing the following:
flex: 1 0 0
on flex items which cause siblings to all be the same size.
All flex-items start out with a default size of 0 and they all grow equally - as given by the first number being the same for all flex items (here it's a one, but it could be any positive number as long as it's the same for every sibling) - as they need to.
Best flexbox learning around is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
EDIT
If you knew, in advance, which item was going to be intrinsically bigger, you could probably do it by setting that item to flex: 0 0 auto and letting all other flex-item's grow from flex: 1 0 0, but I have a feeling you don't know in advance which one is bigger.
.wrapper { display: flex; }
.wrapper>div { border: 1px solid #000; }
.first { flex: 1 0 0; }
.second { flex: 0 1 auto; }
<div class="center">
<div class="wrapper">
<div class="first">This DIV is bigger. However, can it shrink according to it's brother?</div>
<div class="second">This div is smaller.Can it control the width?</div>
</div>
</div>
I'm using flex for layout purposes, but the browser does not spread the width equally between items.
.parent {
display: flex;
width: 200px;
}
.btn1 {
flex: 1 1 auto;
}
<div class="parent">
<div class="btn1">
<button align="left" style="width:100%">Ok</button>
</div>
<button align="left" class="btn1">Cancel</button>
<div>
Now, I want the buttons to split the container length 50% / 50%.
But that's not what's happening. I tried using flex: 1 1 auto and flex: 1 1 0 but with no success.
I know that I can use the OK button directly and it will solve my problem, but in my particular scenario it's important to wrap it with a div.
Now, as I understand it, flex should be able to spread the width equally and that's my goal here.
One more thing though, I noticed that the button content seems to have an effect on the width and I want to ignore this effect somehow.
Thanks!
JSFiddle example:
https://jsfiddle.net/edismutko/cvytLkyp/3/
flex-basis: auto vs flex-basis: 0
You're sizing your flex items with flex: 1 1 auto.
However, if you want to distribute space evenly among items, you need to use flex: 1 1 0.
The difference is the flex-basis component.
With flex-basis: 0, every item is considered to have a zero width and flex-grow distributes container space equally among them. This results in all items having the same length.
With flex-basis: auto, the size of the item is factored into the flex-grow calculation and container space is distributed proportionally among items.
So when you want equal length items use flex: 1 1 0, which is the same as flex: 1.
Here's a more detailed explanation: Make flex-grow expand items based on their original size
Default rules on button elements
Browsers apply styles to elements by default. For instance, Chrome adds padding and border widths to button elements.
Reset those defaults.
Now you have two equal width flex items. (Additional styling is up to you.)
.parent {
display: flex;
width: 200px;
}
.btn1 {
flex: 1;
}
button {
padding: 1px 0;
border-left-width: 0;
border-right-width: 0;
}
<div class="parent">
<div class="btn1">
<button align="left" style="width:100%">Ok</button>
</div>
<button align="left" class="btn1">Cancel</button>
<div>
box-sizing: border-box
Something else to consider is including the padding and border lengths in the width / flex-basis calculation. Why are borders causing div to overflow container?
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 5 years ago.
As you can see in the code below, the left div inside the flex container stretches to meet the height of the right div. Is there an attribute I can set to make its height the minimum required for holding its content (like usual height: auto divs outside flex containers)?
#a {
display: flex;
}
#a > div {
background-color: red;
padding: 5px;
margin: 2px;
}
#b {
height: auto;
}
<div id="a">
<div id="b">left</div>
<div>right<br>right<br>right<br>right<br>right<br></div>
</div>
The align-items, or respectively align-content attribute controls this behaviour.
align-items defines the items' positioning perpendicularly to flex-direction.
The default flex-direction is row, therfore vertical placement can be controlled with align-items.
There is also the align-self attribute to control the alignment on a per item basis.
#a {
display:flex;
align-items:flex-start;
align-content:flex-start;
}
#a > div {
background-color:red;
padding:5px;
margin:2px;
}
#a > #c {
align-self:stretch;
}
<div id="a">
<div id="b">left</div>
<div id="c">middle</div>
<div>right<br>right<br>right<br>right<br>right<br></div>
</div>
css-tricks has an excellent article on the topic. I recommend reading it a couple of times.
When you create a flex container various default flex rules come into play.
Two of these default rules are flex-direction: row and align-items: stretch. This means that flex items will automatically align in a single row, and each item will fill the height of the container.
If you don't want flex items to stretch – i.e., like you wrote:
make its height the minimum required for holding its content
... then simply override the default with align-items: flex-start.
#a {
display: flex;
align-items: flex-start; /* NEW */
}
#a > div {
background-color: red;
padding: 5px;
margin: 2px;
}
#b {
height: auto;
}
<div id="a">
<div id="b">left</div>
<div>
right<br>right<br>right<br>right<br>right<br>
</div>
</div>
Here's an illustration from the flexbox spec that highlights the five values for align-items and how they position flex items within the container. As mentioned before, stretch is the default value.
Source: W3C