TAG
CSS
Result
Run
License
<div class="wrapper"> <div class="header">Header</div> <div class="main"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div> <div class="aside aside1">Aside 1</div> <div class="aside aside2">Aside 2</div> <div class="footer">Footer</div> </div>
body { margin: 20px 0; text-align: center; } .wrapper { display: flex; flex-flow: row wrap; font-weight: bold; text-align: center; margin: 0 auto; } .wrapper > .header, .wrapper > .footer { padding: 10px; flex: 1 1 100%; } .header { background: #FF6347; } .footer { background: #90EE90; } .main { text-align: left; background: #01BFFF; padding: 10px; } .aside1 { background: #FFD701; } .aside2 { background: #FF69B4; } /* 400픽셀 이하 해상도 */ @media screen and (max-width: 400px) { .wrapper { min-width: 400px; } .aside { flex: none; width: 100%; } body:before { content: "(max-width: 400px)"; } } /* 401픽셀부터 500픽셀까지의 해상도 */ @media screen and (min-width: 401px) and (max-width: 500px) { .aside { flex: none; width: 100%; } body:before { content: "(min-width: 401px) and (max-width: 500px)"; } } /* 501픽셀부터 800픽셀까지의 해상도 */ @media screen and (min-width: 501px) and (max-width: 800px) { .aside { flex: 1 auto; color: #000; } body:before { content: "(min-width: 501px) and (max-width: 800px)"; } } /* 801픽셀 해상도부터 최대 */ @media all and (min-width: 801px) { .wrapper { min-width: 801px; max-width: 1000px; width: 100%; } .main { flex-grow: 1; flex-basis: 0%; order: 2; } .aside { flex-basis: 200px; } .aside1 { order: 1; } .aside2 { order: 3; } .footer { order: 4; } body:before { content: "(min-width: 801px)"; } }
Console
expand_less
License
License
by DevDic
Close