右对齐两个弹性容器 [英] right align two flex containers

查看：20
本文介绍了右对齐两个弹性容器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 flex 框中对齐两个元素时遇到问题:我想要发生的是将帮助"div 放在XX"div 的最右边然后就在左边.我是 flex 容器的新手，通常在另一个元素之后浮动一个元素会产生所需的效果.有谁知道我如何实现这一目标?

<头><风格>身体 {保证金:0;填充:0;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}#menuStrip {位置:相对；边框样式:实心；边框宽度:1px；高度:36px；填充:0;保证金:0;背景颜色:黑色；}#menuContainer {位置:相对；背景颜色:灰色；边框样式:实心；边框宽度:1px；填充:0;宽度:96%；高度:98%；边距:0 自动；显示:弹性；}#hh {位置:相对；显示:弹性；对齐自我:居中；字体大小:14px；宽度:80px；边框样式:实心；边框宽度:1px；高度:50%；左边距:自动；}#pp{位置:相对；显示:弹性；高度:70%；宽度:36px；对齐自我:居中；对齐内容:居中；左边距:自动；背景颜色:白色；边框样式:实心；边框宽度:1px；填充:0;}</风格><身体><div id="menuStrip"><div id="menuContainer"><div id="hh">帮助</div><div id="pp">XX

解决方案

JUSTIFY CONTENT

您正在查找 justify-content 中使用的属性值 flex-end.同时删除 margin-left: auto; 因为它不是必需的.

<小时>

body {边距:0；填充:0；font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}#menuStrip {位置:相对；边框样式:实心；边框宽度:1px；高度:36px；填充:0；边距:0；背景颜色:黑色；}#menuContainer {位置:相对；背景颜色:灰色；边框样式:实心；边框宽度:1px；填充:0；宽度:96%；高度:98%；边距:0 自动；显示:弹性；justify-content: flex-end;}#hh {位置:相对；显示:弹性；对齐自我:居中；字体大小:14px；宽度:80px；边框样式:实心；边框宽度:1px；高度:50%；}#pp{位置:相对；显示:弹性；高度:70%；宽度:36px；对齐自我:居中；对齐内容:居中；背景颜色:白色；边框样式:实心；边框宽度:1px；填充:0；}

<小时>

订购

要更改您在评论中要求的顺序，您将使用属性 order.这很直接.flex-items 的顺序默认值为 0.您可以使用负值或正值，例如 -1、-2、1、2 等.

您可以在第一项或第二项中设置此属性，根据您喜欢更改的值使用不同的值，它们都会得到相同的结果.

在您的第一个项目中使用正值声明它:

body {边距:0；填充:0；font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}#menuStrip {位置:相对；边框样式:实心；边框宽度:1px；高度:36px；填充:0；边距:0；背景颜色:黑色；}#menuContainer {位置:相对；背景颜色:灰色；边框样式:实心；边框宽度:1px；填充:0；宽度:96%；高度:98%；边距:0 自动；显示:弹性；justify-content: flex-end;}#hh {位置:相对；显示:弹性；对齐自我:居中；字体大小:14px；宽度:80px；边框样式:实心；边框宽度:1px；高度:50%；订单:1；}#pp{位置:相对；显示:弹性；高度:70%；宽度:36px；对齐自我:居中；对齐内容:居中；背景颜色:白色；边框样式:实心；边框宽度:1px；填充:0；}

在第二个中使用负值声明它:

body {边距:0；填充:0；font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}#menuStrip {位置:相对；边框样式:实心；边框宽度:1px；高度:36px；填充:0；边距:0；背景颜色:黑色；}#menuContainer {位置:相对；背景颜色:灰色；边框样式:实心；边框宽度:1px；填充:0；宽度:96%；高度:98%；边距:0 自动；显示:弹性；justify-content: flex-end;}#hh {位置:相对；显示:弹性；对齐自我:居中；字体大小:14px；宽度:80px；边框样式:实心；边框宽度:1px；高度:50%；}#pp{位置:相对；显示:弹性；高度:70%；宽度:36px；对齐自我:居中；对齐内容:居中；背景颜色:白色；边框样式:实心；边框宽度:1px；填充:0；顺序:-1；}

<小时>

简单的订单更改交互:

<块引用>

注意:单击锚元素会将每个奇数弹性项目的顺序更改为 -1.

body {边距:0；}一个 {字体大小:2em；位置:绝对；顶部:30%；左:50%；变换:翻译(-50%，-30%)；背景颜色:白色；}.flex 容器 {counter-reset: flex-items;高度:100vh；背景颜色:桃子泡芙；显示:弹性；justify-content:空间环绕；/* 默认值 */}.flex-item {反增量:弹性项目；背景颜色:金色；}.flex-item:nth-child(even) {背景颜色:道奇蓝；}.flex-item::after {内容:计数器(弹性项目)；显示:弹性；对齐内容:居中；对齐项目:居中；高度:100%；字体大小:3em；}.flex-container:target .flex-item:nth-child(odd) {顺序:-1；}

* {box-sizing: 边框框；}身体 {边距:0；}.flex 容器 {counter-reset: flex-items;背景颜色:桃子泡芙；显示:弹性；高度:计算(20vh - .5em)；justify-content: flex-start;底边距:0.5em；位置:相对；}.flex-container:nth-child(2) {justify-content: flex-end;}.flex-container:nth-child(3) {对齐内容:居中；}.flex-container:nth-child(4) {justify-content:空间环绕；}.flex-container:nth-child(5) {对齐内容:间隔；}.flex-container::after {位置:绝对；显示:弹性；内容:属性(数据对齐内容)；对齐内容:居中；对齐项目:居中；高度:100%；宽度:100%；字体大小:3em；}.flex-item {反增量:弹性项目；弹性:0 0 20%；背景颜色:金色；}.flex-item:nth-child(even) {背景颜色:道奇蓝；}.flex-item::after {内容:计数器(弹性项目)；显示:弹性；对齐内容:居中；对齐项目:居中；高度:100%；字体大小:3em；颜色:RGBA(0, 0, 0, .3);}
<div class="flex-item"></div><div class="flex-item"></div></节><section class="flex-container" data-justify-content="flex-end"><div class="flex-item"></div><div class="flex-item"></div></节><section class="flex-container" data-justify-content="center"><div class="flex-item"></div><div class="flex-item"></div></节><section class="flex-container" data-justify-content="space-around"><div class="flex-item"></div><div class="flex-item"></div></节><section class="flex-container" data-justify-content="space-between"><div class="flex-item"></div><div class="flex-item"></div></section>
<小时>
更多信息:
您可以在这些资源中找到更多信息:
Codrops
CSS 技巧
Flexbox 备忘单
堆栈溢出 Michael_B 的 Flexbox 帖子
<小时>
游乐场:
Flexbox 青蛙
I'm having trouble aligning two elements in a flex box:
What I want to happen is to have the "help" div to the very right then just left of that the "XX" div. I'm new to flex containers usually floating one elements right after the other would give the desired affect. Does anyone know how I can achieve this? 
<html>
<head>
<style>
body {
   margin:0;
   padding:0;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
}

#menuStrip {
   position:relative;
   border-style: solid;
   border-width: 1px;
   height:36px;
   padding:0;
   margin:0;
   background-color:black;
}

#menuContainer {
   position:relative;
   background-color:grey;
   border-style: solid;
   border-width: 1px;
   padding:0;
   width:96%;
   height:98%;
   margin: 0 auto;
   display: flex;
}

#hh {
   position:relative;
   display:flex;
   align-self: center;
   font-size:14px;
   width:80px;
   border-style: solid;
   border-width: 1px;
   height:50%;
   margin-left:auto;
}


#pp {
   position:relative;
   display:flex;
   height:70%;
   width:36px;
   align-self: center;
   justify-content: center;
   margin-left: auto;
   background-color:white;
   border-style: solid;
   border-width: 1px;
   padding:0;   
}
</style>
</head>
<body>
   <div id="menuStrip">
      <div id="menuContainer">
         <div id="hh">Help</div>
        <div id="pp"> XX</div>
   </div>
</body>
</html>



 解决方案 
JUSTIFY CONTENT



You are looking for the property value flex-end used in justify-content. Also remove the margin-left: auto; as it is not needed.










body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
  position: relative;
  border-style: solid;
  border-width: 1px;
  height: 36px;
  padding: 0;
  margin: 0;
  background-color: black;
}
#menuContainer {
  position: relative;
  background-color: grey;
  border-style: solid;
  border-width: 1px;
  padding: 0;
  width: 96%;
  height: 98%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}
#hh {
  position: relative;
  display: flex;
  align-self: center;
  font-size: 14px;
  width: 80px;
  border-style: solid;
  border-width: 1px;
  height: 50%;
}
#pp {
  position: relative;
  display: flex;
  height: 70%;
  width: 36px;
  align-self: center;
  justify-content: center;
  background-color: white;
  border-style: solid;
  border-width: 1px;
  padding: 0;
}


