首页 > 编程入门 文章详情

右对齐两个flex容器

编程入门 行业动态 更新时间:2024-10-27 16:27:16
本文介绍了右对齐两个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容器

本文发布于:2023-10-08 09:58:00，感谢您对本站的认可！
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：容器   两个   右对齐   flex

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表