相关疑难解决方法(0)

考虑flex容器的主轴和横轴:

                                                                                                                       ^{资料来源:W3C}

要沿主轴对齐flex项,有一个属性:

• justify-content

要沿横轴对齐flex项,有三个属性:

• align-content
• align-items
• align-self

在上图中,主轴是水平的,横轴是垂直的.这些是Flex容器的默认方向.

但是,这些方向可以很容易地与flex-direction财产互换.

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(横轴始终垂直于主轴.)

我在描述轴的工作方式时的观点是,任何一个方向似乎都没有什么特别之处.主轴,横轴,它们在重要性方面都是相同的,并且flex-direction可以方便地来回切换.

那么为什么横轴有两个额外的对齐属性呢？

为什么align-content并且align-items合并为主轴的一个属性？

为什么主轴没有justify-self属性？

这些属性有用的场景:

• 将flex项放在flex容器的角落
  #box3 { align-self: flex-end; justify-self: flex-end; }

• 制作一组flex项目align-right(justify-content: flex-end)但是让第一个项目对齐left(justify-self: flex-start)

  考虑带有一组导航项和徽标的标题部分.随着justify-self徽标可以左对齐,而导航项目保持最右边,整个事物平滑地调整("弯曲")到不同的屏幕尺寸.

• 在一排三个柔性物品中,将中间物品粘贴到容器的中心(justify-content: center)并将相邻的物品对齐到容器边缘(justify-self: flex-start …

我在尝试使用 MaterialUI 中的组件实现一些简单的事情时遇到了非常困难的情况Grid。具体来说，我想在一个布局行上将一个项目左对齐，将另一个项目右对齐。

我进行了广泛的搜索，但没有找到任何有效的解决方案。我尝试了很多建议，包括在组件中使用justifyContent和在 JSS 中，以及“推送”内容的技术。alignContentGridflex: 1

相关代码片段

尝试将<Typography>元素放在左侧，将元素<FormGroup>放在右侧：

<Container>
  <Grid container spacing={3}>
    <Grid className={classes.rowLayout}>
      // Goal is to align this to the LEFT
      <Grid item xs={6}>
        <Typography variant="h6" gutterBottom>Some Text</Typography>
      </Grid>
      // Goal is to align this to the RIGHT
      <Grid item xs={3}>
        <FormGroup>
          // Simple `Switch` button goes here
        </FormGroup>
      </Grid>
    </Grid>
  </Grid>
</Container>

MaterialUI JSS 样式：

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1, …

我的目标很简单，将p标签粘贴到自定义css卡的右侧，使其粘贴到左侧非常简单。

custom-text {
  margin-left: 30px;
}

为了更好地说明这一点

问题是我如何使这100美元始终坚持正确？并假设美元的价值变为5美元，如何使其始终在右边？

我可以用

custom-text-right {
    margin-left: 450px;
}

但是此解决方案无法扩展到其他值（我只是使用引导程序来提供信息）

HTML部分：

<h4>Price: <span class="dollar">$3.15</span></h4>