I'm designing a simple webpage using HTML and CSS. I want to design a row at the top of my page which shall have 4 buttons - lets say with content "A", "BB", "CCC", "DDDD". I want to create these 4 buttons such that their width differs according to the length of the content, i.e "A" would be small, but "DDDD" would be a bigger button since it has 4 letters instead of 1.
Can I achieve this using just HTML and CSS or do I need to learn any more technologies for this?
This can be done with HTML alone:
<div class="top-row">
<button>A</button>
<button>BB</button>
<button>CCC</button>
<button>DDDD</button>
</div>
You can absolutely do that with flexbox. For example:
div.header {
position: fixed;
top: 0;
left: 0;
width: 100vw;
display: flex; /* This element is a flexbox */
}
a.button {
background-color: green;
min-width: 50px;
text-align: center;
border: 1px solid white;
}
section {
display: flex; /* This element is a flexbox */
flex-direction: row;
flex-wrap: nowrap;
background: pink;
}
div.column {
border: 1px solid grey;
min-height: 100vh;
}
/* These properties set the column widths within an element that is a flexbox */
.width-1x {
flex-grow: 1;
}
.width-2x {
flex-grow: 2;
}
.width-3x {
flex-grow: 3;
}
.width-4x {
flex-grow: 4;
}
<div class="header">
A
BB
CCC
DDDD
</div>
<section>
<div class="column width-1x"></div>
<div class="column width-2x"></div>
<div class="column width-3x"></div>
<div class="column width-4x"></div>
</section>
By setting the CSS flex-grow property of each button, we can decide what proportion of the width it would take.
Doing this through JavaScript would also work in the case that the columns need to be updated automatically according to their number of characters.
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
I have 2 flexboxes and a flexbox inside one.
I want the text to break into multiple lines if it is bigger than it's parent. For some reason it works if I sent a fixed value (e.g. 250px) as width. If I set the width to 100%, it will not break into multiple lines.
This is the code I have:
#flexparent {
display: flex
}
#flexchild1 {
flex: 1;
background-color: green;
}
#flexchild2 {
flex: 1;
background-color: red;
display: flex;
flex-flow: column
}
#flexchild3 {
background-color: purple;
width: 100%;
word-wrap: break-word;
}
<div id="flexparent">
<div id="flexchild1">
FLEXCHILD1
</div>
<div id="flexchild2">
FLEXCHILD2
<div id="flexchild3">
ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst
</div>
</div>
</div>
This is how I want it but without the spaces in the long sentence.
#flexparent {
display: flex
}
#flexchild1 {
flex: 1;
background-color: green;
}
#flexchild2 {
flex: 1;
background-color: red;
display: flex;
flex-flow: column
}
#flexchild3 {
background-color: purple;
word-wrap: break-word;
}
<div id="flexparent">
<div id="flexchild1">
FLEXCHILD1
</div>
<div id="flexchild2">
FLEXCHILD2
<div id="flexchild3">
Thisisasuperlongsentence Loremipsum dolorsitametcon secteturadipisicingelitAsperi resnecessitatibusneu eodioImpeditistenes ciuntescorru ptiessecumrepudia ndaequidolor umIllumtempori busquoerrorcumqu eeximpeditmagnam Lore mipsumdo lorsitam etconsecteturadipisicing elitAsperioresne cessitatibusneueodi oImpeditisten esciuntescorruptiessecumrepudia ndaequidolorumIll umtemporibusq uoerrorc umqueeximpe ditmagn amtstLoremipsu mdolorsitametcon secteturadipisici ngelitAsperio resnecessitati busn
</div>
</div>
</div>
Here are the codepens I made for this.
The code I have: https://codepen.io/tomzz/pen/mpJMow
How I want it but without the 250px width: https://codepen.io/tomzz/pen/VyLMaW
How I want it but without the spaces in the sentence: https://codepen.io/tomzz/pen/vpOeJp
This is a min-width issue, where a flex item can't be smaller than its content.
The default value of min-width is auto, and in this case it happens to the flex item #flexchild2
Give it min-width: 0 and it will work.
Also, the width: 100% is not needed, since a flex "column" item's align-items default to stretch, and as such automatically take full width of its parent, and can be removed.
Stack snippet
#flexparent {
display: flex
}
#flexchild1 {
flex: 1;
background-color: green;
}
#flexchild2 {
flex: 1;
background-color: red;
display: flex;
flex-flow: column;
min-width: 0; /* added */
}
#flexchild3 {
background-color: purple;
/*width: 100%; removed */
word-wrap: break-word;
}
<div id="flexparent">
<div id="flexchild1">
FLEXCHILD1
</div>
<div id="flexchild2">
FLEXCHILD2
<div id="flexchild3">
ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst
</div>
</div>
</div>
The problem is that percentage-based widths are based off of the immediate parent. If the immediate parent has no width, the child cannot know what 100% of an arbitrary value is. flex: 1 is shorthand that contains flex-grow: 1, meaning that #flex2 can grow infinitly without setting this width constraint.
Percentage-based widths bubble up to the point a fixed width is known, so all you have to do is set a width of 100% of #flexchild2 as well in order for #flexchild3 to inherit the width of #flexparent:
This can be seen in the following:
#flexparent {
display: flex;
}
#flexchild1 {
flex: 1;
background-color: green;
}
#flexchild2 {
flex: 1;
background-color: red;
display: flex;
flex-flow: column;
width: 100%;
}
#flexchild3 {
background-color: purple;
width: 100%;
word-wrap: break-word;
}
<div id="flexparent">
<div id="flexchild1">
FLEXCHILD1
</div>
<div id="flexchild2">
FLEXCHILD2
<div id="flexchild3">
ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst
</div>
</div>
</div>
However, note that due to you using two columns, you'll probably want to give #flexparent a width of 100%, and set your two columns to 20% and 80% respectively. Note that #flexchild3 still inherits 100% of the width of #flexchild2 (which is 80% of the width of #flexparent):
#flexparent {
display: flex;
width: 100%;
}
#flexchild1 {
flex: 1;
background-color: green;
width: 20%;
}
#flexchild2 {
flex: 1;
background-color: red;
display: flex;
flex-flow: column;
width: 80%;
}
#flexchild3 {
background-color: purple;
width: 100%;
word-wrap: break-word;
}
<div id="flexparent">
<div id="flexchild1">
FLEXCHILD1
</div>
<div id="flexchild2">
FLEXCHILD2
<div id="flexchild3">
ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst
</div>
</div>
</div>
Hope this helps! :)
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
I am trying to have one div on the left and two on the right. The bottomright should always be below the topRight div. The topRight is the only div with a variable height.
I am currently trying to achieve this using flexbox als you can see in my code below.
I would like to have some directions.
.wrapper {
display: flex;
height: 100px;
}
.left {
background-color: green
}
.topRight {
background-color: yellow
}
.bottomright {
background-color: red
}
<div class="wrapper">
<div class="left">Left</div>
<div class="topRight">TopRight</div>
<div class="bottomright">Bottom</div>
</div
With a fixed height on the container, as you have in your code, you can use flex-direction: column and flex-wrap: wrap. The fixed height serves as a break point, telling flex items where to wrap.
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100px;
}
.left {
flex: 0 0 100%; /* consumes full height of first column; forces siblings to wrap */
background-color: lightgreen
}
/* variable height div */
.topRight {
background-color: yellow
}
.bottomright {
flex: 1; /* consumes remaining space in column */
background-color: red
}
<div class="wrapper">
<div class="left">Left</div>
<div class="topRight">TopRight<br>variable height</div>
<div class="bottomright">Bottom</div>
</div>
On html put a div with a class called right wrapping both topRight and bottomRight and use this css on css:
.wrapper {
display: flex;
height: 100px;
}
.right {
display: flex-flow;
}
.left {
background-color: green
}
.topRight {
background-color: yellow;
height: 50px;
}
.bottomright {
background-color: red;
height: 50px;
}
I hope that helps you :)
For infos
display:grid is made for this .... very soon available for most browsers and yet for a few
A tutorial among others : https://css-tricks.com/snippets/css/complete-guide-grid/
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* any height s */
background-color: green;
}
.leftspan {
grid-row: span 2;/* if 2 rows avalaible */
}
.topRight {
background-color: yellow;
grid-column: 2 /-1
}
.bottomright {
background-color: red;
grid-column: 2 /-1
}
.bottomfull {
background-color: red;
grid-column: 1 /-1
}
<div class="wrapper">
<div class="leftspan">Left spanning 2 rows</div>
<div class="topRight">Top <br/>Right</div>
<div class="bottomright">Bottom <br/>Right</div>
</div>
<p> or did you mean ?
<div class="wrapper">
<div class="left">Left</div>
<div class="topRight">Top Right</div>
<div class="bottomfull">Bottom <br/>Right</div>
</div>
render if your browsers understand grid:
I'm trying to create a header with some items in a flex-box.
One of these items is a div "box" with flex-grow:1 to fill the remaining space of the line.
The div "box" has overflow-x: auto to create a horizontal scroll if necessary.
The problem is that if I do not set a max-width, the scroll of the div "box" does not appears and some items of the container go out of the container bounds...
I want to use all the remaining space used by the flex-grow:1. How can I solve this?
JSFiddle
.container {
display: flex;
width: 400px;
background-color: #fff;
}
.container > div {
flex-shrink: 0;
}
.box {
flex-grow: 1;
border: 1px solid #ff0000;
display: flex;
overflow-x: auto;
//max-width: 180px;
}
.scroll-box {
overflow-x: auto;
// max-width: 180px;
display: flex;
}
.box > div {
flex-shrink: 0;
width: 80px;
border: 1px solid black;
margin: 2px;
padding: 2px;
}
<div class="container">
<div>element1</div>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div>element 2</div>
<div>element 3</div>
</div>
Instead of flex-grow: 1 use flex: 1.
When you use flex-grow you set that particular property. But the other flexibility properties remain their default values. Namely, flex-shrink: 0 and flex-basis: auto.
With flex: 1, you're switching to:
flex-grow: 1
flex-shrink: 1
flex-basis: 0
So, the box is now allowed to shrink. But, more importantly, instead of the width of the box being auto (content-driven) it starts from 0. This is what enables the scroll function.
Imagine the following layout, where the dots represent the space between the boxes:
[Left box]......[Center box]......[Right box]
When I remove the right box, I like the center box to still be in the center, like so:
[Left box]......[Center box].................
The same goes for if I would remove the left box.
................[Center box].................
Now when the content within the center box gets longer, it will take up as much available space as needed while remaining centered. The left and right box will never shrink and thus when where is no space left the overflow:hidden and text-overflow: ellipsis will come in effect to break the content;
[Left box][Center boxxxxxxxxxxxxx][Right box]
All the above is my ideal situation, but I have no idea how to accomplish this effect. Because when I create a flex structure like so:
.parent {
display : flex; // flex box
justify-content : space-between; // horizontal alignment
align-content : center; // vertical alignment
}
If the left and right box would be exactly the same size, I get the desired effect. However when one of the two is from a different size the centered box is not truly centered anymore.
Is there anyone that can help me?
Update
A justify-self would be nice, this would be ideal:
.leftBox {
justify-self : flex-start;
}
.rightBox {
justify-self : flex-end;
}
If the left and right boxes would be exactly the same size, I get the desired effect. However when one of the two is a different size the centered box is not truly centered anymore. Is there anyone that can help me?
Here's a method using flexbox to center the middle item, regardless of the width of siblings.
Key features:
pure CSS
no absolute positioning
no JS/jQuery
Use nested flex containers and auto margins:
.container {
display: flex;
}
.box {
flex: 1;
display: flex;
justify-content: center;
}
.box:first-child > span { margin-right: auto; }
.box:last-child > span { margin-left: auto; }
/* non-essential */
.box {
align-items: center;
border: 1px solid #ccc;
background-color: lightgreen;
height: 40px;
}
p {
text-align: center;
margin: 5px 0 0 0;
}
<div class="container">
<div class="box"><span>short text</span></div>
<div class="box"><span>centered text</span></div>
<div class="box"><span>loooooooooooooooong text</span></div>
</div>
<p>↑<br>true center</p>
Here's how it works:
The top-level div (.container) is a flex container.
Each child div (.box) is now a flex item.
Each .box item is given flex: 1 in order to distribute container space equally (more details).
Now the items are consuming all space in the row and are equal width.
Make each item a (nested) flex container and add justify-content: center.
Now each span element is a centered flex item.
Use flex auto margins to shift the outer spans left and right.
You could also forgo justify-content and use auto margins exclusively.
But justify-content can work here because auto margins always have priority.
8.1. Aligning with auto
margins
Prior to alignment via justify-content and align-self, any
positive free space is distributed to auto margins in that dimension.
Use three flex items in the container
Set flex: 1 to the first and last ones. This makes them grow equally to fill the available space left by the middle one.
Thus, the middle one will tend to be centered.
However, if the first or last item has a wide content, that flex item will also grow due to the new min-width: auto initial value.
Note Chrome doesn't seem to implement this properly. However, you can set min-width to -webkit-max-content or -webkit-min-content and it will work too.
Only in that case the middle element will be pushed out of the center.
.outer-wrapper {
display: flex;
}
.item {
background: lime;
margin: 5px;
}
.left.inner-wrapper, .right.inner-wrapper {
flex: 1;
display: flex;
min-width: -webkit-min-content; /* Workaround to Chrome bug */
}
.right.inner-wrapper {
justify-content: flex-end;
}
.animate {
animation: anim 5s infinite alternate;
}
#keyframes anim {
from { min-width: 0 }
to { min-width: 100vw; }
}
<div class="outer-wrapper">
<div class="left inner-wrapper">
<div class="item animate">Left</div>
</div>
<div class="center inner-wrapper">
<div class="item">Center</div>
</div>
<div class="right inner-wrapper">
<div class="item">Right</div>
</div>
</div>
<!-- Analogous to above --> <div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item animate">Center</div></div><div class="right inner-wrapper"><div class="item">Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item">Center</div></div><div class="right inner-wrapper"><div class="item animate">Right</div></div></div>
The key is to use flex-basis. Then the solution is simple as:
.parent {
display: flex;
justify-content: space-between;
}
.left, .right {
flex-grow: 1;
flex-basis: 0;
}
CodePen is available here.
Here's an answer that uses grid instead of flexbox. This solution doesn't require extra grandchild elements in the HTML like the accepted answer does. And it works correctly even when the content on one side gets long enough to overflow into the center, unlike the grid answer from 2019.
The one thing this solution doesn't do is show an ellipsis or hide the extra content in the center box, as described in the question.
section {
display: grid;
grid-template-columns: 1fr auto 1fr;
}
section > *:last-child {
white-space: nowrap;
text-align: right;
}
/* not essential; just for demo purposes */
section {
background-color: #eee;
font-family: helvetica, arial;
font-size: 10pt;
padding: 4px;
}
section > * {
border: 1px solid #bbb;
padding: 2px;
}
<section>
<div>left</div>
<div>center</div>
<div>right side is longer</div>
</section>
<section>
<div>left</div>
<div>center</div>
<div>right side is much, much longer</div>
</section>
<section>
<div>left</div>
<div>center</div>
<div>right side is much, much longer, super long in fact</div>
</section>
Instead of defaulting to using flexbox, using grid solves it in 2 lines of CSS without additional markup inside the top level children.
HTML:
<header class="header">
<div class="left">variable content</div>
<div class="middle">variable content</div>
<div class="right">variable content which happens to be very long</div>
</header>
CSS:
.header {
display: grid;
grid-template-columns: [first] 20% auto [last] 20%;
}
.middle {
/* use either */
margin: 0 auto;
/* or */
text-align: center;
}
Flexbox rocks but shouldn't be the answer for everything. In this case grid is clearly the cleanest option.
Even made a codepen for your testing pleasure:
https://codepen.io/anon/pen/mooQOV
You can do this like so:
.bar {
display: flex;
background: #B0BEC5;
}
.l {
width: 50%;
flex-shrink: 1;
display: flex;
}
.l-content {
background: #9C27B0;
}
.m {
flex-shrink: 0;
}
.m-content {
text-align: center;
background: #2196F3;
}
.r {
width: 50%;
flex-shrink: 1;
display: flex;
flex-direction: row-reverse;
}
.r-content {
background: #E91E63;
}
<div class="bar">
<div class="l">
<div class="l-content">This is really long content. More content. So much content.</div>
</div>
<div class="m">
<div class="m-content">This will always be in the center.</div>
</div>
<div class="r">
<div class="r-content">This is short.</div>
</div>
</div>
Here is another way to do it, using display: flex in the parents and childs:
.Layout{
display: flex;
justify-content: center;
}
.Left{
display: flex;
justify-content: flex-start;
width: 100%;
}
.Right{
display: flex;
justify-content: flex-end;
width: 100%;
}
<div class = 'Layout'>
<div class = 'Left'>I'm on the left</div>
<div class = 'Mid'>Centered</div>
<div class = 'Right'>I'm on the right</div>
</div>
A slightly more robust grid solution looks like this:
.container {
overflow: hidden;
border-radius: 2px;
padding: 4px;
background: orange;
display: grid;
grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
}
.item > div {
display: inline-block;
padding: 6px;
border-radius: 2px;
background: teal;
}
.item:last-child > div {
float: right;
}
<div class="container">
<div class="item"><div contenteditable>edit the text to test the layout</div></div>
<div class="item"><div contenteditable>just click me and</div></div>
<div class="item"><div contenteditable>edit</div></div>
</div>
And here you can see it in Codepen: https://codepen.io/benshope2234/pen/qBmZJWN
I wanted the exact result shown in the question, I combined answers from gamliela and Erik Martín Jordán and it works best for me.
.parent {
display: flex;
justify-content: space-between;
}
.left, .right {
flex-grow: 1;
flex-basis: 0;
}
.right {
display: flex;
justify-content: flex-end;
}
you can also use this simple way to reach exact center alignment for middle element :
.container {
display: flex;
justify-content: space-between;
}
.container .sibling {
display: flex;
align-items: center;
height: 50px;
background-color: gray;
}
.container .sibling:first-child {
width: 50%;
display: flex;
justify-content: space-between;
}
.container .sibling:last-child {
justify-content: flex-end;
width: 50%;
box-sizing: border-box;
padding-left: 100px; /* .center's width divided by 2 */
}
.container .sibling:last-child .content {
text-align: right;
}
.container .sibling .center {
height: 100%;
width: 200px;
background-color: lightgreen;
transform: translateX(50%);
}
codepen: https://codepen.io/ErAz7/pen/mdeBKLG
Althought I might be late on this one, all those solutions seems complicated and may not work depending on the cases you're facing.
Very simply, just wrap the component you want to center with position : absolute, while letting the other two with justify-content : space-between, like so :
CSS:
.container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: lightgray;
}
.middle {
position: absolute;
margin-left: auto;
margin-right: auto;
/* You should adapt percentages here if you have a background ; else, left: 0 and right: 0 should do the trick */
left: 40%;
right: 40%;
text-align: center;
}
/* non-essential, copied from #Brian Morearty answer */
.element {
border: 1px solid #ccc;
background-color: lightgreen;
}
p {
margin: 5px;
padding: 5px;
}
<div class="container">
<p class="element">First block</p>
<p class="middle element">Middle block</p>
<p class="element">Third THICC blockkkkkkkkk</p>
</div>
Michael Benjamin has a decent answer but there is no reason it can't / shouldn't be simplified further:
.container {
display: flex;
}
.box {
flex: 1;
display: flex;
justify-content: center;
}
.box:first-child { justify-content: left; }
.box:last-child { justify-content: right; }
And html
<div class="container">
<div class="box">short text</div>
<div class="box">centered tex</div>
<div class="box">loooooooooooooooong text</div>
</div>