-1

Please have a look at this code:

<div class="parent">
  <header class="child-1">
    <h1 class="float-left">lorem...</h1>
    <div class="float-right">lorem...</div>
  </header>
  <div class="child-2">lorem...</div>
</div>

CSS looks like:

.parent {
  display: flex;
  align-items: center;
}

Applying this causes both child-1 and child-2 centered vertically in one line. I need that child-2 should start from line2, i.e., right below child-1.

Thanks in advance

javed
  • 1
  • 4

2 Answers2

0

Set the flex-direction:

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}
<div class="parent">
  <header class="child-1">
    <h1 class="float-left">lorem...</h1>
    <div class="float-right">lorem...</div>
  </header>
  <div class="child-2">lorem...</div>
</div>

Then you probably want to adjust the align-items as I'm assuming you don't actually want to center everything horizontally.

James Coyle
  • 9,922
  • 1
  • 40
  • 48
  • Setting flex-direction: column helps somewhat, but issue is that child-2 is dynamic, some time it appears in markup some times not. In case it appears then styling works as expected, but in case it doesn’t then child-1 is no more vertically centered – javed Feb 27 '19 at 09:46
  • Edited. You need to set `justify-content` to adjust the vertical alignment of a flex column. – James Coyle Feb 27 '19 at 09:49
  • Thanks, it solves the issue. Thanks a lot. But without height: 100% – javed Feb 27 '19 at 09:54
0
.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}
user8930932
  • 125
  • 1
  • 9
  • 1
    Would be great if you add some comments to your answer to help other people to understand it. One of the main purpose of this site is to learn from each other. – Cartucho Feb 27 '19 at 11:31
  • Thank your suggestion, my english is poor. I'm trying to improve my english skill. – user8930932 Feb 27 '19 at 16:52