如何使我的页脚响应没有故障？

Question

所以我现在对我的页脚很满意，而且它的响应速度相当快。问题是：它很容易出故障。当调整窗口大小时，文字和链接会相互堆叠，等等。有人能帮我解决这个问题吗？我很喜欢，如果中间的链接将保持并排和社会媒体链接保持在一个块。

谢谢你这么多。

.footer {
	position: static;
	flex-shrink: 0;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 0px;
    width: 100%;
    background-color: #F9F9F9;
    text-align: center;
	box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.2);
	z-index: 99;
    /*outline: 2px dashed orange;*/
}
.footerline {
	padding: 50px;
    display: flex;
    font-family: 'Source Code Pro', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    color: #D5D5D5;
    justify-content: center;
    align-items: center;
    /*outline: 2px dashed orange;*/
}
#footerlineshadow {
	color: rgba(240,240,240, 0.9);
    text-shadow: 1px 1px 1px #fff, 0 0 0 #000, 1px 1px 1px #fff;
}
.subfooter {
    height: 40px;
    background-color: #E5E5E5;
    box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.2);
}
.footercontent {
    display: flex;
    font-family: lato;
    color: #ABABAB;
    font-style: normal;
    font-weight: 100;
    font-size: 12px;
    text-align: center;
    justify-content: center;
    height: 100%;
}
#footertext {
	text-align: center;
	margin-right: 20%;
	/*outline: 2px dashed orange;*/
}
#footerlinks {
	text-align: center;
	/*outline: 2px dashed orange;*/

}
#footerlinks a {
    margin: 0px 40px;
    font-style: normal;
    font-weight: 100;
    font-size: 12px;
    color: #ABABAB;
    text-decoration: none;	/*outline: 2px dashed orange;*/
}
#footerlinks a:hover {
	opacity: 0.7;
	font-style: normal;
    font-weight: 100;
    font-size: 12px;
	text-decoration: none;
	/*outline: 2px dashed orange;*/
}
#footersocialmedia {
	margin-left: 20%;
}
 /* Style all font awesome icons */
.fa {
  padding: 5px;
  font-size: 30px;
  width: 25px;
	height: 100%;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

<link rel="stylesheet" type="text/css" id="applicationStylesheet" href="header_footer.css"/>
<link rel="stylesheet" type="text/css" id="mainStylesheet" href="kontakt.css"/>
<link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<footer class="footer">
	  <div class="footerline">
	    <p id="footerlineshadow">&ltp&gtThis is a Footer&lt/p&gt</p>
      </div>
	<div class="subfooter">
		<div class="footercontent">
			<div id="footertext">
				<p>Copyright © 2020 Henning Frenzel</p>
			</div>
			
			<div id="footerlinks">
				<p>
				<a href="home.html">Home</a>
				<a href="ueber_mich_.html">Über Mich</a>
  			    <a href="portfolio_galerie.html">Portfolio</a>
  			    <a href="kontakt.html">Kontakt</a>
				<a href="Impressum.html">Impressum</a>
				</p>
			</div>
			<div id="footersocialmedia">
				<a href="#" class="fa fa-facebook"></a>
				<a href="#" class="fa fa-twitter"></a>
				<a href="#" class="fa fa-youtube"></a>
				<a href="#" class="fa fa-instagram"></a>
			</div>
		</div>
	</div>
</footer>
</html>

Answer 1

下面是响应式页脚的代码

.footer {
  display:flex;
  flex-direction:row;
    min-height:50px;
    width: 100%;
    background-color: #F9F9F9;
    justify-content:center;
    align-items:center;
   
    text-align: center;
        flex-wrap:wrap;

	box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.2);
}
.footerline {
    display: flex;
    font-family: 'Source Code Pro', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    color: #D5D5D5;
    width:100%;
    justify-content: center;
    align-items: center;
    flex-direction:row;
    flex-wrap:wrap;
    /*outline: 2px dashed orange;*/
}
#footerlineshadow {
	color: rgba(240,240,240, 0.9);
    text-shadow: 1px 1px 1px #fff, 0 0 0 #000, 1px 1px 1px #fff;
}
.subfooter {
    background-color: #E5E5E5;
    box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.2);
}
.footercontent {
    display: flex;
    font-family: lato;
    color: #ABABAB;
    font-style: normal;
    font-weight: 100;
    width:100%;
    font-size: 12px;
    text-align: center;
    justify-content: center;
    min-height:50px;
}
#footertext {
	text-align: center;
	/*outline: 2px dashed orange;*/
}
#footerlinks {
	text-align: center;
	/*outline: 2px dashed orange;*/

}
#footerlinks a {
    font-style: normal;
    font-weight: 100;
    font-size: 12px;
    padding:0 15px;
    color: #ABABAB;
    text-decoration: none;	/*outline: 2px dashed orange;*/
}
#footerlinks a:hover {
	opacity: 0.7;
	font-style: normal;
    font-weight: 100;
    font-size: 12px;
	text-decoration: none;
	/*outline: 2px dashed orange;*/
}
#footersocialmedia {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:row;
  flex-wrap:wrap;
}
 /* Style all font awesome icons */
.fa {
  padding: 20px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

Answer 2

而如果你想把页脚留在底部，就用css中的页脚属性写上这些代码吧

**position:absolute;

bottom:0;

左：0。

**