I have this html structure
body{
max-width: 943.61px;
margin: 0 auto;
<body>
<div class="home">
<span class="name">Name</span>
<span class="about-me">Python</span>
<span class="language">RU|ENG</span>
</div>
</body>
How can I align name to the left, about_me to center, and language to the right of the parent tag?
You need to make .home into a flex container and set justify-content: space-between. This makes it so that the children is distributed along the length of the flexbox in the flex direction.
.home {
/* just for demo */
width: 100%;
background-color: pink;
display: flex;
flex-direction: row;
justify-content: space-between;
}
<body>
<div class="home">
<span class="name">Name</span>
<span class="about-me">Python</span>
<span class="language">RU|ENG</span>
</div>
</body>
A Complete Guide to Flexbox is a good resource on how to use flex in css.
An other solution with flexbox and text-align (just to be different from #cSharp)
body {
max-width: 943.61px;
}
.home {
display: flex;
}
span {
flex: 1;
}
.about-me {
text-align: center;
}
.language {
text-align: right;
}
<body>
<div class="home">
<span class="name">Name</span>
<span class="about-me">Python</span>
<span class="language">RU|ENG</span>
</div>
</body>
Related
I am trying to display the <h1> on it's own line as well as the <h3> and all the buttons on 1 line together. I am using flex and I know how to do this normally, what I tried to do was display: block; on the buttons and h3 to have them on their own lines, this didn't work and I tried googling my way and finding some kind of flexbox guide to figure it out myself.
body {
margin: 0%;
background-color: #6987D5;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container h1 {}
.container button {
border: 0px;
background-color: #315dcc;
padding: 1%;
color: white;
}
<div class="container">
<h1>Stopwatch</h1>
<h3>00:00</h3>
<button type="button">Start</button>
<button type="button">Stop</button>
<button type="button">Reset</button>
</div>
You have to add a <div> around the buttons to combine them.
body {
margin: 0%;
background-color: #6987D5;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.container h1 {}
.buttons {
display: flex;
}
.container button {
border: 0px;
background-color: #315dcc;
padding: 1%;
color: white;
}
<div class="container">
<h1>Stopwatch</h1>
<h3>00:00</h3>
<div class="buttons">
<button type="button">Start</button>
<button type="button">Stop</button>
<button type="button">Reset</button>
</div>
</div>
If you want the tree buttons in a row, they need their own flex container. To display items in a column, you don't need flex since that is the default behaviour.
HTML
.container {
display:flex;
}
<div>
<h1>Stopwatch</h1>
<h3>00:00</h3>
<div class="container">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
</div>
CSS
.container {
display:flex;
}
You can wrap buttons and text within separate container divs like this.
<div class="container">
<h1>Stopwatch</h1>
<h3>00:00</h3>
</div>
<div class="container">
<button type="button">Start</button>
<button type="button">Stop</button>
<button type="button">Reset</button>
</div>
Your .container is flexed which is why you have everything flowing from left to right. You can set flex-direction: column; but that will just be complicating what is there by default.
All h element is blocked element which means they will fill up any available space. So remove display: flex; from the .container class selector and wrap your buttons in grid or flex container.
.button-group {
display:grid;
grid-template-colums: repeat(3, 1frm);
gap:1rem;
}
or
.button-group button{
gap: 1rem; //May not work on all browsers
display:flex;
flex-wrap:wrap;
}
and
<div class='button-group'>
<button>Start</button>
<button>Stop</button>
<button>End</button>
</div>
In theory you can just add:
flex-direction: column;
to the .container css
but it will make also start and stop buttons in column, is this what you wanted?
Before this gets down-voted into oblivion, let me say I've searched through the numerous SO questions that looked similar to this one, but none that I found addressed my issue.
I'm using flexbox to center some <p> tags both horizontally and vertically within an element. I don't want to center the text within the <p> element, just center the <p> elements themselves.
.app-outer {
display: flex;
flex-direction: column;
}
.app {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
align-items: center;
}
.app p {
display: inline-block;
}
.title-bar {
background-color: #202225;
color: #72767D;
font-weight: bold;
padding: 0 0 2px 8px;
display: flex;
flex-direction: row;
width: 100%;
}
<div class="app-outer">
<div class="title-bar">
<span class="draggable">Skipwars</span>
<span class="btns">
<button id="btn-minimize" tabindex="-1">-</button><!--
--><button id="btn-close" tabindex="-1">×</button>
</span>
</div>
<div class="app">
<p>Add a browser source pointed at <!--http://localhost:3333/--></p>
<p>
Optional parameter <code style="display:inline">threshold=n</code>. ex: http://localhost:3333/?threshold=4 (default 8)
</p>
</div>
</div>
My app is 300px wide (I'm using electron).
As you can see, if the paragraph doesn't have enough text for multiple lines, it works fine. If it does, the paragraph expands to the width of .app, and the text is left-justified.
This is what I'm looking for:
I thought that setting the paragraphs' display to inline-block would do the trick, but it doesn't.
It's working as expected, but since the <p> tags are the same width as the viewport, they are flush to the left when the vp is too small, and in this case the url is so long that it wraps to the next line and leaves a space on the first, making it appear that it is not centered. I added some horizontal padding to the <p> tags to better illustrate:
.app-outer {
display: flex;
flex-direction: column;
}
.app {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
align-items: center;
}
.app p {
display: inline-block;
padding: 0 20px;
}
.title-bar {
background-color: #202225;
color: #72767D;
font-weight: bold;
padding: 0 0 2px 8px;
display: flex;
flex-direction: row;
width: 100%;
}
<div class="app-outer">
<div class="title-bar">
<span class="draggable">Skipwars</span>
<span class="btns">
<button id="btn-minimize" tabindex="-1">-</button><!--
--><button id="btn-close" tabindex="-1">×</button>
</span>
</div>
<div class="app">
<p>Add a browser source pointed at
<!--http://localhost:3333/--></p>
<p>
Optional parameter <code style="display:inline">threshold=n</code>. ex: http://localhost:3333/?threshold=4 (default 8)
</p>
</div>
</div>
Scenario :
I'm creating a pricing comparison table and am having difficulties aligning the last div, card-vat-fee, to the bottom of the container.
I need to do this because the tiers have longer running lists than
one another, causing the last div isn't aligned with the bottom of
the container.
How can I get the last div to align to the bottom of the flexbox?
Tried Case :
Of course, if I set a min-height: 320px; on the card-vat-fee class it will align the div to the bottom, however this isn't a responsive solution and I feel like there is a better approach that uses flex properties. Moreover, setting the card-vat-fee div to flex-grow, flex: 1 1 auto, produces an unideal solution.
Code :
<div class='pricing__tier'>
<div class='uni-card-header'>
</div>
<div class='uni-card-body'>
<div class='uni-row-on'>
</div>
<div class='uni-row-off'>
</div>
<div class='uni-row-on card-vat-fee'>
<div class='vat-fee-text'>
Credit card fees and VAT apply. See below for details.
</div>
</div>
</div>
</div>
<style>
.pricing__tier {
padding: 0;
text-align: center;
display: flex;
flex-direction: column;
width: 0%;
flex: 1;
}
.uni-card-body {
display: flex;
flex-direction: column;
}
</style>
Pricing Tier
Please Suggest.
Thanks in advance
Use margin-top:auto on the last div.
.pricing__tier {
padding: 0;
text-align: center;
display: flex;
flex-direction: column;
width: 25%;
flex: 1;
height: 200px; /* for demo purposes */
border: 1px solid grey;
}
.uni-card-body {
display: flex;
flex-direction: column;
flex: 1;
}
.card-vat-fee {
margin-top: auto; /* push to bottom */
background: green;
}
<div class='pricing__tier'>
<div class='uni-card-header'>
</div>
<div class='uni-card-body'>
<div class='uni-row-on'>
</div>
<div class='uni-row-off'>
</div>
<div class='uni-row-on card-vat-fee'>
<div class='vat-fee-text'>
Credit card fees and VAT apply. See below for details.
</div>
</div>
</div>
</div>
plaesa try this one :
.uni-card-body {
display: flex;
flex-direction: column;
width: 'for example' 700px;
}
.uni-row-on.card-vat-fee{
align-self: flex-end;
}
Ihope this will help you!
.uni-card-body {
display: flex;
flex-flow: row wrap;
justify-content: center;
background: yellow;
height: 90vh;
}
.uni-row-on.card-vat-fee {
align-self: flex-end;
background: green;
}
<div class='pricing__tier'>
<div class='uni-card-header'>
</div>
<div class='uni-card-body'>
<div class='uni-row-on'>
</div>
<div class='uni-row-off'>
</div>
<div class='uni-row-on card-vat-fee'>
<div class='vat-fee-text'>
Credit card fees and VAT apply. See below for details.
</div>
</div>
</div>
</div>
I've illustrated the thing in the snippet, it'll help.
Note: Content justification, background and height are for demonstration and not necessary.
1- set the parent div relative position without top & left & right &
bottom property
2- set the last div position absolute with bottom:0;right:0;left:0;height:36px;
<style>
.pricing__tier {
position:relative;
padding: 0;
text-align: center;
display: flex;
flex-direction: column;
width: 0%;
flex: 1;
}
.pricing__tier>.vat-fee-text {
position:absolute;
bottom:0;
right:0;
left:0;
height:36px;
}
</style>
I wonder how to align three elements in one div. Basically, it should look like this
Solved.
For future readers, the solution for my problem looks like this
<div style="text-align: center;">
<span style="float: left;">LEFT</span>
<span style="margin: auto;">CENTER</span>
<span style="float: right;">RIGHT</span>
</div>
.container{
display: flex; // working with all latest browsers
display: -webkit-flex; // for old version of safari
display: -ms-flex; // for old versions of IE
justify-content: space-between;
}
.container span{
flex: 1;
text-align: center;
}
<div class="container">
<span>LEFT</span>
<span>CENTER</span>
<span>RIGHT</span>
</div>
The best thing is if you are adding more data inside container. it will give equal spacing. And inline styling is not a better option
Demo here
Try using float:left and float:right for left and right see this fiddle:
https://jsfiddle.net/u924gptz/
Please do follow certain things like not have any styles inline
.wrapper {
text-align: center;
}
.left {
float:left;
}
.center {
margin: auto;
}
.right {
float: right;
}
<div class="wrapper">
<span class="left">LEFT</span>
<span class="center">CENTER</span>
<span class="right">RIGHT</span>
</div>
Use DIVs instead of spans and this simple CSS for the container element:
.x {
display: flex;
justify-content: space-between;
}
display: flex does the equal distirbution, justify-content: space-between; makes the outmost elements align at the borders.
.x {
display: flex;
justify-content: space-between;
}
<div class="x">
<div>LEFT</div>
<div>CENTER</div>
<div>RIGHT</div>
</div>
All 3 spans should have separate stylings.
Here:
<div style="text-align: center;">
<span style="float: left;">LEFT</span>
<span style="margin: auto;">CENTER</span>
<span style="float: right;">RIGHT</span>
</div>
This should do it.
well there are a number of ways to do this. but you could use something like this
div { display:flex; align-items: center;}
span:first-child {float:left;}
span:nth-child(2) {margin:0 auto}
span:last-child {float:right}
<div>
<span>LEFT</span>
<span>CENTER</span>
<span>RIGHT</span>
</div>
I've got a block grid of squares with text inside each. Everything works fine when there is only one line of text. More text in a square makes it move below the others and break the grid.
The other problem is that I would like one square to have an additional line of text at the top as shown by the class="notice". But I can't get this to work either.
I've created a jsfiddle to show more clearly what the issue is. I've had a look through this guide on flexbox but can't seem to solve the issue, not sure if it is related. Any help is greatly appreciated for a newbie.
<body>
<div class="container">
<div class="products">
<div class="product">
<p>Apples</p>
<span class="link"></span>
</div>
<div class="product">
<p class="notice">You won't find cheaper</p>
<p>Best price you will find on grapes</p>
<span class="link"></span>
</div>
<div class="product">
<p>Orange</p>
<span class="link"></span>
</div>
<div class="product" id="no">
<p>Best price you will find on grapes, bananas, kiwis</p>
<span class="link"></span>
</div>
<div class="product">
<p>Orange</p>
<span class="link"></span>
</div>
<div class="product">
<p>Orange</p>
<span class="link"></span>
</div>
</div>
</div>
</body>
.products {
text-align:center;
}
.product {
background-color: red;
display: inline-flex;
height: 10em;
margin-bottom: 10px;
position: relative;
width: 10em;
justify-content:center;
align-items:center;
}
.product p {
color: black;
}
.product p.notice {
font-size: 14px;
color: yellow;
}
.link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.product:hover, div.product:focus {
background-color: green;
}
Not sure why you need display: inline-flex for each of your product items. You could simply make the parent a flex container with display: flex, making all product items flex items.
HTML (no changes)
CSS (adjusted sections only)
.products {
display: flex; /* establish primary flex container */
flex-wrap: wrap; /* enable flex items to wrap */
justify-content: center; /* center flex items horizontally, in this case */
}
.product {
height: 10em;
width: 10em;
margin: 5px;
position: relative;
display: flex; /* establish nested flex container */
flex-direction: column; /* stack flex items vertically */
justify-content: center; /* center flex items vertically, in this case */
align-items: center; /* center flex items horizontally, in this case */
background-color: red;
}
Revised Fiddle
inline-flex, inline-block,inline-table,inline, img, .. all of them stands on a baseline, you may use vertical-align:
.product {
background-color: red;
display: inline-flex;
vertical-align:top; /* HERE */
height: 10em;
margin-bottom: 10px;
position: relative;
width: 10em;
justify-content:center;
align-items:center;
}
https://jsfiddle.net/382m8wzg/11/