【Web开发手礼】探索Web开发的魅力（六）-CSS（3）浮动、flex布局、响应式布局

flex-start：默认值。左对齐。
flex-end：右对齐。
space-between：左右两段对齐。
space-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
space-evenly：flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距，主轴结束位置到最后一个flex项的间距，都完全一样。

align-items

CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。

取值：

flex-start：元素向主轴起点对齐。
flex-end：元素向主轴终点对齐。
center：元素在侧轴居中
stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

align-content

CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

取值：

flex-start：所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
flex-end：所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
stretch：拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。

order

定义flex项目的顺序，值越小越靠前。

flex-grow

CSS 属性 flex-grow CSS 设置 flex 项主尺寸的 flex 增长系数。

负值无效，默认为 0。

flex-shrink

CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

负值无效，默认为1。

flex-basis

CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。

取值：

width 值可以是 <length>; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数。负值是不被允许的。默认为 auto。

flex

flex-grow、flex-shrink、flex-basis的缩写。

常用取值：

auto：flex: 1 1 auto
none：flex: 0 0 auto

.user-card{
    width: 200px;
    height: 67.69px;
    background-color: #D9EAF7;
    margin: 100px auto;
    padding: 5px 6px 7px 7px;
    box-sizing: border-box;
}
.user-card-head{
    font-size: 12px;
    color: #6A737C;
    margin: 1px 0 4px 0;
}

.user-card-body-photo > img{
    width: 32px;
    height: 32px;
}
.user-card-body-photo{
    float: left;
}
.user-card-body-info{
    float: left;
    margin-left: 8px;
}
.user-card-body-info-username{
    font-size: 13px;
    color: #0074CC;
    height: 16px;
    line-height: 16px;
}
.user-card-body-info-reputation{
    font-size: 12px;
    color: #838C95;
    height: 16px;
    line-height: 16px;
}

.user-card-body-info-reputation-item{
    width: 6px;
    height: 6px;
    display: inline-block;
    background-color: #FFCC01;
    border-radius: 50%;
    margin: 0 3px 0 2px;
    position: relative;
    top: -2px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/static/css/style.css" type="text/css">
</head>
<body>
  <div>
    <div class="user-card">
      <div class="user-card-head"> asked Feb 9, 2024 at 19:00</div>
      <div class="user-card-body">
        <div class="user-card-body-photo">
          <img src="/static/images/logo.png" alt="头像">
        </div>
        <div class="user-card-body-info">
          <div class="user-card-body-info-username">
            haf
          </div>
          <div class="user-card-body-info-reputation">
            1024, 
            <div class="user-card-body-info-reputation-item"></div>3 
            <div class="user-card-body-info-reputation-item"></div>14 
            <div class="user-card-body-info-reputation-item"></div>15
          </div>
        </div>
      </div>

    </div>
    
  </div>
</body>
</html>

响应式布局

media查询

当屏幕宽度满足特定条件时应用css。

例如：

@media(min-width: 768px) {
    .container {
        width: 960px;
        background-color: lightblue;
    }
}

Bootstrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。