CSS Five Classic Layouts

CSS的五种经典布局

空间居中

<div class="parent" >
    <div class="child" contenteditable>:)</div>
</div>

.parent {
  display: grid;
  place-items: center;
  background: lightblue;
  width: 500px;
  height: 500px;
  
  resize: both;
  overflow: auto;
}

.child {
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid red;
  background: lightpink;
  font-size: 2rem;
  text-align: center;
}

body {
  font-family: system-ui, serif;
}

指定 Gird 布局,并且 place-items:center;
place-items:center; 是简写
全写为 place-items:center center; // place-items: <align-items> <justify-items>; 垂直水平
place-items:start;左上角 place-items:end右下角

并列式

<!DOCTYPE html>
<html lang="en">
<style>
.parent {
  display: flex;
  flex-wrap: wrap;//可换行
}
.child {
  flex: 0 1 300px; /*初始宽度300px,不可以扩大,宽度不足300px时可缩小*/
 /*flex: 1 1 300px;可扩大可缩小,就是始终占满*/
  border: 1px solid red;
  background: lightpink;
  font-size: 2rem;
  text-align: center;
}
body {
  font-family: system-ui, serif;
}
</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
</body>
</html>

指定 flex 布局, felx-wrap:wrap;设置可换行
flex: <flex-grow> <flex-shrink> <flex-basis>;
flex: <初始宽度> <足够宽时是否扩大> <宽度不够时是否缩小>

两栏式

一边保持,另一边伸缩

<!DOCTYPE html>
<html lang="en">
<style>
body {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
  padding: 0;
  margin: 0;
}
.sidebar {
  height: 100vh;
  background: lightpink;
  font-size: 2rem;
  text-align: center;
}
.content {
  padding: 2rem;
}
body {
  font-family: system-ui, serif;
}
</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="sidebar" contenteditable>
  Min: 150px
  <br/>
  Max: 25%
</div>
<p class="content" contenteditable>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nulla architecto maxime modi nisi. Quas saepe dolorum, architecto quia fugit nulla! Natus, iure eveniet ex iusto tempora animi quibusdam porro?</p>
</body>
</html>