右对齐两个弹性容器

Mar*_*n29 6 html css css3 flexbox

我在弹性框中对齐两个元素时遇到了麻烦:我想要发生的是将"帮助"div放到"XX"div的右侧然后左侧.我刚开始使用柔性容器,通常会在一个元素之后立即浮动,从而产生所需的效果.有谁知道我怎么能做到这一点？

<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>

Run Code Online (Sandbox Code Playgroud)

JUSTIFY CONTENT

您正在寻找的属性值flex-end中使用justify-content.同时删除margin-left: auto;不需要的.

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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

订购

要更改您在评论中提出的顺序,您将使用该属性order.这很直接.flex-items的订单默认值为0.您可以使用负值或正值,如-1,-2,1,2等.

您可以在第一个或第二个项目中设置此属性,根据您希望更改的值使用不同的值,它们将获得相同的结果.

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

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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

简单的订单变更互动:

注意:单击锚元素会将每个奇数弹性项的顺序更改为-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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

进一步解释:

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

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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

柔性端

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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

中央

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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

空间之间

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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

空间的周围

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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

摘要:

* {
  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);
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

更多信息:

您可以在以下资源中找到更多信息:

Flexbox Cheatsheet

Stack Overflow Michael_B的Flexbox Post

操场:

Flexbox Froggy

归档时间：	9 年，1 月前
查看次数：	755 次
最近记录：	9 年前

在CSS Flexbox中,为什么没有"justify-items"和"justify-self"属性？ 602

更多相关链接

Google Chrome表单自动填充及其黄色背景 245

pugjs(玉)模板引擎加载css文件 33

使用jQuery时,在元素之间添加换行符或空格.append() 23

在HTML5中创建拖放编辑平台 22

表行不包含position:absolute的元素 21

可以使用css3 translateZ()代替z-index吗？ 16

证明父母留下的div 16

如何使用flexbox将dt和dd并排放在另一个下面的多个dd？ 13

Flexbox,绝对定位和100%高度 4

将分页对齐到底部中心 1

'git pull'和'git fetch'有什么区别？ 11447

为什么HTML认为"chucknorris"是一种颜色？ 7264

停止EditText在Activity启动时获得焦点 2770

如何使用jQuery刷新页面？ 2361

接口和抽象类之间有什么区别？ 1705

从C#中的枚举中获取int值 1698

如何仅从SQL Server DateTime数据类型返回日期 1692

<meta charset ="utf-8"> vs <meta http-equiv ="Content-Type"> 1499

传输安全性阻止了明文HTTP 1425

插入...值(SELECT ... FROM ...) 1340