[css] 第159天 用css怎么实现两端对齐？

[haizhilin2013]

第159天 用css怎么实现两端对齐？

[LinStan]

1、flex 中的justify-context 设置为 space-between
2、设置text-align:justify即可，之前网上是说这个对单行不生效，因此要text-align-last，但是今天试了一下，发现是生效的，并且chrome浏览器也有效

[vkboo]

• 文本的两端对齐

  <style>
      .form .text {
          display: inline-block;
          width: 65px;
          text-align-last: justify;
      }
  </style>
  <div class="form">
      <div>
          <span class="text">用户名</span>
          <input type="text">
      </div>
      <div>
          <span class="text">密码</span>
          <input type="text">
      </div>
  </div>

• 元素的两端对齐

      <style>
          .wrap {
              width: 100px;
              height: 100px;
              border: 1px solid;
              display: flex;
              justify-content: space-between;
          }
  
          .wrap > div {
              width: 20px;
              height: 20px;
          }
          .a {
              background: red;
          }
          .b {
              background: blue;
          }
      </style>
      
      <div class="wrap">
          <div class="a"></div>
          <div class="b"></div>
      </div>

[forever-z-133]

1. 文本的两端对齐，用 text-align-last 或 :before 模拟成多行然后 text-align: justify
2. 子元素的两端对齐，用 float 或 flex 或 grid 皆可

预览：
https://foreverz133.github.io/demo-preview/#/./pages/text-align-justify
https://foreverz133.github.io/demo-preview/#/./pages/child-align-justify

[Konata9]

• 对于文字，利用 text-align-last:justify; 实现文字的两端对齐
• 对于元素，利用 flex 和 float 实现元素的两端对齐

示例代码： https://codepen.io/Konata9/pen/GRKeroR?editors=1100

[lwl0812]

• 对于文字，利用 text-align-last:justify; 实现文字的两端对齐
• 对于元素，利用 flex 和 float 实现元素的两端对齐

示例代码： https://codepen.io/Konata9/pen/GRKeroR?editors=1100

float 只能针对两个元素的，多个元素的不行吧

[Simp1ezZz]

css2怎么来实现呢，有大佬知道的吗