关于flex:Flex-CSS布局练习

5次阅读

共计 1961 个字符，预计需要花费 5 分钟才能阅读完成。

布局介绍

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

剖析

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

所有元素都是响应式的

正文完