Как начать использовать flex? - PullRequest
Новая
       9

Как начать использовать flex?

0 голосов
/ 14 мая 2018

Я хочу, чтобы мои 'p' были выровнены по центру, и "#fname label" получит 1/3 пробела, а "#fname input" 2/3 и следующий ряд #mail будут такими же.

Сейчас все перемешано и в одном ряду

Мой кодовый блок и мой код: 

body,
html {
  height: 100%;
  margin: 0;
}


/* styles to make borders not take on extra space */

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  /* fix for the scrollbar push issue */
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
}


/* Browser style reset so they all play nice */

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
time,
mark,
audio,
video {
  font-size: 100%;
  margin: 0;
  padding: 0;
  outline: 0 none;
  vertical-align: baseline;
}


/* Now we Starting to code */

body {
  background-color: #F7FBCC;
}

#title {
  text-align: center;
  font-size: 40pt;
  color: #1A1A1A;
  font-family: 'Chivo', sans-serif;
  margin-top: 40px;
  margin-bottom: 40px;
}

.container {
  background-color: #fff;
  display: flex;
  flex-flow: row wrap;
  flex border-radius: 8px;
  box-shadow: 0px 2px 8px rgba(29, 31, 32, 0.2);
}

#description {
  color: #1a1a1a;
  flex: 1;
  justify-content: center;
  padding-top: 16px;
  margin-bottom: 40px;
}

#fname {
  display: flex;
  flex-flow: row wrap;
  margin-top: 40px;
  margin-left: 40px;
}

#fname label {
  flex: 1;
}

#fname input {
  flex: 2;
}

#mail {
  display: flex;
  flex-flow: row wrap;
  margin-top: 40px;
  margin-left: 40px;
}

#mail label {
  flex: 1;
}

#email input {
  flex: 2;
}
<head>

  <link href="https://fonts.googleapis.com/css?family=Chivo|Roboto" rel="stylesheet">

  <meta charset="UTF-8">

</head>

<header>
  <div id="title">
    <h1> Music - Survey Form </h1>
  </div>
</header>

<body>


  <form>

    <div class="container">

      <div id="description">
        <p> Let us know what kind of music you like</p>
      </div>

      <div id="fname">
        <label for="name"> Full Name: </label>
        <input type="text" id="name" placeholder="What's your name" required>

      </div>

      <div id="mail">
        <label for="email"> Email address: </label>
        <input type="text" id="email" placeholder="What's your email" required>

      </div>


      -->


    </div>
    <!-- Closing div-container -->
    </div>
</body>

ps

Если бы вы могли сказать мне, если есть строки, от которых я могу избавиться, скажите, пожалуйста,

Спасибо всем от продвинутого :)

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

вот переработанный код 

body {
  background-color: #F7FBCC;
  }


#title {
  text-align: center;
  font-size: 40pt;
  color: #1A1A1A;
  font-family: 'Chivo', sans-serif;
  margin-top: 40px;
  margin-bottom: 40px;
 }

.container {
  width: 100%;
  padding-right: 30px;
  padding-left: 30px;
  margin-right: auto;
  margin-left: auto;
  max-width: 660px;
}


#description {
  color: #1a1a1a;
  padding-top: 16px;
  margin-bottom: 40px;
  text-align: center;
}

#fname, #mail {
  width: 100%;
  margin: 0 auto;
  display: flex;
  margin-bottom: 20px;
}
label {
width:30%;
}
input {
  width: 70%;
}

Вы можете найти решение в codepen здесь

0 голосов
/ 14 мая 2018

Во-первых, кажется, что ваш контейнер может быть гибким макетом на основе столбцов, поскольку вы хотите, чтобы все складывалось. Единственные элементы, которые будут располагаться рядом, - это пара меток и входов, так что вы можете согнуть их. Разметка остается без изменений, и вы можете внести в CSS следующие изменения: 

.container {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 2px 8px rgba(29, 31, 32, 0.2);
}

#title {
  text-align: center;
  font-size: 40pt;
  color: #1A1A1A;
  font-family: 'Chivo', sans-serif;
  margin-top: 40px;
  margin-bottom: 40px;
}

#description {
  text-align: center;
  color: #1a1a1a;
  padding-top: 16px;
  margin-bottom: 40px;
}

#fname,
#mail {
  display: flex;
  margin-top: 40px;
  margin-left: 40px; 
 }

#fname label,
#mail label {
  width: 33%;
}

#fname input,
#mail input {
  width: 100%;
}

РЕДАКТИРОВАТЬ: Добавление альтернативы на основе ширины в процентах. Я решил использовать ширину в процентах, потому что вы просили, чтобы столбец был 1/3, и вообще, потому что я считаю, что он будет более читабельным. Хотя комбинация flex и flex-grow работает так же хорошо, но в целом я считаю, что проценты более читабельны и предсказуемы. 

#fname label,
#mail label {
  flex: 1;
}

#fname input,
#mail input {
  flex-grow: 2;
}

CodePen Вилка: https://codepen.io/88mpg/pen/PeBpmm

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...