Flexbox中心盒问题

时间：2017-02-04 22:26:06

标签： html css flexbox

目前我的网站上有两件事遇到了麻烦。第一个是我的三个图标在整个浏览器中不断延伸。当它达到某个点时，我不希望图标继续在它们之间留有这么大的空间。我假设我必须制作某种盒子才能让它们进入，但我觉得使用flexbox更好的方法就是这样做。我知道这有点令人困惑所以如果你需要我解释更多让我知道。我遇到的第二个问题是我的＆＃34;你想要＆＃34;列表粘贴在浏览器的左侧，而不是在我移动浏览器时弯曲到中心。如果有人能帮助我解决这个中心问题，那将会非常有帮助！谢谢！

＆＃13;
＆＃13; 
body{
	background-image: url(footer_lodyas.png);
	}


ml, body {
	width:100%;
	height:100%;
}

.center{
	
	margin-left: auto;
    margin-right: auto;
	display: block;
	
}

/***************flexbox icons************/
.container {
    display: flex;
	background-color: #1DA0A3;
    flex-flow: row wrap;
}
  
  .box{
    flex: 1 0 200px;
    display: flex;
    flex-flow: column wrap;
    margin:1em;
	
  }
  
  .box img{
    align-self: center;
    width: 180px;
    margin-bottom: 1em;
  }
  
  .box .buy{
    align-self: center;
    margin-top: auto;
  }


.flexwords{
	align-self: center;
	margin-top: auto;
}

#contacticon{
		width:100px;
	}


/****************horizontal line*************/
.hr1{
	
	border: none;  
    border-bottom: 1px solid #293839;  
	margin-left:25%;
  	width: 50%;               
 	color:#485A5F;
  	height: 2px;
	}
	
/***************Do you want to section*************/	
.wrap{
	display:flex;
	
}

main{
	flex:1;
	display:flex;
	justify-content: center;
}

aside, article{

padding:2em;	
}

aside{
	flex:0 auto;
}

article{
	flex:0 auto;
}

@media (max-width: 800px) {
  main {
    flex-direction: column;
    align-items: center;
  }
}
＆＃13; 
<html>
<head>
<meta charset="UTF-8">
<link href="index.css" rel="stylesheet">

<title>portfolio</title>
</head>

<body>


 
 
 
 


<div class="container">
    
    <div class="box">
      <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" alt="" />
      <h2 class="flexwords">My Work</h2>
      
    </div>
    
    <div class="box">
      <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" alt="" />
      <h2 class="flexwords">My Education</h2>
    </div>
        
    <div class="box">
      <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" id="contacticon" alt="" />
      <h2 class="flexwords">Contact Me</h2>
      
    </div>
      
       
<br>

<hr class="hr1">


<div class="wrap">
<main>
<aside>
	<h1>Do You Want to...</h1>
    <ul>
  <li>Rebrand myself online</li>
  <li>Take my current website and make it modern</li>
  <li>Find a way to make information more accessible for customers</li>
  <li> Improve customer service</li>
  <li> Reach a wider range of people</li>
</ul>
</aside>
<article>
<h1>Do You Want to...</h1>

<ul>
  <li>Create forms and documents that customers can fill out online</li>
  <li>Start an email list for recurring customers</li>
  <li>Show relatability with my audience</li>
  <li> Have 24/7 online exposure</li>
  <li>Create a map or a way for customers to find my location</li>
</ul>
</article>

</main>
</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：2)

为图标容器指定最大宽度，并使用自动边距

将其居中 
.container {
    display: flex;
    background-color: #1DA0A3;
    flex-flow: row wrap;
    max-width: 800px;            /*  added  */
    margin: 0 auto;              /*  added  */
}

样品

＆＃13;
＆＃13; 
body {
  background-image: url(footer_lodyas.png);
}
ml,
body {
  width: 100%;
  height: 100%;
}
.center {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
/***************flexbox icons************/

.container {
  display: flex;
  background-color: #1DA0A3;
  flex-flow: row wrap;
  justify-content: center;
}
.box {
  flex: 1 0 200px;
  display: flex;
  flex-flow: column wrap;
  margin: 1em;
  max-width: 300px;
}
.box img {
  align-self: center;
  width: 180px;
  margin-bottom: 1em;
}
.box .buy {
  align-self: center;
  margin-top: auto;
}
.flexwords {
  align-self: center;
  margin-top: auto;
}
#contacticon {
  width: 100px;
}
/****************horizontal line*************/

