将div等距排列

时间：2018-10-18 18:09:23

标签： html css css3 flexbox

我正在应对FCC挑战 [建立个人投资组合] [1]

我将不同的项目都放在同一行中，我希望它根据响应的屏幕宽度进行排列。 我使用flex-direction：列在其垂直居中的位置排列div。 然后在detail类中使用了flex和flex-direction：row和flex-wrap：wrap，justify-content：space-around。这部分无法正常工作。

 #projects, #contacts{
    height:90vh;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:center;
    align-content:space-evenly;
  }

.details{
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  justify-content:space-around;
 }

我的工作：

*{
  margin:0;
  padding:0;
}

body{
  border:0;
  padding:0;
  min-height:100%;
  height:100%;
  font-family: 'Merriweather', serif;
}


h1, h2,h3{
 text-align:center;
 }

nav{
  text-align:right;
  position:fixed;
  width:100%;
}

nav ul li{
  display:inline-block;
  margin:0 25px 20px;
  padding:10px;
  padding-top:20px;
  cursor:pointer;
}
nav ul li a{
  text-decoration:none;
  color:white;
}

nav ul li:hover{
  transform:scale(1.5);
  background-color:#36688D;
}

nav ul li a:hover{
    color:white;
}

#welcome-section{
  min-height:100vh;
  text-align:center;
  display:flex;
  justify-content:space-around;
  align-items:center;
  background-image: linear-gradient(to bottom, #a0a1b2, #b794b2, #d38591, #d4845c, #aa932b);
 }

#welcome-section p{ 
  color:green;
  font-size:larger;
}

#welcome-section strong{
  color:#1671D6;
  font-size:larger;
}

#detail *{
  margin-top:4vh;
}

#myprofile{
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
}

#myprofile span{
  margin: 0 6em;
  font-weight:700;
  font-size:17px;
  color:#FFD670;
}

#myprofile lable{
  font-weight:800;
  color:white;
}

#projects, #contacts{
  height:90vh;
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  justify-content:center;
  align-content:space-evenly;
}

#projects{
background-image: linear-gradient(to bottom, #aa932b, #9a9b38, #8ba247, #7ba859, #6dad6c);
 }

.details{
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  justify-content:space-around;
}

.section-title{
  padding: 10px 0;
  align-item:center;
  margin-bottom:20px;
  font-size:larger;
  color:#135394;
}

.project-tile{
 padding:1.5vh 2vw;
 flex: 0 1 29%;
}

.title{
  color:#fff;
  text-align:center;
  background-color:#a00606;
}

#contacts{
  background-image: linear-gradient(to bottom, #6dad6c, #42aa92, #3fa2ab, #6196af, #7e8ba3);
 }

.contact-details {
  display: inline-block;
  font-weight: bold;
  margin: 0 35px 45px 35px;
  list-style-type: none;
  border: 2px solid #90C695;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: #e0ebe8;
  color: green;
  text-align:center;
  text-decoration: none;
}

.contact-details:hover{
  background: #307860;
  color: #e0ebe8;
}

footer {
  padding: 20px;
  background: #AAAAAA;
  color: white;
  text-align:center;
  width:100%;
  clear: both;
  position: relative;
  z-index: 10;
  height: 3em;
  margin-top: -3em;
}

footer a {
  color: white;
}

@media only screen and (max-width: 500px) {
  nav ul {
    text-align: center;
  }
  nav ul li {
    margin: 20px;
  }
  #project {
    margin: 40px 0;
  }
}
<html>
  <head>
    <title>Personal Porfolio-Dev</title>
    <link href="https://fonts.googleapis.com/css?family=Charmonman:700|Merriweather:300" rel="stylesheet">
  </head>
<body>
<nav>
  <div id='navbar'>
    <ul>
      <li><a href='#welcome-section'>About</a></li>
      <li><a href='#projects'>Work</a></li>
      <li><a href='#contacts'>Contact</a></li>
  </div>
</nav>

