带弹性框的距离列间距 (css)

Question

我是 flex box 的新手，想知道是否有一种方法可以让我首先在同一列中有两个 divs/spans，然后在它们之间有一个适当的 space。

End goal

我目前拥有的：

Current Progress without Text Count

文字数：

With Text Count

HTML:

 <div class="emoji-text-container">
        <textarea type="text" class="text-area form-control" maxlength="279" formControlName="twitterText">
        </textarea>
        <button #toggleEmojiTwitter class="emoji-button mt-2 mr-2" type="button" (click)="_isTwitterEmojiPickerVisible = !_isTwitterEmojiPickerVisible"><mdb-icon class="emoji-icon" far icon="smile"></mdb-icon></button>
        <span class="text-count" [hidden]="_isTwitterEmojiPickerVisible">
          <span>{{_twitterCharLimit - this._postsForm.get('twitterText').value.length}}</span>
        </span>
 </div>

CSS:

//Emoji and Text Count

.emoji-container,
.emoji-text-container {
  display: flex;
  justify-content: center;
  align-items: start;
  margin: auto;
  border: 1px solid #d9d7d8;
}

.text-area {
  min-height: 15rem;
  border: 0;
  resize: none;
  outline: none;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.emoji-button {
  border-radius: 25px;
  width: 45px;
  height: 30px;
  border: 1px solid #c8c8c8;
  font-size: 20px;
  background: transparent;
  cursor: pointer;

  &:focus {
    outline: 0;
  }
}

.emoji-icon {
  color: #9a9696;
}

.text-count {
  font-size: 14px;
  border-radius: 25px;
  background-color: #f4f2f2;
  width: 3rem;
  height: 12%;
  padding-top: 4px;
  font-weight: bold;
  color: #8e8d8d;
  border: 1px solid #c8c8c8;
  text-align: center;
}

Answer 1

你可以试试这个 .emoji-text-container --- position:relative; .text-count --- position:absolute; 在此之后，您可以使用 bottom:0 移动“文本计数”； right:0;

Answer 2

最简单的设置是将笑脸和计数元素包装在额外的 flex 包装器中，如下所示：

.container {
  display: flex;
}

.textarea {
   height: 100px;
}

.sidebar {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

<div class="container">
  <textarea class="textarea"></textarea>
  <div class="sidebar">
    <div class="smile"></div>
    <div class="text">12</div>
  </div>
</div>

Answer 3

你也可以使用 flex，首先将这两个按钮分组为

<div class="btnGp">
 <button #toggleEmojiTwitter class="emoji-button mt-2 mr-2" type="button" (click)="_isTwitterEmojiPickerVisible = !_isTwitterEmojiPickerVisible"><mdb-icon class="emoji-icon" far icon="smile"></mdb-icon></button>
        <span class="text-count" [hidden]="_isTwitterEmojiPickerVisible">
          <span>{{_twitterCharLimit - this._postsForm.get('twitterText').value.length}}</span>
        </span>
</div>

.btnGp{
display : flex;
justify-content : space-between;
flex-direction : column;
height : 100%;
}

这样一来一回，下不去，为什么呢？因为它有 100% 高度但不能扩展，为什么它不能扩展？因为百分比是相对数量，父级没有任何高度所以添加

.emoji-text-container{
 // a size of your choice
}

并从 text-box 中删除最小高度并向其添加高度 100%

Answer 4

您的问题的简单框架如下所示。两种方法：1：随位置弯曲和 2）仅弯曲。

它以为你在找第二个

1。弹性/位置版本

.w {
  border: 1px solid black;
  display: flex;
  min-height:200px;
}

.left {
  width:100%;
  border: 1px solid black;
}
.right {  
  width:70px;    
}
.icons {
  position:relative;
  height:100%;
  width:100%;  
}

.top, .bottom {  
  position:absolute;
}
.top {
  top:0;
}
.bottom {
   bottom:0;
}

<div class="w">
  <div class="left">1</div>
  <div class="right">    
    <div class="icons">
      <div class="top">top</div>    
      <div class="bottom">buttom</div>    
    </div>
  </div>
</div>

我使用弹性框和图标的顶部和底部位置。

2。仅限 Flex 版本

.w {
  border: 1px solid black;
  display: flex;
  min-height:200px;
}

.left {
  width:100%;
  border: 1px solid black;
}
.right {  
  width:70px;    
}
.icons {
  height:100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: gray;
  flex-wrap: nowrap;
}

<div class="w">
  <div class="left">1</div>
  <div class="right">    
    <div class="icons">
      <div class="top">top</div>    
      <div class="bottom">buttom</div>    
    </div>
  </div>
</div>

带弹性框的距离列间距 (css)

Distance column spacing with flex box (css)

html

css

flexbox

1。弹性/位置版本

2。仅限 Flex 版本