Center one and right/left align other flexbox element
Below are five options for achieving this layout:
- CSS Positioning
- Flexbox with Invisible DOM Element
- Flexbox with Invisible Pseudo-Element
- Flexbox with
flex: 1
- CSS Grid Layout
Method #1: CSS Positioning Properties
Apply position: relative
to the flex container.
Apply position: absolute
to item D.
Now this item is absolutely positioned within the flex container.
More specifically, item D is removed from the document flow but stays within the bounds of the nearest positioned ancestor.
Use the CSS offset properties top
and right
to move this element into position.
li:last-child {
position: absolute;
top: 0;
right: 0;
background: #ddd;
}
ul {
position: relative;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
p {
text-align: center;
margin-top: 0;
}
span {
background-color: aqua;
}
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>true center</span></p>
How can I align one item right with flexbox?
To align one flex child to the right set it withmargin-left: auto;
From the flex spec:
One use of auto margins in the main axis is to separate flex items
into distinct "groups". The following example shows how to use this to
reproduce a common UI pattern - a single bar of actions with some
aligned on the left and others aligned on the right.
.wrap div:last-child {
margin-left: auto;
}
Updated fiddle
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.wrap div:last-child {
margin-left: auto;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
<div class="wrap">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!-- DESIRED RESULT -->
<div class="result">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
Using flex, one element centrally aligned and others spaced between the centre and right
Here's a clean and simple process to get you to your layout:
First, note that CSS pseudo-elements (i.e., ::before
and ::after
), when applied to flex containers, are treated as flex items.
Create a pseudo-element to serve as the first flex item in the container.
Make the pseudo consume all available space (i.e., set it to
flex: 1
)Do the same with your button group (
.btn-group
) on the opposite end (i.e., set it toflex: 1
)
Now, with the outer items pressuring from both sides, the title is pinned to the middle of the container.
Make the button group container a flex container.
Set that container to
justify-content: center
.
Now, the individual buttons are horizontally centered on the right side of the already centered title.
.header {
display: flex;
height: 50px;
align-items: center;
}
.header::before {
content: "";
flex: 1;
}
.btn-group {
flex: 1;
display: flex;
justify-content: center;
}
<div class="header">
<h1 class="title">1</h1>
<div class="btn-group">
<button id="btn_1" class="selected">2</button>
<button id="btn_2">3</button>
<button id="btn_3">4</button>
</div>
</div>
How to Right-align flex item?
A more flex approach would be to use an auto
left margin (flex items treat auto margins a bit differently than when used in a block formatting context).
.c {
margin-left: auto;
}
Updated fiddle:
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}
<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>
How to align button right in a flex container?
Floats do not work in a flex container
Use align-self:flex-end
instead
.faq {
padding: 12px 20px;
display: block;
box-sizing: border-box;
width: 50%;
margin: auto;
margin-top: 30px;
}
.outerDiv {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 20px;
background-color: yellow;
}
.save {
align-self:flex-end;
background-color: red;
}
<div class="outerDiv">
<h2>New FAQ</h2>
<input type="text" class="faq">
<br>
<button class="save" mat-raised-button color="primary">Primary</button>
</div>
Centering one flex item and and aligning second item to right by any amount of px
You can use width: 0; white-space: nowrap;
trick.
.flex {
display: flex;
justify-content: center;
}
.icon {
width: 0;
white-space: nowrap;
margin-left: 20px;
}
<div class="flex">
<div class="text">Tacos</div>
<div class="icon">lt;/div>
</div>
Aligning elements left, center and right in flexbox
Use nested flex containers and flex-grow: 1
.
This allows you to create three equal-width sections on the nav bar.
Then each section becomes a (nested) flex container which allows you to vertically and horizontally align the links using flex properties.
Now the left and right items are pinned to the edges of the container and the middle item is perfectly centered (even though the left and right items are different widths).
.nav {
display: flex;
height: 50px; /* optional; just for demo */
background: white;
}
.links {
flex: 1; /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
display: flex;
justify-content: flex-start;
align-items: center;
border: 1px dashed red;
}
.header-title {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
border: 1px dashed red;
}
.logout {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
border: 1px dashed red;
}
.links a {
margin: 0 5px;
text-decoration: none;
}
<div class="nav mobilenav">
<div class="links">
<a href="/institutions/">Institutioner</a>
<a href="/leaders/">Ledere</a>
</div>
<div class="header-title">Institution institution 1</div>
<div class="logout"><a class="button-dark" href="/user/logout">Log ud</a></div>
</div>
Related Topics
Rounded Corners in Outlook Without Images
"Height=100%" Is Not Working in HTML When Using <!Doctype>
Center Navbar Links Without Brand Pushing It to the Right in Bootstrap 4
Google Web Fonts and PDF Generation from HTML with Wkhtmltopdf
Why Does Negative Z-Index and Non-Static Position Disable My Checkbox in Most Browsers
How to Avoid Wrapping in CSS Float
Foundation 5 Off-Canvas Full Height of Device
CSS White-Space: Pre Not Working as Expected
Darken a Background Image Without Affecting the Text
Setting the Granularity of the HTML5 Audio Event 'Timeupdate'
Remove Host Component Tag from HTML in Angular 4
How to Apply a Fade Away Effect (Not Animation) Across All the Content of a Div