将 span 元素放置在 2 个 flexbox 行元素下的最佳方法是什么答案

【问题标题】：What is the best way to position span element under 2 flexbox row elements将 span 元素放置在 2 个 flexbox 行元素下的最佳方法是什么
【发布时间】：2021-11-28 22:04:22
【问题描述】：

这是我的 HTML -

<div className={classes['container']}>
    <div className={classes['svgContainer']}>
        <AuthSvg />
    </div>
    <div className={classes['formContainer']}>
        <form className={classes['form']} onSubmit={props.submitHandler}>
            <h1 className={classes['form__header']}>Join our website</h1>
            <Input />
            <div className="btnwrapper">
                <button className={classes['form__button']} type='submit'>
                    Register
                </button>
            </div>
        </form>
    </div>
    <span className={classes['text']}>Already have an account? <a>Click Here</a></span>
</div>

编译的 CSS -

@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  box-sizing: border-box;
}

html {
  height: 100vh;
  width: 100vw;
  height: -webkit-fill-available;
  width: -webkit-fill-available;
  font-size: 10px;
}

body {
  direction: rtl;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Rubik", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  height: 100%;
  display: flex;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

img {
  vertical-align: middle;
}

p {
  margin: 0;
}

h1 {
  margin: 0;
}

h2 {
  margin: 0;
}

h3 {
  margin: 0;
}

h4 {
  margin: 0;
}

h5 {
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
}

button {
  outline: none;
  border: none;
  padding: 0;
  background-color: transparent;
  user-select: none;
}

button:enabled {
  cursor: pointer;
}

a {
  cursor: pointer;
}

input {
  outline: none;
  border: none;
}

textarea {
  outline: none;
  border: none;
}

mark {
  padding: 4px;
}

menu {
  padding: 0;
}

hr {
  border: none;
  margin: 0;
}

所以，有一个 'container' 类，它是 flexbox: row。在类里面有'svgContainer'类和'formContainer'。我想在“formContainer”类下面添加“文本”类，最好的方法是什么？ ..................................................... ..................................................... .

【问题讨论】：

可以分享编译好的css吗？
@SatoTakeru 添加了，如果你喜欢这里是 github，谢谢！ github.com/daniel-bar/movies-app
您是否有特定的原因要使用 (inline) 而不是使用作为块元素的
标签，并且可以在不使用 flex 的情况下为您提供所需的布局？
@nontechguy 不，我可以使用 p 标签

标签： html css reactjs sass

【解决方案1】：

因此，如果我理解正确，您的布局如下。

你会喜欢这个

有很多方法可以实现您想要的。用 display flex 将 .svgContainer 和 .formContainers 包裹在一个 div 中会给你 flex-direction 行。然后 .innerContainer 和 .spanContainer 将表现得像普通的块级元素和堆栈。

HTML

<div class="outerContainer">
    <div class="innerContainer">
        <div class="svgContainer">.svgContainer</div>
        <div class="formContainer">.formContainer</div>
    </div>
    <div class="spanContainer"><span>span</span><div>
</div>

css

.outerContainer{
  background-color:#fff;
  padding:10px;
}
.innerContainer{
  display:flex;
  background-color:#04B2D9;
  padding:10px;
}
.svgContainer{
  color:#BF5B04;
  background-color:#F28705;
  border:1px solid #592202;
  padding:10px;
}
.formContainer{
  color:#F28705;
  background-color:#BF5B04;
  padding:10px;
  border:1px solid #592202;
}
.spanContainer{
  padding:10px;
}
span{
  color:#F2B84B;
  background-color:#592202;
  padding:10px;
}

在这里编写代码 https://codepen.io/non_tech_guy/pen/xxLxLdE

【讨论】：