<div id='welcome-section'>
  <div id='detail'>
  <h1>Hello</h1>
  <h3>My name is <strong>Devendra</strong>,</h3>
  <p>I am a web developer</p>
 <div id='myprofile'>
   <span><lable>Age:</lable>30</span>
   <span><lable>Country:</lable>India</span>
   <span><lable>Working at:</lable>NMDC Ltd</span>
 </div>
  </div>
</div>
  
<div id='projects'>
  <div class='section-title'><h2>Some of my projects</h2></div>
  <div class='details'>
  <div class='project-tile'>
    <a href='https://codepen.io/devendra-singh/pen/XxJZYL' ><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='tribute page image'></a>
    <p class='title'>Tribute Page</p>
  </div>
  <div class='project-tile'>
    <a href='https://codepen.io/devendra-singh/pen/BqZRaN' ><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Java Documentation image'></a>
    <p class='title'>Java Documentation</p>
  </div>
  <div class='project-tile'>
    <a href='https://codepen.io/devendra-singh/pen/dgOgRv' ><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Product Landing image'></a>
    <p class='title'>Product Landing Page</p>
  </div>
  <div class='project-tile'>
    <a href='https://codepen.io/devendra-singh/pen/BqzErY' ><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Plan Comparision image'></a>
    <p class='title'>Plan Comparision</p>
  </div>
  <div class='project-tile'>
    <a href='https://codepen.io/devendra-singh/pen/XxKboz' ><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Survey image'></a>
    <p class='title'>Survey Form</p>
  </div>
   <div class='project-tile'>
    <a href='https://codepen.io/devendra-singh/pen/rZgQKQ' ><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Moon cresent image'></a>
    <p class='title'>Moon Cresent</p>
  </div>
  </div>
</div>
  
<div id="contacts" >
  <div class="section-title">
    <h2>Connect with me below....</h2>
  </div>
  <div class='details'>
  <a href="https://www.facebook.com/DevSingh616" target="_blank" class="contact-details">Facebook</a>
  <a href="https://github.com/Devendra616/" target="_blank"  id ='profile-link' class="contact-details">GitHub</a>
  <a href="https://twitter.com/DevNmdc" target="_blank" class="contact-details">Twitter</a>
  <a href="mailto:devendra.fe@gmail.com" class="contact-details">Send a mail</a>
  </div>
</div>
  
<footer>This is created as assignment of FCC
  <p>&copy; Created for <a href="https://www.freecodecamp.com/" target="_blank">FreeCodeCamp</a></p>
</footer>
  </body>

1 个答案:

答案 0 :(得分：0)

首先，阅读And 2nd image show how the table looks after change dropdown value。 flexbox的实现存在一些问题，因此简化布局以进行调试可帮助您将来了解问题。

#projects {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  background-image: linear-gradient(to bottom, #aa932b, #9a9b38, #8ba247, #7ba859, #6dad6c);
}

.project-tile {
  padding: 1.5vh 2vw;
  flex: 0  auto;
}

.project-tile a {
  display: block;
}

.title {
  color: #fff;
  text-align: center;
  background-color: #a00606;
}
<div id='projects'>
  <div class='project-tile'>
    <a href='#' alt='tribute page image'>
      <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Java Documentation image' />
    </a>
    <p class='title'>Tribute Page</p>
  </div>
  <div class='project-tile'>
    <a href='#' alt='Java Documentation image'>
      <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Java Documentation image' />
    </a>
    <p class='title'>Java Documentation</p>
  </div>
  <div class='project-tile'>
    <a href='#' alt='Product Landing image'>
      <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' />
    </a>
    <p class='title'>Product Landing Page</p>
  </div>
  <div class='project-tile'>
    <a href='#' alt='Plan Comparision image'>
      <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' />
    </a>
    <p class='title'>Plan Comparision</p>
  </div>
  <div class='project-tile'>
    <a href='#' alt='Survey image'>
      <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' />
    </a>
    <p class='title'>Survey Form</p>
  </div>
  <div class='project-tile'>
    <a href='#' alt='Moon cresent image'>
      <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' />
    </a>
    <p class='title'>Moon Cresent</p>
  </div>
</div>

相关问题
最新问题