Flex CSS布局练习

第一题

布局介绍

这个是经典的首页布局，垂直方向分为头,内容,尾组成，内容又分为导航和展示，其中展示内容需要自适应，需要随着窗口的大小发生变化

分析

垂直方向可以使用flex方向为column，因为中间内容项需要自适应，可以使用flex-grow指定增长自适应，内容里面又包含了导航和内容展示，其中内容展示是自适应，因此布局代码参考如下：

<div class="container">
  <div class="head"></div>
  <div class="main">
    <div class="nav"></div>
    <div class="content"></div>
  </div>
  <div class="footer"></div>
</div>

加上样式后

<html>
<head>
<style>

.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.head{
  height: 80px;
  background-color: green;
  margin: 5px;
}
.main{
  flex-grow: 1;
  background-color: blue;
  margin: 5px;
}
.footer{
  height:80px;
  background-color: purple;
  margin: 5px;
}
</style>
</head>

<body>
<div class="container">
  <div class="head"></div>
  <div class="main">
    <div class="nav"></div>
    <div class="content"></div>
  </div>
  <div class="footer"></div>
</div>
</body>
</html>

有了上中下三层，并且中间层依靠flex-grow: 1能够随着高度增长增长，上和下保持高度不变，添加nav和content样式

<html>
<head>
<style>

.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.head{
  height: 80px;
  background-color: green;
  margin:5px;
}

.main{
  flex-grow: 1;
  display: flex;
  flex-direction: row;
}

.nav{
  width: 100px;
  background-color: yellow;
  margin:5px;
}

.content{
  flex-grow: 1;
  background-color: blue;
  margin:5px;
}

.footer{
  height:80px;
  background-color: purple;
  margin:5px;
}
</style>
</head>

<body>
<div class="container">
  <div class="head"></div>
  <div class="main">
    <div class="nav"></div>
    <div class="content"></div>
  </div>
  <div class="footer"></div>
</div>
</body>
</html>

中间层右边content会随着高度增加而增加

第二题

布局

实现

<html>
<head>
<style>

.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box{
  width: 150px;
  background-color: orange;
  margin: 5px;
  flex-grow: 1;
}
</style>
</head>

<body>
<div class="container">
 <div style="display: flex;flex-direction: row;flex-grow: 1;">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
 </div>
 <div style="display: flex;flex-direction: row;flex-grow: 1">
   <div style="display: flex;flex-direction: column;">
     <div class="box"></div>
     <div class="box"></div>
   </div>
   <div style="margin:5px;background-color: orange;flex-grow: 1;"></div>
 </div>
</div>
</body>
</html>

所有元素都是响应式的

Flex CSS布局练习

第一题

第二题

DQuery

引用和评论

SourceTree自定义操作的一个应用