I have the following code in react:
.alignHorizontally {
display: flex;
}
.firstTitle {
align-items: center;
display: flex;
margin-top: 16px;
word-spacing: 2px;
line-height: 1;
}
.secondTitle {
margin-left: 80px;
display: flex;
margin-top: 16px;
word-spacing: 2px;
line-height: 1;
}
/* added by editor for demonstration purpose */
.alignHorizontally > * {
box-sizing: border-box;
}
.firstTitle {
border: 2px dashed red;
}
.secondTitle {
border: 2px dashed blue;
}
<div class="alignHorizontally">
<div class="firstTitle">Title
</div>
<div class="secondTitle">
Second title
</div>
</div>
I want the first div(firstTitle) to be on the far left hand side and the second div (secondTitle) to be about 2/3rds of the way through the screen. I know I can force this by adding padding-left: 100px but it feels ugly. Is there a nice way of doing this?
You can also use justify-content: space-between in your alignHorizontally class or try any of the other justify-content parameters that most closely match the layout you want.
.alignHorizontally {
display: flex;
justify-content: space-between;
}
.firstTitle {
align-items: center;
display: flex;
margin-top: 16px;
word-spacing: 2px;
line-height: 1;
}
.secondTitle {
margin-left: 80px;
display: flex;
margin-top: 16px;
word-spacing: 2px;
line-height: 1;
}
/* added by editor for demonstration purpose */
.alignHorizontally > * {
box-sizing: border-box;
}
.firstTitle {
border: 2px dashed red;
}
.secondTitle {
border: 2px dashed blue;
}
<div class="alignHorizontally">
<div class="firstTitle">Title
</div>
<div class="secondTitle">
Second title
</div>
</div>
It's not in English but it was the best tutorial I've seen so far about aligning items with CSS grid.
Alura's example justify-content CSS grid
https://www.alura.com.br/artigos/css-guia-do-flexbox
Add .secondTitle { width: 33%; } to occupy 1/3 of the space which means it will occupy 1/3 of the space.
with margin-left: auto you can push it then to the right to occupy that 1/3 at the right space.
Alternativly you could give the first div a width of 66% directly.
/* original CSS */
.alignHorizontally {
display: flex;
}
.firstTitle {
align-items: center;
display: flex;
margin-top: 16px;
word-spacing: 2px;
line-height: 1;
}
.secondTitle {
margin-left: 80px;
display: flex;
margin-top: 16px;
word-spacing: 2px;
line-height: 1;
}
/* CSS Chanegs !!! */
.secondTitle {
width: 33%;
margin-left: auto;
}
/* added by editor for demonstration purpose */
.alignHorizontally > * {
box-sizing: border-box;
}
.firstTitle {
border: 2px dashed red;
}
.secondTitle {
border: 2px dashed blue;
}
<div class="alignHorizontally">
<div class="firstTitle">Title
</div>
<div class="secondTitle">
Second title
</div>
</div>
.grid-container {
display: grid;
grid-template-columns: auto auto auto; // setting three columns in our grid layout
}
.grid-item2 {
grid-column-start: 3; // setting second div to start and end in 3d column
grid-column-end: 3;
}
<div class="grid-container">
<div class="grid-item1">Title #1</div>
<div class="grid-item2">Title #2</div>
</div>
Related
I have two inputs on form in one row. First one should be stretching on form resize, second is of fixed width. But when form is narrowed to a particular breakpont, second input should wrap to second line and stretch as well as first one.
Is it possible to achieve using CSS?
Tried using grid, but it won't wrap at all.
When using flexbox the result is better, but still have to set flex-grow for second input and it's width is not fixed, while inputs are in one row
.box {
background: grey;
padding: 20px 20px 20px 20px;
}
.wrapper {
display: grid;
grid-column-gap: 6px;
grid-row-gap: 6px;
grid-template-columns: minmax(320px, 1fr) 200px;
}
.flexWrapper {
display: flex;
flex-wrap: wrap;
}
.flex1 {
flex-basis: 320px;
flex-grow: 10;
flex-shrink: 0;
}
.flex2 {
flex-basis: 200px;
flex-shrink: 0;
flex-grow: 1;
}
<div class="wrapper">
<div class="box">One</div>
<div class="box">Two</div>
</div>
<div class="flexWrapper">
<div class="flex1 box">One</div>
<div class="flex2 box">Two</div>
</div>
https://codepen.io/C4off/pen/WNKjJaK
The easiest way to do this is to use a media query. At 600px I've reset the wrapper to be display: block with the children at 100% width which forces them to stack on top of each other. I've set the width of flex2 to 200px to fix it at that.
.box {
background: grey;
padding: 20px 20px 20px 20px;
}
.flexWrapper {
display: flex;
padding-top: 12px;
column-gap: 6px;
row-gap:6px;
}
.flex1 {
flex: 1;
}
.flex2 {
width: 200px;
}
#media only screen and (max-width: 600px) {
.flexWrapper {
display: block;
}
.flex1, .flex2 {
width: 100%;
}
}
<div class="container">
<div class="flexWrapper">
<div class="flex1 box">One</div>
<div class="flex2 box">Two</div>
</div>
</div>
Using flexbox only and the min-width proprty. Note .flex2 will overflow at container widths less than 200px
.container {
width: 60%;
outline: 1px solid red;
}
.box {
background: grey;
padding: 20px 20px 20px 20px;
}
.flex-wrapper {
display: flex;
padding-top: 12px;
column-gap: 6px;
row-gap:6px;
flex-wrap: wrap;
}
.flex1 {
flex: 2 0;
}
.flex2 {
min-width: 200px;
flex-grow: 1;
}
<div class="container">
<div class="flex-wrapper">
<div class="flex1 box">One</div>
<div class="flex2 box">Two</div>
</div>
</div>
The final way this can be done is using container queries which are quite well supported now. The max size is applied to the container and not the screen as the example below
* {
box-sizing:border-box;
}
.container {
container-type: inline-size;
container-name: my-container;
width: 60%;
}
.box {
background: grey;
padding: 20px 20px 20px 20px;
}
.flex-wrapper {
display: flex;
padding-top: 12px;
column-gap: 6px;
row-gap:6px;
}
.flex1 {
flex: 1;
}
.flex2 {
width: 200px;
}
#container my-container (max-width: 600px) {
.container {outline: 1px solid red;}
.flex-wrapper {
display: block;
}
.flex1, .flex2 {
width: 100%;
}
}
<div class="container">
<div class="flex-wrapper">
<div class="flex1 box">One</div>
<div class="flex2 box">Two</div>
</div>
</div>
I have a simple layout with image on Left and Title of blog on right with light grey background for large screen or were width is minimum 800px. for smaller screens it should show image on top and Title below image. It is working fine except two thing
It show extra space under image which is shown as yellow background in this case.
I want Title Item to be same height as Image element with light grey background, in this case which is represented as red.
.flex-container {
display: flex;
align-items: stretch;
flex-direction: row;
border: 1px solid blue;
height: 100%;
}
.flex-container>div {
background-color: yellow;
color: #555;
width: 50%;
height: 100%;
margin: 0px;
text-align: center;
align-self: center;
font-size: 30px;
}
.title-wrapper {
background-color: #f00 !important;
}
.imgx {
width: 100%;
}
#media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
.flex-container>div {
width: 100%;
margin: 0px;
}
.imgx {
width: 100%;
}
}
<div class="flex-container">
<div class="image-wrapper"><img class="imgx" src="https://dummyimage.com/600x400/000/add413&text=IMAGE"></div>
<div class="title-wrapper">This is the title</div>
</div>
To avoid the gap under the image, 2 classical options :
reset vertical-align: to top or bottom
or reset display to block.
To center content inside the second box, make it also a grid or flex box
Possible fix :
.flex-container {
display: flex;
flex-direction: row;
border: 1px solid blue;
height: 100%;
}
.flex-container>div {
background-color: yellow;
color: #555;
width: 50%;
text-align: center;
font-size: 30px;
}
.flex-container .title-wrapper {
background-color: #f00;
display:flex;
align-items:center;
justify-content:center;
margin:0;
}
.imgx {
width: 100%;
display:block;
}
#media (max-width: 800px) {
.flex-container {
display:grid;/* or block*/
}
.flex-container>div ,
.imgx {
width: 100%;
}
}
<div class="flex-container">
<div class="image-wrapper"><img class="imgx" src="https://dummyimage.com/600x400/000/add413&text=IMAGE"></div>
<div class="title-wrapper">This is the title</div>
</div>
To get rid of the space beneath the image, the image needs to be display: block, then to make the title full height and still aligned centre, you need to remove the height and then make the title itself flex and use align and justify on it (see comments in css below):
.flex-container {
display: flex;
align-items: stretch;
flex-direction: row;
border: 1px solid blue;
height: 100%;
}
.flex-container>div {
background-color: yellow;
/* remove height from here */
color: #555;
width: 50%;
margin: 0px;
font-size: 30px;
}
.title-wrapper {
background-color: #f00 !important;
/* add the following to here */
display: flex;
justify-content: center;
align-items: center;
}
.imgx {
width: 100%;
display: block; /* add this */
}
#media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
.flex-container>div {
width: 100%;
margin: 0px;
}
.imgx {
width: 100%;
}
}
<div class="flex-container">
<div class="image-wrapper"><img class="imgx" src="https://dummyimage.com/600x400/000/add413&text=IMAGE"></div>
<div class="title-wrapper">This is the title</div>
</div>
you have to remove height and align-self in .flex-container > div
.flex-container > div {
background-color: yellow;
color: #555;
width: 50%;
margin: 0px;
text-align: center;
font-size: 30px;
}
are you sure to use align-self or did you mean align-items and justify-content?
Good Day.
I'm trying to use flex box to enforce the following behavior in a flex container which contains excess space on the cross-axis:
If all flex items fit in one row, then they should align at the top of the cross axis; but
Once they wrap, the flex items should condense in the center of the cross axis.
To do this, I've tried the following markup at https://jsfiddle.net/ht5bue6s/
* {
box-sizing: border-box;
font-size: 1.5rem;
}
html {
background: #b3b3b3;
padding: 5px;
}
body {
background: #b3b3b3;
padding: 5px;
margin: 0;
}
.flex-container {
height: 500px;
background: white;
padding: 10px;
border: 5px solid black;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
align-content: center;
}
.item-1 {
background: #ff7300;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-2 {
background: #ff9640;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-3 {
background: #ff9640;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-4 {
background: #f5c096;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-5 {
background: #d3c0b1;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-6 {
background: #d3c0b1;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
<div class="flex-container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
</div>
As you'll see, the flex items always condense to the center. That is, "align-content: center" is always applied even when the flex items do not wrap.
I've read the MDN quote, "For align-content to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it".
With that, it seems that if there is excess space on the cross axis within the flex container, that you simply cannot apply align-items alongside align-content. Instead, align-content will always override align-items.
So my question: is there any combination of container or item CSS properties which will produce the behavior described in #1 and #2 requirements above?
Thank you.
To achieve the desired result, you can make use of a media query.
To make this work, remove the flex-wrap and align-content properties from the .flex-container element. We will nly add these properties on the .flex-container element at a particular width of the browser window.
For example, following media query
#media (max-width: 450px) {
.flex-container {
flex-wrap: wrap;
align-content: center;
}
}
will make a flex container a multi-line flex container when the width of the browser window equal to or smaller than 450px. We also add align-content: center to make sure that the flex-lines are aligned in the center of the flex container.
This ensures that for a width greater than 450px, flex container has only one flex-line and flex items are aligned at the start of that single flex-line. For a width smaller than or equal to 450px, we make the flex container a multi-line flex container and align those flex-lines at the center of the flex container using align-content: center.
Working Demo
* {
box-sizing: border-box;
font-size: 1.5rem;
}
html {
background: #b3b3b3;
padding: 5px;
}
body {
background: #b3b3b3;
padding: 5px;
margin: 0;
}
.flex-container {
height: 500px;
background: white;
padding: 10px;
border: 5px solid black;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
}
.flex-container div {
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-1 { background: #ff7300; }
.item-2 { background: #ff9640; }
.item-3 { background: #ff9640; }
.item-4 { background: #f5c096; }
.item-5 { background: #d3c0b1; }
.item-6 { background: #d3c0b1; }
#media (max-width: 450px) {
.flex-container {
flex-wrap: wrap;
align-content: center;
}
}
<div class="flex-container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
</div>
This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
Closed 2 years ago.
I'd like to display some "dots" in between a label and a price, like this:
from..........£2,000.49
total........£20,000.00
However, the dots must "adapt/reduce/increase", if the length of the price increases. (Like in the example above), as the prices are dynamic and not static/hardcoded.
I thought I would try this with flex. I have a working example below, where I have two columns, in two rows.
There is no width on the .price-big class, so the width of these divs increases/decreases, with the length of the numbers.
I am then adding the dots to the label class. However, this then pushes my divs onto separate lines/stacked, like in the example below.
.label {
content: ".............................................";
}
Any ideas on how to achieve this, would be helpful as I'm kinda getting stuck on this one.
Thank you,
Reema
.main {
display: flex;
flex-wrap: wrap;
align-items: baseline;
border: 1px solid green;
width: 200px;
}
.label {
font-size: 14px;
/* flex: 0 50%; */
flex-basis: 50%;
flex-shrink: 1;
flex-grow: 1;
border: 1px red solid;
/* width: 100%; */
text-align: left;
font-size: 14px;
}
.label:after {
content: ".............................................";
}
.price-big {
flex-basis: 0;
flex-shrink: 1;
flex-grow: 1;
border: 1px red solid;
text-align: right;
font-size: 20px;
}
<div class="main">
<div class="label">price</div>
<div class="price-big total">£2,000.49</div>
<div class="label">total</div>
<div class="price-big">£20,000.00</div>
</div>
You may combine float and flex to modify the formating context layout of the non floatting element and use a pseudo to fill that empty space inside it:
your CSS code modified :
.main {
/*display: flex;
flex-wrap: wrap;
align-items: baseline;*/
border: 1px solid green;
width: 200px;
overflow:hidden; /* because of the float label */
}
.label {
font-size: 14px;
/* flex: 0 50%;
flex-basis: 50%;
flex-shrink: 1;
flex-grow: 1; */
border: 1px red solid;
/* width: 100%;
text-align: left;*/
font-size: 14px;
margin-top:0.4em;
float:left;
clear:left;
}
.price-big {
border: 1px red solid;
font-size: 20px;
display:flex;
}
.price-big:before {
content:'';
border-bottom:dotted;
margin-bottom:0.2em;
flex-grow:1;
}
<div class="main">
<div class="label">price</div>
<div class="price-big total">£2,000.49</div>
<div class="label">total</div>
<div class="price-big">£20,000.00</div>
</div>
Omg, I literally figured out the answer one minute after posting this. I added overflow: overlay; to the label class:
.label {
font-size: 14px;
flex-basis: 50%;
flex-shrink: 1;
flex-grow: 1;
border: 1px red solid;
text-align: left;
font-size: 14px;
overflow: overlay; <--- added this
}
.main {
display: flex;
flex-wrap: wrap;
align-items: baseline;
border: 1px solid green;
width: 200px;
}
.label {
font-size: 14px;
/* flex: 0 50%; */
flex-basis: 50%;
flex-shrink: 1;
flex-grow: 1;
border: 1px red solid;
/* width: 100%; */
text-align: left;
font-size: 14px;
overflow: overlay;
}
.label:after {
content: ".............................................";
}
.price-big {
flex-basis: 0;
flex-shrink: 1;
flex-grow: 1;
border: 1px red solid;
text-align: right;
font-size: 20px;
}
<div class="main">
<div class="label">price</div>
<div class="price-big total">£2,000.49</div>
<div class="label">total</div>
<div class="price-big">£20,000.00</div>
</div>
I'm building a line-through header that can span multiple lines. Using the sample code below, is it possible to write my CSS in such a way that the left and right divs are not needed? Where they could be added as pseudo-classes to my header class?
CodePen
.container {
box-sizing: border-box;
display: flex;
place-content: center space-evenly;
align-items: center;
}
.line {
flex: 1;
height: 2px;
background: black;
}
.header {
font-size: 50px;
margin: 0 30px;
text-align: center;
}
.header-broken:after {
content: '';
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: 50px;
height: 5px;
flex: auto;
width: 100%;
height: 2px;
background: black;
}
<div class="container">
<div class="line"></div>
<div class="header">Normal Title<br>fdasfsaf</div>
<div class="line"></div>
</div>
It can be done with just one div, see the example below, add some margin to the pseudo elements as needed for spacing.
.container {
display: flex;
text-align: center;
}
.container:before,
.container:after {
content: "";
flex: 1;
background: linear-gradient(black, black) center / 100% 1px no-repeat;
}
<div class="container">
Normal Title<br>fdasfsaf
</div>
You can also try this.
HTML:
<div class="container">
<div class="header">
<h1>Normal Title
<br>fdasfsaf
</h1>
</div>
</div>
CSS:
.container {
display: flex;
text-align: center;
}
.header {
flex: 1;
}
.header h1 {
font-size: 50px;
margin: 0 30px;
text-align: center;
background-color: #fff;
display: inline-block;
}
.header:after {
content: '';
border-bottom: 1px solid #000;
display: block;
margin-top: -58px;
}