How to directly align elements under each other using flex direction?

user_19361752 0
Viewed 89

As you can see in the code snippets below when the size of the web page reaches 776px it becomes column like aligned but it isn't directly aligned under each other. I have added the align-items property, How do I directly align the elements under each other? 

.banner-content-container {
  display: flex;
  justify-content: space-evenly;
  padding-top: 200px;
}

@media screen and (max-width:776px) {
  .banner-content-container {
    align-items:center;
    flex-direction: column;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="banner-content-container">
    <div class="content contexts1">
      <h3>01. Mobile conductive</h3>
      <p>Smart optimization of RWD design.</p>
    </div>
    <div class="content contexts2">
      <h3>02. User Interface</h3>
      <p>Brilliant UI/UX creative designs.</p>
    </div>
    <div class="content contexts3">
      <h3>03. Affordable</h3>
      <p>Our offers dont break the bank.</p>
    </div>
  </div>
</body>

</html>

css
4 Answers

You could use the align-text attribute in this case:

.banner-content-container {
  display: flex;
  justify-content: space-evenly;
  padding-top: 200px;
}

@media screen and (max-width:776px) {
  .banner-content-container {
    text-align: center; /* changed this line */
    flex-direction: column;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="banner-content-container">
    <div class="content contexts1">
      <h3>01. Mobile conductive</h3>
      <p>Smart optimization of RWD design.</p>
    </div>
    <div class="content contexts2">
      <h3>02. User Interface</h3>
      <p>Brilliant UI/UX creative designs.</p>
    </div>
    <div class="content contexts3">
      <h3>03. Affordable</h3>
      <p>Our offers dont break the bank.</p>
    </div>
  </div>
</body>

</html>

Or if you want them centered but justified on the left, you can set the width of the container to fit-content, then center the whole container by setting margin: 0 auto;:

.banner-content-container {
  display: flex;
  justify-content: space-evenly;
  padding-top: 200px;
}

@media screen and (max-width:776px) {  
  .banner-content-container {
    width: fit-content;
    margin: 0 auto;
    flex-direction: column;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="banner-content-container">
    <div class="content contexts1">
      <h3>01. Mobile conductive</h3>
      <p>Smart optimization of RWD design.</p>
    </div>
    <div class="content contexts2">
      <h3>02. User Interface</h3>
      <p>Brilliant UI/UX creative designs.</p>
    </div>
    <div class="content contexts3">
      <h3>03. Affordable</h3>
      <p>Our offers dont break the bank.</p>
    </div>
  </div>
</body>

</html>

user_175163940

Setting a fixed width would solve this, but it can be problematic if your content size is variable.

As an alternative, you can add another container (.demo in this example) to avoid having to specific any width. Here we centre the content with the outer container, and left align the content in the new inner flex container:

.banner-content-container {
  display: flex;
  padding-top: 200px;
  justify-content: center;
}

.demo {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

@media screen and (min-width:776px) {
  .demo {
    flex-direction: row;
    width: 100%;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="banner-content-container">
    <div class="demo">
      <div class="content contexts1">
        <h3>01. Mobile conductive</h3>
        <p>Smart optimization of RWD design.</p>
      </div>
      <div class="content contexts2">
        <h3>02. User Interface</h3>
        <p>Brilliant UI/UX creative designs.</p>
      </div>
      <div class="content contexts3">
        <h3>03. Affordable</h3>
        <p>Our offers dont break the bank.</p>
      </div>
    </div>

  </div>
</body>

</html>

user_87082010

The reason is that they are centered but have different width. The quick fix for this is to set the same width when they are in flex column mode.

@media screen and (max-width:776px) {
  .banner-content-container {
    align-items: center;
    flex-direction: column;
  }
  .content {
    width: 250px;
  }
}
user_26146460 
display:flex;
flex-direction: column;

Should be together in your media query. Because by default, display:flex is a row.

user_193975440
Related