【问题标题】：Create similar container to website创建与网站类似的容器
【发布时间】：2018-11-17 12:05:29
【问题描述】：

我尝试在我的网站上显示类似的内容：

3 个圆形图像彼此相邻对齐
每张图片下方的居中标题（“ready”、“add”、“zap”）
每张图片下方居中的内容文本（“Make your own ...”、“...”）
两个按钮位于三个图像宽度的中心

我很确定我必须使用display: flex，但是因为我对 flex 完全陌生，我真的不知道如何创建一个你可以看到的容器顶部的图像。

这是我目前得到的代码（它还没有完成，但我不知道如何继续） - 所以任何帮助都将不胜感激。 :)

.main {
  display: flex;
  flex-direction: column;
}

#container {
  display: flex;
  width: 100%;
}

#container>div {
  display: flex;
  flex-direction: column;
}


#container>div>img {
  max-width:80%;
}

<div class="main">
  <div id="container">
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod</p>
    </div>
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ull</p>
    </div>
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
    </div>
  </div>
</div>

【问题讨论】：

哦，是的。尝试删除并添加 margin: auto 属性。 @fcalderan
简单地把这个放在这里记录一下：这个布局可以使用或不使用 flexbox 来完成。弹性盒解决方案是首选路线。

标签： javascript html css flexbox

【解决方案1】：

基本上你必须为子 div 设置flex-basis 的百分比，并将它们与center 对齐。在这里，我使用类名item 执行此操作，并使用display:flex 和justify-content: space-between 设置父div。

注意：您也可以根据自己的方便使用space-around 而不是space-between。

html

<div class="container bxp">
 <div class="item item1">
  <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
  </div>
  <div  class="item item2">
  <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
  </div>
  <div  class="item item3">
  <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
  </div>
</div>

css

.bxp{
  max-width: 1000px;
  display:flex;
  margin:auto;
  justify-content:space-between;
}
.item{
  box-sizing:border-box;
  flex-basis: 30%;
  text-align: center;
}
img{
  width:100px;
}

【讨论】：

【解决方案2】：

要学习 flexbox，您可以使用这个有趣的免费游戏：https://flexboxfroggy.com/

.container{
display:flex;
flex-direction:row;/*put the items inside the container in a row*/
justify-content:space-around;/*items are separated with space*/
margin-top:10%;

}
figcaption {
text-align:center;
margin-top:5%;}

img{
width:200px;
border-radius:50%;

}
.column{

}

button{
display:block;/*because input tag are inline by default*/
width:48%;
margin-left:1%;
text-align:center;
background:green;
height:40px;

}

</head>
<body>
<div class="container">

  <div class="column">
    <img alt="" src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <figcaption>This is the heading 1</figcaption>
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <figcaption>This is the heading 1</figcaption>
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <figcaption>This is the heading 1</figcaption>
  </div>


</div>
<div class="container">
  <button type = "submit">button 1</button>
  <button type="submit">button 2</button>
<div>
</body>
</html>

【讨论】：

【解决方案3】：

因为 flex 只允许一个方向，所以你必须开始包裹你的元素，让它们随心所欲地对齐。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
  flex-direction: column;
}

#container {
  display: flex;
  width: 100%;
}

#container>div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#container>div>h3 {
  align-self: center;
}

#container>div>img {
  max-width: 100%;
}

.btns {
  display: flex;
}

.btns>button {
  flex: 1;
}

<div class="main">
  <div id="container">
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod</p>
    </div>
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ull</p>
    </div>
    <div>
      <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
      <h3>Heading 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
    </div>
  </div>
  <div class="btns">
    <button>Text</button>
    <button>Text again</button>
  </div>
</div>

Using CSS Grid

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

ul>li>img {
  max-width: 100%;
}

ul>li>h3 {
  text-align: center;
}

.btnsContainer {
  font-size: 0;
  grid-column: 1/4
}

.btnsContainer>button {
  width: 50%;
  font-size: 16px;
}

<ul>
  <li>
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h3>Heading 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod</p>
  </li>
  <li>
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h3>Heading 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ull</p>
  </li>
  <li>
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h3>Heading 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
  </li>
  <li class="btnsContainer">
    <button>Text</button>
    <button>Text again</button>
  </li>
</ul>

【讨论】：

嘿看起来是个不错的解决方案。 (+1) 你介意添加How to edit the size of the images 吗？如果我更改max-width property，所有看起来都超级损坏。会非常好，问候乔纳斯
max-width 意味着图像不会超出父级宽度，您仍然可以定义宽度，但如果超出父级宽度，则不会产生效果。

【解决方案4】：

我会将每一列包装在一个带有 text-align: center 的 div 中：

#container {
  display: flex;
  flex-direction: row;
  /* line up divs in a row (ie make the inner divs columns */
  flex-wrap: wrap;
  /* allows the columns to wrap to the next row */
  justify-content: space-between;
  /* adds space in between the columns that fit on the same line */
}

.column {
  flex-basis: 30%;
  /* 30% allows 5% space between each top row column */
  text-align: center;
  /* centre inner content of column */
}

.column img {
  max-width: 100%;
}

.context {
  flex-basis: 100%;
  padding: 1em 0;
  /* 48% allows 4% space between buttons */
  text-align: center;
}

.button {
  flex-basis: 48%;
  /* 48% allows 4% space between buttons */
  text-align: center;
  border: 1px solid black;
}

<div id="container">
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h1>This is the heading 1</h1>
    <p>some text below the heading!</p>
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h1>This is the heading 2</h1>
    <p>some text below the heading!</p>
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <h1>This is the heading 3</h1>
    <p>some text below the heading!</p>
  </div>
  <div class="context">lots of centered text can goe here or just delete this if not needed!</div>
  <div class="button left">button 1</div>
  <div class="button right">button 1</div>
</div>

【讨论】：

看起来是一个非常干净的解决方案，非常感谢。您介意在标题下方和按钮上方添加居中的上下文文本吗？ :)
好的 @Jonas - 只需在列 div 中添加更多文本

【解决方案5】：

类似这样的：

#container
{
  display: flex;
  justify-content: space-around;
}

#container .element
{
  text-align:center;
}

您还可以将“space-around”替换为“center”或“space-between”，并检查它是否更适合您的整体设计。

在一个单独的 div 中创建 3 个块（包含图像、标题、文本），并为它们添加一个类（上面的“元素”）。

【讨论】：

【解决方案6】：

你不需要flex 来实现这个结果。您必须使用正确的 HTML 结构然后应用样式。

您应该将每对 img 和 label 包装在 div 中。我给了它一个类名.sub。要将三个.sub 定位为等宽的三列，您可以在前两个上设置width: 30%，在最后一个上设置margin: auto。

将.sub的显示属性设置为inline-block就大功告成了：

.container {
  width: 100%;
  text-align: center;
}

.sub {
  display: inline-block;
  width: 30%;
  padding: 10px;
}

.sub > img {
  width: 100%;
}

sub:last-child {
  width: auto;
}

<div class="container">
  <div class="sub">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <div>This is the heading 1</div>
  </div>
  <div class="sub">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <div>This is the heading 2</div>
  </div>
  <div class="sub">
    <img src="https://i.pinimg.com/originals/fa/89/6c/fa896c405abec656a0c8516229fa55ad.jpg" />
    <div>This is the heading 3</div>
  </div>
</div>

【讨论】：

然而，当涉及到不同的屏幕尺寸时，这需要更加小心。除此之外它完美无缺