Question

我的flexbox容器有问题。我试过搜索我的问题，但找不到它是什么。

我的容器中的图像很大，正在从容器中溢出。

我尝试过使用.img { max-width:100% }，width，align-content: flex-start，但没有任何效果。

有谁可以告诉我我做错了什么？

也非常感谢大家以前和我这次帮助过我！

＆＃13;

body {
  background-color: #CCC;
  color: black;
  font-family: 'Raleway', sans-serif;
  font-size: 1em;
  display: flex;
  flex-direction: column;
  border-color: black;
  border-style: solid;
  border-width: 15px;
  margin: 0;
}

.header {
  align-items: center;
}

.logo {
  display: flex;
  font-size: 1.5em;
  font-family: 'sans-serif';
  color: black;
  text-decoration: none;
  margin: 80px auto 15px 20%;
}

.nav-bar {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 0 auto;
  justify-content: center;
  width: 250px;
  font-size: 1em;
}

li .col,
.decor {
  text-decoration: none;
  color: white;
  font-size: 1.2em;
  padding: 10px;
}

.col {
  list-style: none;
}

ul li a.selected,
.decor:hover {
  color: black;
}

.intro {
  display: flex;
  flex-wrap: wrap;
  margin: 35px auto 0 20%;
  max-width: 450px;
  justify-content: flex-start;
}

#wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 10px auto;
  justify-content: center;
  background-color: green;
  height: 500px;
  max-width: 900px;
}


}
#wrapper li {
  padding: 5px;
  background-color: red;
}

＆＃13;

<head>
  <meta charset="utf-8">
  <title>Project of Martin Wong | HTML, CSS and Javascript</title>
  <link href="css/normalize.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
  <link href="css/flexbox.css" rel="stylesheet">
</head>

<body>

  <!-- TOP HEADING LOGO AND NAV BAR-->
  <header class="header">
    <a href="index.html" class="logo">
      <h1>Martin Wong</h1>
    </a>
    <ul class="nav-bar">
      <li class="col"> <a href="index.html" class="selected decor">Portfolio</a> </li>
      <li class="col"> <a href="aboutme.html" class="decor">About me</a></li>
      <li class="col"> <a href="contact.html" class="decor">Contact</a></li>
    </ul>
  </header>
  <!------------------------------------------------------------------------>

  <div class="intro">
    <h2>Training my skills for the future</h2>
    <p>This is my journey to become a web developer. This website will tell my diary of my holiday that I went on in June</p>
  </div>





  <!--IMAGES IN THE MIDDLE---------------------->
  <div class="wrapper">
    <section>
      <ul id="wrapper">
        <li>
          <a href="img/bro-and-me.jpg" class="container-image">
            <img src="img/bro-and-me.jpg" alt="brother&me" class="img">
            <p>A RARE half decent photo of me(right) and my brother(left) in Singapore. Photo taken by my father, And being ruined by mom walking into shot </p>
          </a>
        </li>
        <li>
          <a href="img/father.jpg" class="container-image">
            <img src="img/father.jpg" alt="father" class="img">
            <p>Father telling us a story while mom sniggers at a inside joke about our father</p>
          </a>
        </li>
        <li>
          <a href="img/mom.jpg" class="container-image">
            <img src="img/mom.jpg" alt="mom" class="img">
            <p>Mom feeling unwell on the journey to the big Buddha</p>
          </a>
        </li>
        <li>
          <a href="img/Park-plaza.jpg" class="container-image">
            <img src="img/Park-plaza.jpg" alt="parkplaza" class="img">
            <p>Park Plaza foodcourt. Cheap, delicious and quick-serving meals where I have many memories of</p>
          </a>
        </li>
      </ul>
    </section>
  </div>

＆＃13;

Answer 1

在div中定义列网格。它可能有帮助

例如：

<div class="wrapper col-md-12">
//content
</div>

我的图像溢出了我的flexbox容器

1 个答案: