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

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

问题描述

我在弹出框中对齐两个元素时遇到问题：
我想要发生的是让帮助div到右边，然后就是XXdiv。我是新的flex容器通常浮动一个元素紧接着另一个将给出所需的影响。有谁知道我可以实现这一点吗？ 

 < 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：gray; 
 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>帮助< / div> 
< div id =pp> XX< / div> 
< / div> 
< / body> 
< / html>


解决方案

JUSTIFY CONTENT



您正在查找 justify-content 中使用的属性值 flex-end 。同时删除 margin-left：auto;

code，因为不需要。





  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;背景颜色：灰色border-style：solid; border-width：1px; padding：0;宽度：96％;身高：98％ margin：0 auto;显示：flex; justify-content：flex-end;}＃hh {position：relative;显示：flex; align-self：center; font-size：14px; width：80px; border-style：solid; border-width：1px; height：50％;}＃pp {position：relative;显示：flex;身高：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>帮助< / div> < div id =pp> XX< / div> < / div>

[/ div>





ORDER



要在注释中更改排序，请使用属性 order 。这是很直接。 flex-items的顺序默认值为 0 。您可以使用负值或正值，例如 -1 ， -2 ， 1



您可以在第一次或第二次设置此属性。



使用正值在第一个项目中声明它：

/ strong> 



  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;背景颜色：灰色border-style：solid; border-width：1px; padding：0;宽度：96％;身高：98％ margin：0 auto;显示：flex; justify-content：flex-end;}＃hh {position：relative;显示：flex; align-self：center; font-size：14px; width：80px; border-style：solid; border-width：1px;身高：50％ order：1;}＃pp {position：relative;显示：flex;身高：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>帮助< / div> < div id =pp> XX< / div> < / div>



一个使用负值： 



  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;背景颜色：灰色border-style：solid; border-width：1px; padding：0;宽度：96％;身高：98％ margin：0 auto;显示：flex; justify-content：flex-end;}＃hh {position：relative;显示：flex; align-self：center; font-size：14px; width：80px; border-style：solid; border-width：1px; height：50％;}＃pp {position：relative;显示：flex;身高：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>帮助< / div> < div id =pp> XX< / div> < / div>





简单的订单更改交互：



注意：点击锚元素将改变每个奇数项目的顺序到-1。


  body {margin：0;} a {font-size：2em; position：absolute; top：30％;左：50％; transform：translate（-50％，-30％）; background-color：white;}。flex-container {counter-reset：flex-items;高度：100vh;背景颜色：peachpuff;显示：flex; justify-content：space-around; / *默认值* /}。flex-item {counter-increment：flex-items; background-color：gold;}。flex-item：nth-​​child（even）{background-color：dodgerblue;}。显示：flex; justify-content：center; align-items：center;高度：100％; font-size：3em;}。flex-container：target .flex-item：nth-​​child（odd）{order：-1;}   < a href =＃flex-container>更改订单< / a>< section id =flex-containerclass = 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>





进一步说明：



justify-content 属性接受5个不同的值：




  • flex-start是默认值。

  • flex-end

  • 中心

  • 空格

  • b $ b




flex-start 



  body {margin：0;}。flex-container {counter-reset：flex-items;高度：100vh;背景颜色：peachpuff;显示：flex; justify-content：flex-start; / *默认值* /}。flex-item {counter-increment：flex-items; flex：0 0 30％; background-color：gold;}。flex-item：nth-​​child（even）{background-color：dodgerblue;}。显示：flex; justify-content：center; align-items：center;高度：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;高度：100vh;背景颜色：peachpuff;显示：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; justify-content：center; align-items：center;高度：100％; font-size：3em;}  

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





中心



 

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





空格



  body {margin：0;}。flex-container {counter-reset：flex-items;高度：100vh;背景颜色：peachpuff;显示：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; justify-content：center; align-items：center;高度：100％; font-size：3em;}  

 < section class = 柔性容器> < div class =flex-item>< / div> < div class =flex-item>< / div>< / section>





空格



  body {margin：0;}。flex-container {counter-reset：flex-items;高度：100vh;背景颜色：peachpuff;显示：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; justify-content：center; align-items：center;高度：100％; font-size：3em;}  

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





摘要： 





  * { sizing：border-box;} body {margin：0;}。flex-container {counter-reset：flex-items; background-color：peachpuff;显示：flex; height：calc（20vh  -  .5em）; justify-content：flex-start; margin-bottom：.5em; flex-container：nth-​​child（2）{justify-content：flex-end;} flex-container：nth-​​child（3）{justify-content：center; n-child（4）{justify-content：space-around;}。flex-container：nth-​​child（5）{justify-content：space-between;}。显示：flex; content：attr（data-justify-content）; justify-content：center; align-items：center;高度：100％;宽度：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; justify-content：center; align-items：center;高度：100％; font-size：3em; color：rgba（0，0，0，.3）;}  

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


$ b



更多信息：



您可以在这些资源中找到更多信息：



Codrops



CSS技巧



Flexbox小工具



Stack Overflow Michael_B的Flexbox帖子





游乐场：



Flexbox Froggy


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

这篇关于右对齐两个flex容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