Flutter中如何为三个指定文本设置左、右、居中不同对齐方式？

以下是几种实现需求的常用方案，你可以根据项目技术栈和场景选择：

方案一：基础CSS块级布局（最简单直观） #

利用块级元素默认占满父容器宽度的特性，直接通过text-align控制文本对齐：

<div class="news-container">
  <div class="news-title">News-Title 示例内容</div>
  <div class="news-date">2024-05-20</div>
  <div class="news-description">这是新闻的描述内容，用来展示详细信息</div>
</div>

.news-title {
  text-align: left;
}
.news-date {
  text-align: right;
}
.news-description {
  text-align: center;
}

这种方案无需复杂布局属性，兼容性最好，适合基础静态场景。

方案二：Flex布局（灵活可控） #

通过Flex布局的align-self属性精准控制每个子元素的水平对齐：

<div class="news-container">
  <div class="news-title">News-Title 示例内容</div>
  <div class="news-date">2024-05-20</div>
  <div class="news-description">这是新闻的描述内容，用来展示详细信息</div>
</div>

.news-container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}
.news-title {
  align-self: flex-start; /* 左对齐 */
}
.news-date {
  align-self: flex-end; /* 右对齐 */
}
.news-description {
  align-self: center; /* 居中对齐 */
}

适合需要后续扩展布局（比如添加侧边元素、调整间距）的场景，灵活性更强。

方案三：Grid布局（简洁现代） #

利用Grid布局的justify-self属性快速实现对齐：

<div class="news-container">
  <div class="news-title">News-Title 示例内容</div>
  <div class="news-date">2024-05-20</div>
  <div class="news-description">这是新闻的描述内容，用来展示详细信息</div>
</div>

.news-container {
  display: grid; /* 默认垂直排列子元素 */
}
.news-title {
  justify-self: start; /* 左对齐 */
}
.news-date {
  justify-self: end; /* 右对齐 */
}
.news-description {
  justify-self: center; /* 居中对齐 */
}

代码最简洁，适合现代浏览器环境，布局逻辑清晰。

内容的提问来源于stack exchange，提问作者Shalu Rathee