.hr1 {
  border: none;
  border-bottom: 1px solid #293839;
  margin-left: 25%;
  width: 50%;
  color: #485A5F;
  height: 2px;
}
/***************Do you want to section*************/

.wrap {
  display: flex;
}
main {
  flex: 1;
  display: flex;
  justify-content: center;
}
aside,
article {
  padding: 2em;
}
aside {
  flex: 0 auto;
}
article {
  flex: 0 auto;
}
@media (max-width: 800px) {
  main {
    flex-direction: column;
    align-items: center;
  }
}
＆＃13; 
<html>

<head>
  <meta charset="UTF-8">
  <link href="index.css" rel="stylesheet">

  <title>portfolio</title>
</head>

<body>

  <div class="container">

    <div class="box">
      <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" alt="" />
      <h2 class="flexwords">My Work</h2>

    </div>

    <div class="box">
      <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" alt="" />
      <h2 class="flexwords">My Education</h2>
    </div>

    <div class="box">
      <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" id="contacticon" alt="" />
      <h2 class="flexwords">Contact Me</h2>

    </div>


    <br>

    <hr class="hr1">


    <div class="wrap">
      <main>
        <aside>
          <h1>Do You Want to...</h1>
          <ul>
            <li>Rebrand myself online</li>
            <li>Take my current website and make it modern</li>
            <li>Find a way to make information more accessible for customers</li>
            <li>Improve customer service</li>
            <li>Reach a wider range of people</li>
          </ul>
        </aside>
        <article>
          <h1>Do You Want to...</h1>

          <ul>
            <li>Create forms and documents that customers can fill out online</li>
            <li>Start an email list for recurring customers</li>
            <li>Show relatability with my audience</li>
            <li>Have 24/7 online exposure</li>
            <li>Create a map or a way for customers to find my location</li>
          </ul>
        </article>

      </main>
    </div>
＆＃13;
＆＃13;
＆＃13;

或者让图标容器justify-content: center居中，每个框最大宽度

.container {
  display: flex;
  background-color: #1DA0A3;
  flex-flow: row wrap;
  justify-content: center;          /*  added  */
}
.box {
  flex: 1 0 200px;
  display: flex;
  flex-flow: column wrap;
  margin: 1em;
  max-width: 300px;                 /*  added  */
}

样品

＆＃13;
＆＃13; 
body {
  background-image: url(footer_lodyas.png);
}
ml,
body {
  width: 100%;
  height: 100%;
}
.center {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
/***************flexbox icons************/

.container {
  display: flex;
  background-color: #1DA0A3;
  flex-flow: row wrap;
  justify-content: center;
}
.box {
  flex: 1 0 200px;
  display: flex;
  flex-flow: column wrap;
  margin: 1em;
  max-width: 300px;
}
.box img {
  align-self: center;
  width: 180px;
  margin-bottom: 1em;
}
.box .buy {
  align-self: center;
  margin-top: auto;
}
.flexwords {
  align-self: center;
  margin-top: auto;
}
#contacticon {
  width: 100px;
}
/****************horizontal line*************/

.hr1 {
  border: none;
  border-bottom: 1px solid #293839;
  margin-left: 25%;
  width: 50%;
  color: #485A5F;
  height: 2px;
}
/***************Do you want to section*************/

.wrap {
  display: flex;
}
main {
  flex: 1;
  display: flex;
  justify-content: center;
}
aside,
article {
  padding: 2em;
}
aside {
  flex: 0 auto;
}
article {
  flex: 0 auto;
}
@media (max-width: 800px) {
  main {
    flex-direction: column;
    align-items: center;
  }
}
＆＃13; 
<html>

<head>
  <meta charset="UTF-8">
  <link href="index.css" rel="stylesheet">

  <title>portfolio</title>
</head>

