Flex CSS布局练习

时间 2020-12-13

标签 html 布局 flex spa code htm blog rem 栏目 Flex 繁體版

原文原文链接

第一题

布局介绍

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

分析

垂直方向能够使用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>

加上样式后flex

<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样式spa

<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会随着高度增长而增长code

第二题

布局

实现

<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>

全部元素都是响应式的htm