小编LGS*_*Son的帖子

如何在悬停时没有实际的div缩放的情况下在此div缩放内制作图像？因此，我只希望图像放大。

这是代码：

<div id="container">
    <img id="image" src="some-image">
</div>

我正在尝试使用flexbox将我的图标对齐到按钮视图的左侧,将文本对齐到中心.目前它们都与中心对齐,但我不确定如何在按钮的最左边缘设置我的图标,同时保持文本在视图中居中

现在我的按钮看起来像这样:

我使用https://github.com/APSL/react-native-button作为按钮,使用 https://github.com/oblador/react-native-vector-icons作为图标

以下是我的一些代码:

    <Button style={signupStyles.facebookButton}>
      <View style={signupStyles.nestedButtonView}>
        <Icon
          name="facebook"
          size={30}
          color={'white'}

        />
        <Text style={signupStyles.buttonText}>Continue with Facebook</Text>
      </View>
    </Button>

    var signupStyles = StyleSheet.create({
    buttonText: {
      color: 'white',
      fontWeight: 'bold',
      textAlign: 'center',
    },

    facebookButton: {
      backgroundColor: styleConstants.facebookColor,
      borderColor: styleConstants.facebookColor,
      borderWidth: 2,
      borderRadius: 22,
    },

    nestedButtonView: {
     flexDirection: 'row',
     alignItems: 'center',
    },

  });

我正在尝试使用水平容器,填充可变大小的文本.如果文本很短,则容器应具有最小高度并垂直居中.如果文本较长,容器应增加其高度,保持垂直和底部边距.

我准备了一个jsfiddle 这个小提琴受到了这个答案的启发,也尝试display: table了这个答案和这一个

考虑这个小提琴:https://jsfiddle.net/vs9a4toz/

我希望我的按钮位于div的底部.

我尝试使用align-self: flex-end他们的容器div.但最终结果是div的内容在最后并不是div本身.

.container {
  width: 600px;
  display: flex;
  flex-flow: row;
  border: 2px solid red;
}

.box1,
.box2,
.box3 {
  width: 100%;
  border: 1px solid blue;
  display: flex;
  flex-flow: column;
  size: 100px;
}

.content {
  text-align: center;
}

.buttons {
  display: flex;
  flex-flow: column;
}

<div class="container">

  <div class="box1">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

  <div class="box2">
    <div class="content">
      <p>HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ …

我有一个<div>,当它徘徊时,我正在显示一个<div>包含图标的孩子.

由于图标高于文本,因此新图标会更改父级<div>的高度.它也改变了<div>宽度,因为它插在最后.

我的问题:我希望<div>隐藏图标(带display:none)但仍然具有相同的大小,就像图标在那里(不使用静态宽度/高度).因此,当用户将鼠标悬停在<div>图标上时,将显示图标,但<div>尺寸将保持不变.

那可能吗？

.container {
  display: flex;
}

.row {
  border: 1px solid black;
  cursor: pointer;
  display: flex;
}

.row:hover .icon {
  display: flex;
}

.icon {
  display: none;
}

<div class="container">
  <div class="row">
    <div class="text">This is my div. When it is hovered, I dont want it to change width and height because of the icon.</div>
    <div class="icon"><img src="http://i.imgur.com/NpIpU3F.png"></div>
  </div>
</div>

在CodePen …

我正在使用@ angular/cli @ 1.4.3.

在构建之前,我正在使用gulp-postcss来自动修复我的CSS.它是一种享受.以下是它创建的CSS示例(为了便于阅读而未缩小):

form.registration-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

完善!但是当CLI构建应用程序时,创建的CSS看起来像这样:

form.registration-form {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}

注意它的HALF是如何丢失的!？:/

我很困惑,任何帮助,我将永远感激不尽!

干杯!

我有一个<img>右边的面板,其中包含一个控件标题和一长串项目.所以我有一个嵌套的flexbox情况:

.container (flex)
 -> .child img
 -> .child controls panel (flex)
  -> .controls
  -> .content-wrapper scrolling list

在一个非常基本的层面上,两个并排面板很容易,是一个简单的flex align-items: stretch... https://codepen.io/neekfenwick/pen/MOxYxz

在这个基本级别上,如何保持两个并排相同高度的div是一个重复的问题？.

一旦右侧的面板与垂直滚动列表变得更加复杂,我无法看到如何使其父级的高度,第二个.child与第一个的高度相匹配.child. https://codepen.io/neekfenwick/pen/XzGJGw

+-------------+---------------+
|             |  Controls     |
| Left child  |               |
|             +---------------+
|             |              A|
|             | Vertically   |+
|             | scrolling    ||
|             | items        ||
|             |              |+
|             |              V|
+-------------+---------------+

我已经阅读了具有可滚动内容的Flexbox项目,但这解决了水平滚动问题,而不是像这样的垂直布局.另外,带滚动区域的嵌套弹性框处理垂直堆叠的嵌套弹性框,我认为这种组合row和column方向混淆了我的情况.

作为代码段:

.container …

我正在使用flexbox css制作一个带有多个 div 的容器来水平滚动，但问题是当我尝试向容器添加更多 div 时，它移动到左侧并且显示左侧的 div 被隐藏。

我不明白这里发生了什么是代码片段和代码笔

.scroll{
  display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: space-evenly;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
  flex: 0 0 auto;
  background: #e4e4e4;
  width: 150px;
  height: 150px;
  margin: 10px;
}

<div class="scroll">
  <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div>
</div>

谢谢

我需要将 div 内的元素对齐到末尾。正如我从 Bootstrap 的文档中了解到的，我应该使用 d-flex 和 align-items-end。当我应用它时，它会将元素粘在底部，但它也会将它们分成几列。我不想要那样。

我需要做什么来修复它？

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="col-5">
    <div class="card">
      <div class="card-body text-left d-flex align-items-end">
        <a href="#" class="card-link">Link</a>
        <a href="#" class="card-link">Link</a>
        <h5 class="card-title">Title</h5>
        <p class="card-text">Text goes here</p>
        <a href="#" class="btn">Button</a>
        <a href="#" class="btn">Button</a>
      </div>
    </div>
  </div>
</div>

我在获取我认为是在 react-native 中实现的简单布局时遇到了一些麻烦。

基本上我需要连续两个视图，他们的父母有justifyContent: 'space-between'.

在第一个视图上有两个文本组件，其中一个在增长时必须有一个省略号。

我所期望的：

相反，我得到的是该文本组件溢出：

    <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>

      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Text>AVATAR</Text>
        <View style={{ marginHorizontal: 15 }}>
          <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
        </View>
      </View>

      <View>
        <Text>9,999,999,999.99</Text>
      </View>

    </View>

一个可以玩的沙盒示例：https : //snack.expo.io/HkeFQbyvf