如何在 Flex-container 中定位 –THIS–？

Question

我正在尝试将 "register" 定位为图片 #1...但我唯一得到的是图片 #2。

图片#2 是我们所知的在 flexbox 中完成的，原因是我为什么要让网站响应，而我做的第一个网站（图片#1）没有响应。

我不知道我是否应该将 "col-" 类与我的 flexbox 代码混为一谈。两张图都是表格。当视口缩小时，flexbox 中的那个工作正常。我正在使用媒体查询来提高响应能力，纯粹 CSS。不使用框架。

我怎样才能在 flexbox 中自由放置任何东西，同时保持一切响应，如果我用 padding 和 margins 放置元素，我将无法在那里放置任何其他东西。

This is what I want: (not a flexbox)
This is the most I can get to it: (inside the flexbox)

** CSS 图片# 2 的代码（flexbox 孩子）：**

      /*flex-container*/
          #header {
            position: fixed;
            display: flex;
            flex-wrap: wrap;
            background-color: #343434;
            top: 0;
            right: 0;
            left: 0;
            height: auto;
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: .3%;
            padding-top: .3%;
            border-bottom: 1px solid white;
            z-index: 1000;
        }

    /*flex-childs*/
/*table*/    #login {
            margin-left: auto;
           }


 /*td*/      #users {
            width: 100%;
            border: 1px solid #ccc;
            box-shadow: 0px 0px 5px black;
            border-radius: 1px;
            font-size: 12px;
            padding: 2px 2px 2px 2px;
        }

   /*td*/     #pass {
            width: 100%;
            border: 1px solid #ccc;
            box-shadow: 0px 0px 5px black;
            border-radius: 1px;
            font-size: 12px;
            padding: 2px 2px 2px 2px;
        }



 /*td*/       #register {
            font-size: 17.5px;
        }

Answer 1

这样的东西呢，我从头开始写的，没有完全一样，但我相信结构应该足够了

第一张图片（要获得完整的响应效果，您需要在顶行设置媒体查询并更改 justify-content: flex-start;）

https://jsfiddle.net/suunyz3e/1450/

html:

<div class="column rows-container">
<div  class="top-row row">
<div>
  <span>Register?</span>
</div>
<div>
  <span>Help Contact</span>
</div>

</div>
<div class="bottom-row row" >
  <div>
    <input type="text" placeholder="email">
  </div>
  <div>
     <input type="text" placeholder="password">
  </div>
</div>

</div>

css:

.register-box{
  display:inline-flex;
  color:#fff;
  background-color:#111;
  padding-top: 5px;
  padding-bottom: 5px; 
}
.register-box .register-title{
  margin-left:20px;
  font-weight:bold;
}
.column{
  display:flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-direction: normal;
}
.rows-container{
    flex-wrap:wrap;
    display:inline-flex;
    color:#fff;
    background-color:#111;
    padding-top: 5px;
    padding-bottom: 5px;
}
.row{
  display:flex;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.top-row{
 flex-wrap:wrap;
 justify-content: space-between;
 padding-bottom:12px;
}
.top-row span{
  padding-right:10px;
  font-size:14px;
  font-weight:bold;
  display:block;
  line-height:11px;
}
.bottom-row{
  flex-wrap:wrap;
  margin-right: 25px;
  margin-left:65px;
}

第二张图片

https://jsfiddle.net/suunyz3e/1448/

html:

<div class="register-box column">
  <div class="top-row row">
      <div>
          <span class="register">register?</span>
      </div>
      <div>
        <span class="contact">help contact </span>
      </div>
  </div>
   <div class="bottom-row row">
      <div>
        <input type="text" placeholder="email">
      </div>
      <div>
       <input type="text" placeholder="password">
      </div>
      <div>
       <button>
       login
       </button>
      </div>
  </div>
</div>

css:

.register-box{
  background-color:#111;
  padding-top: 10px;
  padding-bottom: 10px;
 }

.column{
  display:flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-direction: normal;
}

.row{
  display:flex;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.register-box .top-row{
  flex-wrap:wrap;
  color:#fff;
  text-transform: capitalize;
  padding: 0px 18px 5px 12px;
  justify-content: space-between;
}
.register-box .top-row .register{
      font-weight: bold;
}
.register-box .top-row .contact{
         font-size: 14px;
         line-height:11px;
         font-weight: bold;
         display: block;
}

.register-box .bottom-row{
  flex-wrap:wrap;
  padding: 0px 18px 0px 12px;
}

.register-box .bottom-row input{
  margin-right:5px;
}

如何在 Flex-container 中定位 –THIS–？

How to position –THIS– in a Flex-container?

html

css

flexbox

responsive