Flex布局左右两边的布局

[wangtiantian23]

 <div class="div" >
            <text class="label">左侧文字</text>
            <text class="label">右侧文字</text>
        </div>

    .div{
        display: flex; /* 弹性布局 */
        margin-top: 10px;
        justify-content: space-between; /* 横向中间自动空间 */

    }

试了很多方法都无法实现，求各位大神赐教。

[wangtiantian23]

在线等。需要文字在屏幕两端。

[jio可]

<div class="div" >
    <text class="label">左侧文字</text>
    <text></text>
    <text class="label">右侧文字</text>
</div>

 .div {
    width: 100%;
    display: table;
  }
  .div text{
    display: table-cell;
  }
  .div .label {
    width: 100px;
  }

不然就写左浮动右浮动

[wangtiantian23]

https://my.csdn.net/u012418098 @三岁打酱油 左浮动右浮动怎么写。 这个布局不能用flex吗？

[jio可]

你上面贴的代码是左右布局的，浏览器不兼容？左右浮动就是使用float:left/right; position定位也可以实现

<div class="div" >
    <text class="left">左侧文字</text>
    <text class="middle"></text>
    <text class="right">右侧文字</text>
</div>

.div {
    width: 100%;
    display: flex;
  }
  .div .middle{
    flex: 10;
  }
  .div .left, .div .right {
    flex: 2;
  }
  .div .right {
    text-align: right;
  }

[wangtiantian23]

    .div{
        flex-direction: row;
        align-items: center;
        height: 60px;
        padding-left: 30px;
        padding-right: 30px;
        justify-content: space-between;
    }

解决了。这样设置就好了。

[huangfuyk]

flex-direction，加个主轴方向？

[console.log( )]

宽度都没有，怎么布局？

[Han185098981]

建议用浮动，一个左浮动，一个右浮动。