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>