<body>

  <div class="container">

    <div class="box">
      <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" alt="" />
      <h2 class="flexwords">My Work</h2>

    </div>

    <div class="box">
      <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" alt="" />
      <h2 class="flexwords">My Education</h2>
    </div>

    <div class="box">
      <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" id="contacticon" alt="" />
      <h2 class="flexwords">Contact Me</h2>

    </div>


    <br>

    <hr class="hr1">


    <div class="wrap">
      <main>
        <aside>
          <h1>Do You Want to...</h1>
          <ul>
            <li>Rebrand myself online</li>
            <li>Take my current website and make it modern</li>
            <li>Find a way to make information more accessible for customers</li>
            <li>Improve customer service</li>
            <li>Reach a wider range of people</li>
          </ul>
        </aside>
        <article>
          <h1>Do You Want to...</h1>

          <ul>
            <li>Create forms and documents that customers can fill out online</li>
            <li>Start an email list for recurring customers</li>
            <li>Show relatability with my audience</li>
            <li>Have 24/7 online exposure</li>
            <li>Create a map or a way for customers to find my location</li>
          </ul>
        </article>

      </main>
    </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

修复此问题的正确方法是将它们包装在另一个容器中，并为该容器提供最大宽度。

要修复你的第二个问题，请给.container“justify-content：center;”。

答案 2 :(得分：1)

您可能正在寻找类似的东西

＆＃13;
＆＃13; 
body{
background-image: url(footer_lodyas.png);
}


ml, body {
width:100%;
height:100%;
}

.center{

margin-left: auto;
margin-right: auto;
display: block;

}

/***************flexbox icons************/
.container {
display: flex;
background-color: #1DA0A3;
flex-flow: row wrap;
width: 600px;
margin: 0 auto;
}
  
  .box{
flex: 1 0 200px;
display: flex;
flex-flow: column wrap;
margin:1em;

  }
  
  .box img{
align-self: center;
width: 180px;
margin-bottom: 1em;
  }
  
  .box .buy{
align-self: center;
margin-top: auto;
  }


.flexwords{
align-self: center;
margin-top: auto;
}

#contacticon{
	width:100px;
}


/****************horizontal line*************/
.hr1{

border: none;  
border-bottom: 1px solid #293839;  
margin-left:25%;
  	width: 50%;               
 	color:#485A5F;
  	height: 2px;
}

/***************Do you want to section*************/	
.wrap{
display:flex;

}

main{
flex:1;
display:flex;
justify-content: center;
}

aside, article{

padding:2em;
}

aside{
flex:0 auto;
}

.wrap #list-container{
  margin: 0 150px;
  width: 300px;
}

article{
flex:0 auto;
}

@media (max-width: 800px) {
  main {
flex-direction: column;
align-items: center;
  }
}
＆＃13; 
<body>

<div class="container">

<div class="box">
  <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" alt="" />
  <h2 class="flexwords">My Work</h2>
  
</div>

<div class="box">
  <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" alt="" />
  <h2 class="flexwords">My Education</h2>
</div>
    
<div class="box">
  <img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" id="contacticon" alt="" />
  <h2 class="flexwords">Contact Me</h2>
  
</div>
  
   
<br>

<hr class="hr1">


<div class="wrap">
<main>
<div id="list-container">
<aside>
<h1>Do You Want to...</h1>
<ul>
  <li>Rebrand myself online</li>
  <li>Take my current website and make it modern</li>
  <li>Find a way to make information more accessible for customers</li>
  <li> Improve customer service</li>
  <li> Reach a wider range of people</li>
</ul>
</aside>
<article>
<h1>Do You Want to...</h1>

<ul>
  <li>Create forms and documents that customers can fill out online</li>
  <li>Start an email list for recurring customers</li>
  <li>Show relatability with my audience</li>
  <li> Have 24/7 online exposure</li>
  <li>Create a map or a way for customers to find my location</li>
</ul>
</article>
</div>

</main>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

要解决居中问题，请将其添加到样式表中。必须删除列表的样式类型才能使其完全居中。

@media (max-width: 420px) {
    .wrap {
        text-align: center;
    }
    .wrap ul {
        list-style-type: none;
        padding-left: 0;
    }
}
相关问题
最新问题