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

Question

这是我的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' class 是 flexbox: 行。在 class 里面有 'svgContainer' class 和 'formContainer'。我想在 'formContainer' class 下方添加 'text' class，最好的方法是什么？ ..................................................... ..................................................... .

Answer 1

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

你会喜欢这个

有很多方法可以实现您想要的。将 .svgContainer 和 .formContainers 包装在 div 中并显示 flex 将为您提供 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

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

What is the best way to position span element under 2 flexbox row elements

html

css

sass

reactjs