0

Здравствуйте! У меня не работает свойство align-content Вот на этом сайте работает. У меня не работает. Вот код.

* {
  margin: 0;
  padding: 0;
}
html {
  overflow-y: scroll;
}
.super {
  height: 600px;
  margin: 10px;
  border: 1px solid #F00;
}
.main {
  height: 100px;
  border: 1px solid #00F;
}
.a1,
.a2,
.a3 {
  height: 50px;
  width: 50px;
  padding: 10px;
  color: #FFF;
}
.a1 {
  background-color: #ff6600;
}
.a2 {
  background-color: #8ccb58;
}
.a3 {
  background-color: #2b689c;
}
.fl-container-wrap {
  /*многострочный режим*/
  flex-wrap: wrap;
  /*выравнивание по вертикали, работает только в многострочном режиме*/
  align-content: center;
}
.fl-container {
  display: flex;
  /*направление главной оси*/
  flex-direction: row;
  /*выравнивание по главной оси*/
  justify-content: flex-start;
  /*выравнивание по поперечной оси*/
  align-items: flex-start;
}
<div class="super fl-container-wrap">

  <div class="main fl-container">
    <div class="a1">1</div>
    <div class="a2">2</div>
    <div class="a3">3</div>
  </div>


  <div class="main fl-container">
    <div class="a1">1</div>
    <div class="a2">2</div>
    <div class="a3">3</div>
  </div>


  <div class="main fl-container">
    <div class="a1">1</div>
    <div class="a2">2</div>
    <div class="a3">3</div>

  </div>
</div>

Три блока должны быть по центру align-content: center;, а ничего не происходит.

введите сюда описание изображения

Если кто сталкивался с такой проблемой, подскажите. Заранее спасибо.

1 ответ 1

1

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  overflow-y: scroll;
}
.super {
  height: 600px;
  margin: 10px;
  border: 1px solid #F00;
}
.main {
  height: 200px;
  border: 1px solid #00F;
}
.a1,
.a2,
.a3 {
  height: 200px;
  width: 50px;
  padding: 10px;
  color: #FFF;
}
.a1 {
  background-color: #ff6600;
}
.a2 {
  background-color: #8ccb58;
}
.a3 {
  background-color: #2b689c;
}
.fl-container-wrap {
  display: flex;
  /*многострочный режим*/
  flex-flow: row wrap;
}
.fl-container {
  display: flex;
  width: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>New Страница</title>
  <link href="css/style.css" rel="stylesheet" />
</head>

<body>
  <div class="super fl-container-wrap">

    <div class="main fl-container">
      <div class="a1">1</div>
      <div class="a2">2</div>
      <div class="a3">3</div>
    </div>


    <div class="main fl-container">
      <div class="a1">1</div>
      <div class="a2">2</div>
      <div class="a3">3</div>
    </div>


    <div class="main fl-container">
      <div class="a1">1</div>
      <div class="a2">2</div>
      <div class="a3">3</div>

    </div>
  </div>
</body>

</html>

Второй пример

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  overflow-y: scroll;
}
.super {
  height: 600px;
  margin: 10px;
  border: 1px solid #F00;
}
.a1,
.a2,
.a3 {
  padding: 10px;
  color: #FFF;
}
.a1 {
  background-color: #ff6600;
}
.a2 {
  background-color: #8ccb58;
}
.a3 {
  background-color: #2b689c;
}
.fl-container-wrap {
  display: flex;
  flex-flow: row wrap;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>New Страница</title>
  <link href="css/style.css" rel="stylesheet" />
</head>

<body>
  <div class="super fl-container-wrap">
    <div class="a1">1</div>
    <div class="a2">Opportunity is missed by most people because it is dressed in overalls and looks like work.</div>
    <div class="a3">3</div>
    <div class="a1">1</div>
    <div class="a2">2</div>
    <div class="a3">Work is a necessary evil to be avoided.
Mark Twain</div>
    <div class="a1">1</div>
    <div class="a2">2</div>
    <div class="a3">3</div>
  </div>
</body>

</html>

7
  • Уважаемый stackanon, речь идет о многострочном режиме flex-wrap: wrap; и о выравнивании по вертикали в многострочном режиме свойством align-content: center; В своем вопросе я даже дал ссылку на сайт, где это показано.
    – Anton
    10 авг 2016 в 9:22
  • Могли бы вы приложить картинку, желаемого конечного результата? Ссылка на сайт не дает ясности.
    – stackanon
    10 авг 2016 в 9:28
  • @Anton у .fl_container поставьте align-items: center; и будут элементы у вас по центру по вертикали 10 авг 2016 в 9:29
  • @Anton изменил пример добавил .fl-container-wrap display: flex и flex-flow: column wrap;
    – stackanon
    10 авг 2016 в 9:34

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.