Я не мог найти свою ошибку около 40 минут. Я хотел расположить некоторые элементы, поля ввода и т. Д., Используя height и display: flex, flex-direction: column и justify-content: space-between. Базовые вещи, вот код

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    font-family: 16px/1.2 "Montserrat", sans-serif;
    box-sizing: border-box;
}

.content {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to right top, #01dbde, #00cfff, #00b8ff 20%, #6a8cff, #fc00ff 100%);
}

form {
    background: #fff;
}

.border-curve {
    border-radius: 0.2em;
    overflow: hidden;
}

fieldset {
    border: none;
    margin: 3em 5em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 32rem;
}

.form-title {
    text-align: center;
    font-size: 2.5rem;
}

.form-social {
    display: flex;
    justify-content: space-between;
}

.form-social button {
    flex: 0 0 48%;
}

.form-field {
}

.form-action {
}

.form-field label,
.form-field input,
.form-action input {
    width: 100%;
    display: block;
}

.form-action input {
    border: 0.2em solid #333;
    background: #333;
    color: #fff;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Funny Login Form</title>
        <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="content">
            <form action="#" method="GET" class="border-curve">
                <fieldset>
                    <p class="form-title">Sign In With</p>

                    <p class="form-social">
                        <button class="border-curve">Facebook</button>
                        <button class="border-curve">Google</button>
                    </p>

                    <p class="form-field">
                        <label for="username">Username</label>
                        <input class="border-curve" type="text" name="username" id="username" />
                    </p>

                    <p class="form-field">
                        <label for="password">Password</label>
                        <input class="border-curve" type="password" name="password" id="password" />
                    </p>

                    <p class="form-action">
                        <input class="border-curve" type="submit" value="Sign in" />
                    </p>
                </fieldset>
            </form>
        </div>
    </body>
</html>

У меня вопрос: почему я не могу разместить свои элементы в наборе полей тегов с помощью flexbox?

0
Lyubosumaz 9 Окт 2020 в 02:08

2 ответа

Лучший ответ

<fieldset> является элементом кнопки, поэтому к нему нельзя применить display: flex. Попробуйте поместить div в свой набор полей, который будет содержать все элементы вашей формы как дочерние, а затем примените к нему display: flex.

HTML:

 <fieldset>
        <div class="fieldset-content">
            <div>
                <p class="form-title">Sign In With</p>
            </div>
            <div>
                <p class="form-social">
                    <button class="border-curve">Facebook</button>
                    <button class="border-curve">Google</button>
                </p>
            </div>
            <div>
                <p class="form-field">
                    <label for="username">Username</label>
                    <input class="border-curve" type="text" name="username" id="username" />
                </p>
            </div>
            <div>
                <p class="form-field">
                    <label for="password">Password</label>
                    <input class="border-curve" type="password" name="password" id="password" />
                </p>
            </div>
            <div>
                <p class="form-action">
                    <input class="border-curve" type="submit" value="Sign in" />
                </p>
            </div>
        </div>
    </fieldset>

Теперь, когда у вас есть элементы гибкости внутри контейнера, к которому вы можете применить гибкость, вы можете добавить все желаемые свойства гибкости.

CSS:

.fieldset-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
0
paul-schultz 9 Окт 2020 в 00:37

https://developer.mozilla.org/en- US / docs / Web / HTML / Element / fieldset # Styling_with_CSS сообщает, что существует анонимное поле, в котором хранится содержимое набора полей. Этот анонимный блок унаследует отображаемое значение набора полей, но кажется, что другой стиль будет применен к самому тегу набора полей, а не к анонимному полю.

Если вы заключите текущее содержимое набора полей в контейнер div, вы можете стилизовать пространство между ними.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-family: 16px/1.2 "Montserrat", sans-serif;
  box-sizing: border-box;
}

.content {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to right top, #01dbde, #00cfff, #00b8ff 20%, #6a8cff, #fc00ff 100%);
}

form {
  background: #fff;
}

.border-curve {
  border-radius: 0.2em;
  overflow: hidden;
}

fieldset {
  border: none;
  margin: 3em 5em;
}

.fieldset-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 32rem;
}

.form-title {
  text-align: center;
  font-size: 2.5rem;
}

.form-social {
  display: flex;
  justify-content: space-between;
}

.form-social button {
  flex: 0 0 48%;
}

.form-field {}

.form-action {}

.form-field label,
.form-field input,
.form-action input {
  width: 100%;
  display: block;
}

.form-action input {
  border: 0.2em solid #333;
  background: #333;
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Funny Login Form</title>
  <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="content">
    <form action="#" method="GET" class="border-curve">
      <fieldset>
        <div class="fieldset-container">
          <p class="form-title">Sign In With</p>

          <p class="form-social">
            <button class="border-curve">Facebook</button>
            <button class="border-curve">Google</button>
          </p>

          <p class="form-field">
            <label for="username">Username</label>
            <input class="border-curve" type="text" name="username" id="username" />
          </p>

          <p class="form-field">
            <label for="password">Password</label>
            <input class="border-curve" type="password" name="password" id="password" />
          </p>

          <p class="form-action">
            <input class="border-curve" type="submit" value="Sign in" />
          </p>
        </div>
      </fieldset>
    </form>
  </div>
</body>

</html>
0
Sarah 9 Окт 2020 в 00:36