안녕하세요 html,css공부중입니다.
<!doctype>
<html>
<head>
<meta charset="utf-8">
<style>
body{
display: flex;
align-items: center;
}
.container{
display: flex;
flex-direction: column;
}
header{
text-align: center;
border-bottom:1px solid gray;
padding-left:20px;
}
footer{
border-top:1px solid gray;
padding:20px;
text-align: center;
}
.content{
display:flex;
}
.content nav{
border-right:1px solid gray;
}
.content aside{
border-left:1px solid gray;
}
nav, aside{
flex-basis: 150px;
flex-shrink: 0;
}
main{
padding:10px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>연습코딩</h1>
</header>
<section class="content">
<nav>
<ul>
<h2>목차</h2>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<main>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam totam labore ipsum, nesciunt temporibus repudiandae facilis earum, sunt autem illum quam dolore, quae optio nemo vero quidem animi tempore aliquam voluptas assumenda ipsa voluptates. Illum facere dolor eos, corporis nobis, accusamus velit, similique cum iste unde vero harum voluptatem molestias excepturi. Laborum beatae, aliquid aliquam excepturi pariatur soluta asperiores laudantium iste, architecto ducimus fugiat sed, saepe quaerat recusandae exercitationem sapiente, impedit nostrum error. Doloremque impedit, eos in quos assumenda illo eum dicta. Voluptatum quaerat excepturi consectetur, doloremque esse deleniti commodi natus, maxime sit? Officia rerum quibusdam porro dolorum numquam harum soluta ex quo! Vero, nam? Necessitatibus rem hic perferendis maiores obcaecati voluptate sunt autem id doloribus, similique repudiandae nes
</main>
<aside>
광고부분입니다.
</aside>
</section>
<footer>
<a href="https://opentutorials.org/course/1">홈페이지</a>
</footer>
</div>
</body>
</html>
이러한 코드중에서 flex를 이용해 레이아웃을 공부중인데요 align-items: center;사용해 화면 중앙에 위치하게 하였는데 크롬에서 실행했을 때와
IE에서 실행했을 때 결과가 다릅니다.
IE에서는 메인내용 부분이 줄바꿈이 안되어있고 또한 화면을 줄었을때 자동으로 줄어들지 않고 크롬에서는 이런 문제가 없이 잘 실행되는데 왜 익스플로에서는 오류가 생기는건가요? 코드에 문제인지 브라우저가 문제인지 모르겠습니다^