<div id="menuStrip">
  <div id="menuContainer">
    <div id="hh">Help</div>
    <div id="pp">XX</div>
  </div>












ORDER



To change the ordering like you ask in the comments, you will use the property order. It's pretty straight forward. The order default value of flex-items is 0. You can either use negative or positive values, such as -1, -2, 1, 2 etc.



You can either set this property in your first or second item, with different values depending which you prefer to change, they will both get the same result.



Declaring it in your first item using a positive value:







body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
  position: relative;
  border-style: solid;
  border-width: 1px;
  height: 36px;
  padding: 0;
  margin: 0;
  background-color: black;
}
#menuContainer {
  position: relative;
  background-color: grey;
  border-style: solid;
  border-width: 1px;
  padding: 0;
  width: 96%;
  height: 98%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}
#hh {
  position: relative;
  display: flex;
  align-self: center;
  font-size: 14px;
  width: 80px;
  border-style: solid;
  border-width: 1px;
  height: 50%;
  order: 1;
}
#pp {
  position: relative;
  display: flex;
  height: 70%;
  width: 36px;
  align-self: center;
  justify-content: center;
  background-color: white;
  border-style: solid;
  border-width: 1px;
  padding: 0;
}


<div id="menuStrip">
  <div id="menuContainer">
    <div id="hh">Help</div>
    <div id="pp">XX</div>
  </div>









Declaring it in the second one using a negative value:







body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
  position: relative;
  border-style: solid;
  border-width: 1px;
  height: 36px;
  padding: 0;
  margin: 0;
  background-color: black;
}
#menuContainer {
  position: relative;
  background-color: grey;
  border-style: solid;
  border-width: 1px;
  padding: 0;
  width: 96%;
  height: 98%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}
#hh {
  position: relative;
  display: flex;
  align-self: center;
  font-size: 14px;
  width: 80px;
  border-style: solid;
  border-width: 1px;
  height: 50%;
}
#pp {
  position: relative;
  display: flex;
  height: 70%;
  width: 36px;
  align-self: center;
  justify-content: center;
  background-color: white;
  border-style: solid;
  border-width: 1px;
  padding: 0;
  order: -1;
}


<div id="menuStrip">
  <div id="menuContainer">
    <div id="hh">Help</div>
    <div id="pp">XX</div>
  </div>












Simple order change interaction:

  
Note: Clicking the anchor element will change every odd flex item's order to -1.






body {
  margin: 0;
}
a {
  font-size: 2em;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  background-color: white;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  justify-content: space-around;
  /* Default Value */
}
.flex-item {
  counter-increment: flex-items;
  background-color: gold;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
.flex-container:target .flex-item:nth-child(odd) {
  order: -1;
}


<a href="#flex-container">Change Order</a>
<section id="flex-container" class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>












FURTHER EXPLANATION:



justify-content property accepts 5 different values:



    

  • flex-start, which is the default.
    • 

  • flex-end
    • 

  • center
    • 

  • space-between
    • 

  • space-around
    • 







flex-start







body{
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  justify-content: flex-start; /* Default Value */
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 30%;
  background-color: gold;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}


<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>












flex-end







body{
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  justify-content: flex-end;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 30%;
  background-color: gold;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}


<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>












center







body{
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  justify-content: center;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 30%;
  background-color: gold;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}


<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>












space-between







body{
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  justify-content: space-between;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 30%;
  background-color: gold;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}


<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>












space-around







body{
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  justify-content: space-around;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 30%;
  background-color: gold;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}


<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>












SUMMARY:










* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  background-color: peachpuff;
  display: flex;
  height: calc(20vh - .5em);
  justify-content: flex-start;
  margin-bottom: .5em;
  position: relative;
}
.flex-container:nth-child(2) {
  justify-content: flex-end;
}
.flex-container:nth-child(3) {
  justify-content: center;
}
.flex-container:nth-child(4) {
  justify-content: space-around;
}
.flex-container:nth-child(5) {
  justify-content: space-between;
}
.flex-container::after {
  position: absolute;
  display: flex;
  content: attr(data-justify-content);
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  font-size: 3em;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 20%;
  background-color: gold;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
  color: rgba(0, 0, 0, .3);
}


<section class="flex-container" data-justify-content="flex-start">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="flex-end">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="center">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="space-around">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="space-between">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>












MORE INFO:



You can find more info in these resources:



Codrops



CSS Tricks



Flexbox Cheatsheet



Stack Overflow Michael_B's Flexbox Post






Playground:



Flexbox Froggy


                        
这篇关于右对齐两个弹性容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