<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flex布局</title>
<style media="screen">
html{height:100%;}
body{height:100%; color: white;}
html,body,div{margin: 0; padding: 0;}
.wrapper{display: flex; background: #000; flex-direction: column; height: 100%; box-align: justify; text-align: center;}
.top, .c-left, .c-center, .c-right, .bottom{ display:flex; justify-content:center; align-items:center;}
.top{background: blue; height: 20%; }
.center{background: gray; flex: 1; display: flex; flex-direction: row; flex-wrap: nowrap;}
.c-left{background: brown; width: 100px;}
.c-center{flex:1; background: navy;}
.c-right{background: purple; width: 100px;}
.bottom{background: green; height: 25%; }
</style>
</head>
<body>
<div class="wrapper">
<div class="top">
top
</div>
<div class="center">
<div class="c-left">
c-left
</div>
<div class="c-center">
c-center
</div>
<div class="c-right">
c-right
</div>
</div>
<div class="bottom">
bottom
</div>
</div>
</body>
</html>
1.flex-direction:row | row-reverse | column | column-reverse
row:主轴与行内轴方向作为默认的书写模式。即横向从左到右排列(左对齐)。
row-reverse:对齐方式与row相反。
column:主轴与块轴方向作为默认的书写模式。即纵向从上往下排列(顶对齐)。
column-reverse:对齐方式与column相反。
未完待续。。。
添加微信交流群(需加微信拉您进入)