xgqfrms-GitHub
commented
6 years ago flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
http://learnlayout.com/flexbox.html
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-->
<style>
/** {
margin: 0;
padding: 0;
}*/
.container {
display: -webkit-flex;
display: flex;
border: 1px solid red;
box-sizing: border-box;
overflow: hidden;
margin: 0;
padding: 0;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 300px;
max-width: 300px;
box-sizing: border-box;
background: #0f0;
transition: all ease-out 0.5s 0.1s;
}
.initial>ul>li {
/*list-style-type: none;*/
margin-left: -20px;
}
@media all and (max-width: 720px) {
.initial {
-webkit-flex: initial;
flex: initial;
width: 50px;
max-width: 50px;
box-sizing: border-box;
background: #ccc;
transition: all ease-in 0.5s 0.1s;
color: aquamarine;
}
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
box-sizing: border-box;
background: #f0f;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
</style>
</head>
<body>
<h1>flex</h1>
<hr>
<div class="container">
<nav class="initial">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</nav>
<section class="none">
flex none
</section>
<section class="flex1">
flex 1
</section>
<section class="flex2">
flex 2
</section>
</div>
<section>
<ul>
<li> name_1
<ul>
<li> name_3
<ul>
<li> name_4 </li>
</ul>
</li>
</ul>
</li>
<li> name_2 </li>
</ul>
</section>
</body>
</html>layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout</title>
<style>
html,
body,
div {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.app-container {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
/* overflow: hidden; */
}
.app-sider {
box-sizing: border-box;
background: #000;
width: 200px;
height: 100vh;
/* position: absolute; */
position: fixed;
top: 0;
left: 0;
color: #fff;
}
.app-body {
background: #777;
border: 1px solid #f00;
box-sizing: border-box;
height: 100%;
width: calc(100%-200px);
margin-left: 200px;
}
.app-header {
box-sizing: border-box;
background: #0f0;
width: 100%;
height: 100px;
}
.app-content {
background: rgba(255, 255, 255, 0.5);
color: #000;
box-sizing: border-box;
width: 100%;
padding: 10px;
/* margin: 5px; */
/* overflow: visible; */
/* border-box: width 和 height 属性包括内容，内边距和边框，但不包括 外边距。 */
}
.app-footer {
box-sizing: border-box;
width: 100%;
height: 50px;
background: rgba(255, 0, 255, 0.5);
}
/* scrollbar */
body {
/* overflow: hidden; */
}
body::-webkit-scrollbar {
width: 8px;
/* scrollbar width */
}
/* scrollbar height, auto change by the content height */
body::-webkit-scrollbar-thumb {
border-radius: 10px;
/* height: 10px; */
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #555;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
</style>
</head>
<!-- app\layout.html -->
<body>
<div class="app-container">
<div class="app-sider">
sider
</div>
<div class="app-body">
<header class="app-header">
header
</header>
<div class="app-content">
content xxx
<br> xxx
<br> xxxcontent xxx content xxx content xxx content xxx content xxx content xxx content xxx content xxx content xxxcontent xxx content xxx content xxx content xxx content xxx content xxx content xxx content xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br>
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br>
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br> xxx
<br>
</div>
<footer class="app-footer">
footer
</footer>
</div>
</div>
</body>
</html>
Flex Layout
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
http://learnlayout.com/flexbox.html
https://css-tricks.com/snippets/css/a-guide-to-flexbox/