Выравнивание элементов формы по нижнему краю блока flexbox, но с сохранением текста вверху - PullRequest
Новая
       3

Выравнивание элементов формы по нижнему краю блока flexbox, но с сохранением текста вверху

1 голос
/ 06 мая 2020

Я новичок в этом, но я пытаюсь собрать страницу, которая немного выше моего уровня заработной платы, и, похоже, она работает достаточно хорошо, но я не могу понять, как получить 'input', чтобы оставаться внизу гибкого поля, а текст и изображение - вверху. У меня такое чувство, что это проблема иерархии или родитель / потомок, но я не могу понять это. До сих пор я перепробовал все, что умею, но вот где я сейчас ...

Я создал отдельный «DIV ID» со своим собственным набором правил для ввода, в которых указано, что input) s) должен: "align-self: flex-end;" Все еще не работает .. Любые идеи были бы очень признательны! 

body {
  background-color: #faf8ed;
}

.header {
  background-color: black;
  padding: 21px;
  border-radius: 25px;
}

img {
  max-width: 100%;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  display: block;
}

h1 {
  font-family: 'Modak', cursive;
  font-variant: small-caps;
  letter-spacing: 2px;
  text-align: center;
  font-weight: normal;
}

p {
  font-family: 'Amatic SC', cursive;
  font-weight: bold;
  font-size: 16px;
}

#container1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  height: 100%;
  align-items: stretch;
  padding-top: 37px;
}

#one {
  border: 1px solid beige;
  font-family: Arial;
  font-size: .75em;
  padding: 10px;
  width: 200px;
  margin-left: 7px;
  margin-right: 7px;
  margin-top: 7px;
  margin-bottom: 7px;
  border-radius: 25px;
  background-color: beige;
}

#bottom {
  display: flex;
  align-self: flex-end;
}

.zoom {
  transition: transform .3s;
  /* Animation */
  margin: 0 auto;
}

#quantity {
  display: flex;
  font-family: Arial;
  font-size: 1.5em;
  font-family: 'Amatic SC', cursive;
  font-weight: bold;
  text-align: center;
  padding-right: 3px;
}

#buy {
  display: flex;
  font-family: Arial;
  font-size: 1.5em;
  font-family: 'Amatic SC', cursive;
  font-weight: bold;
  border-radius: 7px;
}
<div id="container1">
  <div id="one" class="zoom">
    <h1>KING GIZZARD ROCKS!</h1>
    <img src="tshirt_2.jpg">
    <p>
      This is the text for this shirt!
    </p>
    <form action="">
      <div id="bottom">
        <label for="quantity" id="quantity">Quantity:</label>
        <input type="number" name="quantity" min="1" max="30" placeholder="0">
        <br>
        <input type="submit" id="buy" value="BUY">
    </div><!--bottom-->
    </form>
    </div><!--one-->
    <div> <!--container-->

1 Ответ

0 голосов
/ 07 мая 2020

align-self: flex-end будет работать, если родительский элемент был гибким контейнером (т.е. родитель имел display: flex или display: inline-flex). Но в этом случае родительский элемент (form) не является гибким контейнером, поэтому дочерние элементы будут игнорировать свойства гибкости.

Свойства Flex работают только между родительскими и дочерними элементами. Подробнее о возможностях гибкого макета читайте здесь: Правильное использование свойств гибкости при вложении гибких контейнеров

Не меняя HTML (что можно было бы сделать более эффективным), вы могли бы добиться желаемый макет, сделав элемент #one гибким контейнером в направлении столбца и применив автоматические поля к элементу формы.

В приведенном ниже примере я также удалил много ненужных код (по крайней мере, для демонстрационных целей). 

#container1 {
  display: flex;
  /* flex-direction: row; */
  /* flex-wrap: wrap; */
  justify-content: center;
  height: 100vh; /* adjustment */
  /* align-items: stretch; */
  /* padding-top: 37px; */
}

/* .header {
  background-color: black;
  padding: 21px;
  border-radius: 25px;
} */

#one {
  /* border: 1px solid beige; */
  font-family: Arial;
  font-size: .75em;
  padding: 10px;
  width: 200px;
  /* margin-left: 7px; */
  /* margin-right: 7px; */
  /* margin-top: 7px; */
  /* margin-bottom: 7px; */
  /* border-radius: 25px; */
  background-color: beige;
  display: flex; /* new */
  flex-direction: column; /* new */  
}

img {
  max-width: 100%;
  /* flex-wrap: wrap; */
  /* margin-left: auto; */
  /* margin-right: auto; */
  /* margin-top: auto; */
  /* margin-bottom: auto; */
  /* display: block; */
}

h1 {
  font-family: 'Modak', cursive;
  font-variant: small-caps;
  letter-spacing: 2px;
  text-align: center;
  font-weight: normal;
  margin-top: 0; /* new */
}

p {
  font-family: 'Amatic SC', cursive;
  font-weight: bold;
  font-size: 16px;
}

form {
  margin-top: auto; /* new */
}

#bottom {
  display: flex;
  /* align-self: flex-end; */
}

.zoom {
  transition: transform .3s;
  /* Animation */
  margin: 0 auto;
}

#quantity {
  display: flex;
  font-family: Arial;
  font-size: 1.5em;
  font-family: 'Amatic SC', cursive;
  font-weight: bold;
  text-align: center;
  padding-right: 3px;
}


#buy {
  display: flex;
  font-family: Arial;
  font-size: 1.5em;
  font-family: 'Amatic SC', cursive;
  font-weight: bold;
  border-radius: 7px;
}

body {
  background-color: #faf8ed;
  margin: 0; /* new */
}

* {
  box-sizing: border-box;
}
<div id="container1">
  <div id="one" class="zoom">
    <h1>KING GIZZARD ROCKS!</h1>
    <img src="http://i.imgur.com/60PVLis.png">
    <p>This is the text for this shirt!</p>
    <form action="">
      <div id="bottom">
        <label for="quantity" id="quantity">Quantity:</label>
        <input type="number" name="quantity" min="1" max="30" placeholder="0">
        <br>
        <input type="submit" id="buy" value="BUY">
      </div><!--bottom-->
    </form>
    </div><!--one-->
  <div><!--container-->

jsFiddle demo

...