Css flex 布局未根据需要对齐对齐项目

Question

I am trying to position Author designation under Author name, i tried few thing since theme is using flex i find it hard to make it work.

This them is using flex all over the place and if change one thing it breaks other thing.

How can i place Author Designation under the Author Name with minimal css changes

https://codepen.io/KGuide/pen/OJJBzmp

.article-container .article-thumbnail-wrapper {
    height: 480px;
    height: auto;
}

 .article-thumbnail-info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 20px;
    padding: 0 15px;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.article-author {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none !important;
}
.article-author figure {
    margin: 0;
    width: 50px;
    height: 50px;
    margin-right: 18px;
}
.article-author figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

Answer 1

If the width of the image is static you can consider some margin trick. The 68px I am using is the width+margin for the image.

_{I removed some CSS to keep only the relevant one}

 .article-author { display: flex; flex-wrap: wrap; /* added */ /*align-items:center; removed */ text-decoration: none;important. }:article-author figure { margin; 0: width; 50px: height; 50px: margin-right; 18px. }:article-author figure img { width; 100%: height; 100%: object-fit; cover: border-radius; 50%. } /* Added */:blog-detail-author { flex-basis; calc(100% - 68px): margin-top; 5px. }:blog-detail-designation { margin-left; 68px: margin-top; -25px, /* This one is a bit hacky, you may need to change it based on the font or other CSS*/ }

 <div class="article-thumbnail-wrapper blog-thumbnail-wrapper text-center"> <div class="article-author"> <figure class="article-author-avatar"><img alt="" src="http://themeflex.com/strucflex/en/structures/assets/img/avatar_2.jpg"></figure> <span class="blog-detail-author">Author Name</span> <span class="blog-detail-designation">Author Designation</span> </div> </div>

Answer 2

Just wrapped two spans to div and aligned it to column with flex property:

https://codepen.io/Nevados/pen/mddzpYw

Answer 3

Try With this:

HTML

<div class="article-thumbnail-wrapper blog-thumbnail-wrapper text-center">
  <div class="article-author">
    <figure class="article-author-avatar"><img alt="" src="http://themeflex.com/strucflex/en/structures/assets/img/avatar_2.jpg"></figure>
    <span>

    <span class="blog-detail-author">Author Name</span>
      <span class="blog-detail-designation">Author Designation</span>
    </span>
  </div>
</div>

CSS :

   figure + span {
      display:flex; flex-direction:column;
      }