有人可以用这支笔帮我吗？ （我正在使用flexbox）https://codepen.io/barbudo/pen/XRMVqX
基本上，我正试图让fontawesome图标增长并占据行中所有可用空间。由于他们有一个.social类，我将此类设置为flex: 1;，但它不起作用。
footer {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 100%;
margin: auto;
border: 1px dotted yellow;
padding: 0;
}
footer p {
border: 1px dotted gray;
margin: 0;
padding-bottom: 0px;
}
.social-bar {
display: flex;
border: 1px solid white;
}
.social {
flex: 1;
}
我的错误是什么？它在哪里？
答案 0 :(得分：0)
由于footer是flex，.social-bar是行中的flex子项，而不是100％宽度。您可以将.social-bar设置为flex: 1 0 0以使其增长，然后flex: 1 .social工作。但这不会使图标增长，因为图标是字体。只需增加字体大小即可使其增长。同时将text-align: center添加到.social
body, html {
margin: 0;
padding: 0;
color: white;
background-color: black;
font-family: 'Ubuntu';
}
a { text-decoration: none; }
#mother {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
#header-wrapper {
width: 100%;
height: 100vh;
}
header {
display: flex;
flex: 1 1 auto;
box-sizing: border-box;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 99%;
}
header h1 {
display: block;
box-sizing: border-box;
width: 300px;
text-align: center;
font-family: 'Lora' !important;
font-size: 60px;
}
header p {
display: block;
box-sizing: border-box;
width: 300px;
text-align: center;
line-height: 1.5;
padding: 9px;
margin-top: 0px;
margin-bottom: 0px;
}
.fa-chevron-down {
display: none !important;
color: white;
}
#life:first-child {
margin-top: 10px;
}
#boole {
display: block;
width: 300px;
height: auto;
margin: auto;
margin-top: 15px;
margin-bottom: 5px;
}
.lWrapper p {
display: block;
box-sizing: border-box;
width: 300px;
margin: auto;
text-align: justify;
line-height: 1.5;
padding: 15px 9px;
}
h3 {
display: block;
box-sizing: border-box;
width: 300px;
text-align: center;
margin: auto;
margin-top: 10px;
padding: 10px 0px;
}
ul {
display: block;
box-sizing: border-box;
width: 300px;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
li { line-height: 1.5; }
.year { font-weight: 700; }
.footer-wrapper {
width: 100%;
height: 100px;
border: 1px dotted gray;
}
footer {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 100%;
margin: auto;
border: 1px dotted yellow;
padding: 0;
}
footer p {
border: 1px dotted gray;
margin: 0;
padding-bottom: 0px;
}
.social-bar {
display: flex;
border: 1px solid white;
flex: 1 0 0;
}
.social {
flex: 1 0 0;
text-align: center;
}
.social .fa {
font-size: 5em;
}<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lora:700|Ubuntu:300,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>George Boole: A tribute page for Free Code Camp</title>
</head>
<body>
<div id="mother">
<div id="header-wrapper">
<header>
<h1>George Boole</h1>
<p id="pHeader"><i class="fa fa-quote-left fa-2x fa-border fa-pull-left"></i><br><em>A renaissance of logical studies in modern times begins with the publication in 1847 of George Boole’s 'The Mathematical Analysis of Logic.'</em><i class="fa fa-quote-right fa-2x fa-border fa-pull-right"></i></p>
<a href="#life"><i class="fa fa-chevron-down fa-3x"></i></a>
</header>
</div> <!-- end of "header-wrapper" -->
<div id="life">
<div class="wrapper">
<img id="boole" src="images/boole.png" alt="A portrait of George Boole. He's looking left, wearing a beard, suite and tie.">
</div> <!-- end of "wrapper" -->
<div class="lWrapper">
<p>Most people will never hear about George Boole, but this man's importance to mathematics - and all developments that have been built on his contributions - is undeniable and great.</p>
<p>In the two sections below, you'll find what I consider to be the most important facts about him. Yes, there could be a lot more. I know it! But my point is to introduce him to you, and if you want to know more, you can follow the link at the bottom.</p>
<p>Happy reading :)</p>
<h3>EARLY LIFE</h3>
<ul>
<li><span class="year">1815</span>:<br> Boole was born in Lincoln, Lincolnshire, England, on November the 2nd. He was the son of John Boole Sr (1779–1848), a shoemaker, and Mary Ann Joyce.</li>
<li><span class="year">1831</span>:<br> At age 16, Boole became the breadwinner for his parents and three younger siblings, taking up a junior teaching position in Doncaster at Heigham's School.</li>
<li><span class="year">1834</span>:<br> At age 19, Boole successfully established his own school in Lincoln. Four years later he took over Hall's Academy in Waddington, outside Lincoln, following the death of Robert Hall.</li>
<li><span class="year">1838</span>:<br> From 1838 onwards, Boole was making contacts with sympathetic British academic mathematicians and reading more widely. He studied algebra in the form of symbolic methods, as far as these were understood at the time, and began to publish research papers.</li>
</ul>
</div> <!-- end of "sWrapper" -->
<div class="sWrapper">
<h3>LATER LIFE</h3>
<ul>
<li><span class="year">1841</span>:<br> He moved back to Lincoln, where he ran a boarding school. Boole immediately became involved in the Lincoln Topographical Society, serving as a member of the committee, and presenting a paper entitled <em>"On the origin, progress and tendencies Polytheism, especially amongst the ancient Egyptians, and Persians, and in modern India"</em> on 30 November.</li>
<li><span class="year">1849</span>:<br> Boole's status as mathematician was recognised by his appointment as the first professor of mathematics at Queen's College, Cork (now University College Cork (UCC)) in Ireland.</li>
<li><span class="year">1850</span>:<br> He met his future wife in Cork while she was visiting her uncle John Ryall, who was Professor of Greek. They married some years later in 1855.</li>
<li><span class="year">1864</span>:<br> In late November, Boole walked under heavy rain from his home at Lichfield Cottage in Ballintemple to the university - a distance of three miles - and lectured wearing his wet clothes. He soon became ill, developing a severe cold and high fever.</li>
<li><span class="year">1864</span>:<br> On December 8, he died of fever-induced pleural effusion.</li>
</ul>
</div> <!-- end of "sWrapper" -->
<div class="footer-wrapper">
<footer>
<p><i class="fa fa-search" aria-hidden="true"></i> All info comes from <a href="#"><i class="fa fa-wikipedia-w" aria-hidden="true"></i></a> Wikipedia.</p>
<div class="social-bar">
<a class="social" href="mailto:gecmartins@zoho.com?Subject=Found%20you%20on%20Codepen!"><i class="fa fa-envelope-open" aria-hidden="true"></i></a>
<a class="social" href="https://twitter.com/barrbudo" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
<a class="social" href="https://plus.google.com/u/0/+GuilhermeEduardoCamposMartins" target="_blank"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a>
<a class="social" href="https://www.linkedin.com/in/gecmartins/" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
</div>
</footer>
</div>
</div> <!-- end of "life" -->
</div> <!-- end of "mother" -->
</body>
答案 1 :(得分：0)
我相信，因为它是一个图标，你只能修改字体大小，它不会随着它的容器增长/缩小。
.social-bar {
width: 100%;
display: flex;
justify-content: space-around;
border: 1px solid white;
}
.social i {
font-size: 3em;
}