如何制作4列包含图像和文字的列，以及如何在同一行中为每列设置链接？

Question

我正在基于PSD文件创建网站。我想使用Flexbox布局创建网站。

我不知道如何在flexbox中制作4列才能很好地包装。

我想在图像上做类似的事情：

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
}

.resources {
  background-color: #a2ca28;
}

.info {
  padding-top: 40px;
  padding-bottom: 40px;
}

.info > * {  
  flex-basis: 20%;
  padding: 20px;
}

.info article img {
  height: 4em;
}

.info article h2 {
  font-size: 24px;
  font-weight: 400;
  line-height: 54.1px;
}

.info article p {
  font-family: "Proxima Nova";
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

 <section class='resources'>
            <div class='container info'>
                    <article>
                        <img src="./images/resources.png" >
                        <h2>Resources</h2>
                        <p>Donec porttitor augue sit amet est posuere facilisis. Pellentesque 
                            habitant morbi tristique senectus et netus et malesuada fames ac 
                            turpis egestas. Fusce malesuada ipsum augue, quis viverra orci ultricies 
                            at. Etiam commodo purus nisi. Aenean vestibulum mi in mi consequat, vel semper orci efficitur.</p>
                            <a href='#'>Explore more</a>
                    </article>
                    <article>
                        <img src="./images/trainingfunding.png" >
                        <h2>Training &#38; Funding </h2>
                        <p>Quisque vel ultrices elit. Phasellus nunc libero, dictum id purus a, 
                            semper volutpat arcu. Integer pretium, tortor at facilisis sollicitudin, 
                            ex velit faucibus dolor, ut finibus dolor neque at odio.</p>
                            <a href='#'>Explore more</a>
                    </article>
                    <article>
                        <img src="./images/connect.png" >
                        <h2>Connect</h2>
                        <p>Quisque quis nulla dignissim, consectetur libero sed, semper risus. 
                            Quisque tincidunt, elit sit amet volutpat tincidunt, velit dolor 
                            varius nisl, ut tristique orci diam et elit. Nam congue sem nunc, 
                            ac fermentum leo consectetur in. </p>
                            <a href='#'>Explore more</a>
                    </article>
                    <article>
                        <img src="./images/communicate.png" >
                        <h2>Communicate</h2>
                        <p>Maecenas sit amet felis et leo consectetur efficitur. 
                            Vestibulum gravida felis nec malesuada pulvinar.</p>
                        <a href='#'>Explore more</a>
                    </article>
            </div>
        </section>

Answer 1

添加/更新了以下样式

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
}    

.container article {
  width: 25%;
  padding: 10px;
  position: relative;
}

article a {
  position: absolute;
  bottom: 0;
}

@media (max-width: 900px) {
  .container article {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .container article {
    width: 100%;
  }
}

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
}

.resources {
  background-color: #a2ca28;
}

.info {
  padding-top: 40px;
  padding-bottom: 40px;
}

.container article {
  width: 25%;
  padding: 10px;
  position: relative;
}

article a {
  position: absolute;
  bottom: 0;
}

.info article img {
  height: 4em;
}

.info article h2 {
  font-size: 24px;
  font-weight: 400;
  line-height: 54.1px;
}

.info article p {
  font-family: "Proxima Nova";
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

@media (max-width: 900px) {
  .container article {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .container article {
    width: 100%;
  }
}

<section class='resources'>
  <div class='container info'>
    <article>
      <img src="./images/resources.png">
      <h2>Resources</h2>
      <p>Donec porttitor augue sit amet est posuere facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce malesuada ipsum augue, quis viverra orci ultricies at. Etiam commodo purus nisi. Aenean vestibulum
        mi in mi consequat, vel semper orci efficitur.</p>
      <a href='#'>Explore more</a>
    </article>
    <article>
      <img src="./images/trainingfunding.png">
      <h2>Training &#38; Funding </h2>
      <p>Quisque vel ultrices elit. Phasellus nunc libero, dictum id purus a, semper volutpat arcu. Integer pretium, tortor at facilisis sollicitudin, ex velit faucibus dolor, ut finibus dolor neque at odio.</p>
      <a href='#'>Explore more</a>
    </article>
    <article>
      <img src="./images/connect.png">
      <h2>Connect</h2>
      <p>Quisque quis nulla dignissim, consectetur libero sed, semper risus. Quisque tincidunt, elit sit amet volutpat tincidunt, velit dolor varius nisl, ut tristique orci diam et elit. Nam congue sem nunc, ac fermentum leo consectetur in. </p>
      <a href='#'>Explore more</a>
    </article>
    <article>
      <img src="./images/communicate.png">
      <h2>Communicate</h2>
      <p>Maecenas sit amet felis et leo consectetur efficitur. Vestibulum gravida felis nec malesuada pulvinar.</p>
      <a href='#'>Explore more</a>
    </article>
  </div>
</section>