Skip to content

Latest commit

 

History

History
380 lines (272 loc) · 12.3 KB

9.md

File metadata and controls

380 lines (272 loc) · 12.3 KB
Raw

第9节 CSS 弹性盒子

❤️💕💕HTML和CSS高级教程。更多的文章请移步博客Myblog:http://nsddd.top

[TOC]

什么是弹性盒子

Flexbox（弹性盒子）是最新版本的 CSS（即 CSS3）中引入的一种强大且兼容性好的布局方法。使用 flexbox，我们可以很容易地处理好页面上的元素布局，并创建可以自动缩小和放大的动态用户界面。

我将通过构建一个 Twitter 卡片来学习 flexbox 和动态布局的基

使用 display: flex 定位两个盒子

这节我们会使用不同的挑战方式来学习如何使用 CSS 更灵活地布局元素。 首先我们会通过一个挑战来解释原理，然后通过操作一个简单的推文组件来应用弹性盒子（flexbox）。

只要在一个元素的 CSS 中添加 display: flex;，就可以使用其它 flex 属性来构建响应式页面了。

<style>
  #box-container {
    height: 500px;
    display: flex;   <!-- 使用弹性盒子 -->
  }

  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

image-20220919100603617

使用 flex-direction 属性创建一个行

给元素添加 display: flex 属性可以让它变成 flex 容器， 然后可以让元素的项目排列成行或列。 只要给父元素添加 flex-direction 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。 创建一行将使子项水平对齐，创建一列将使子项垂直对齐。

flex-direction 的其他可选值还有 row-reverse 和 column-reverse。

注意： flex-direction 的默认值为 row。

浏览器中的盒子

这个宽度是互动的，最好不要设置固定值，因为设置了固定值之后，宽口的大小互动后，也会改变。

可以设置为绝对宽度,Calc()函数：用于计算长度值

  • 需要注意的是：这个函数支持加减乘除，但是前后一定要留空格
<!--
 * @Description: BOX盒子
 * @Author: xiongxinwei 3293172751nss@gmail.com
 * @Date: 2022-09-22 21:20:39
 * @LastEditTime: 2022-09-22 21:24:15
 * @FilePath: \html\box.html
 * @blog: https://nsddd.top
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height: 100%;
        }
        
        .box1{
            width:200px;
            height:100%;
            background:red;
        }
        .box2{
            /* <!-- 注意一定要留下空格 --> */
            width: calc(100% - 200px);
            height: 100%;
            background:yellow;
        }
        </style>
</head>

<body>
	<div class = "box1"></div>
	<div class = "box2"></div>    
</body>
</html>

image-20220922211239825

使用 flex-direction 在嵌入推文中创建多行

嵌入推文示例中的 header 和 footer 有自己的子元素，使用 flex-direction 属性可以把这些子元素排成行。 这个属性告诉 CSS 需要将这些子元素水平排列。

使用 justify-content 属性对齐元素

flex 子元素有时不能充满整个 flex 容器， 所以我们经常需要告诉 CSS 以什么方式排列 flex 子元素，以及调整它们的间距。 幸运的是，我们可以通过 justify-content 属性的不同值来实现。 在介绍属性的可选值之前，我们要先理解一些重要术语。

回忆一下，如果把 flex 容器设为一个行，它的子元素会从左到右逐个排列； 如果把 flex 容器设为一个列，它的子元素会从上到下逐个排列。 子元素排列的方向被称为 main axis（主轴）。 对于行，主轴水平贯穿每一个项目； 对于列，主轴垂直贯穿每一个项目。

对于如何沿主轴线排放 flex 项目，有几种选择。 很常用的一种是 justify-content: center;：即 flex 子元素在 flex 容器中居中排列。 其他选择包括：

  • flex-start：从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置 justify-content 的值，那么这就是默认值。
  • flex-end：从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部。
  • space-between：项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
  • space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
  • space-evenly：在 flex 项目之间均匀分配空间，在 flex 容器的任一端都有一个完整的空间。

使用 align-items 属性对齐元素

align-items 属性与 justify-content 类似。 回忆一下，justify-content 属性使 flex 子元素沿主轴排列。 行的主轴是水平线，列的主轴是垂直线。

Flex 容器中，与主轴垂直的叫做 cross axis（交叉轴）。 行的交叉轴是垂直的，列的交叉轴是水平的。

CSS 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。 对行来说，定义的是元素的上下对齐方式； 对列来说，是定义元素的左右对齐方式。

align-items 的可选值包括：

  • flex-start：从 flex 容器的起始位置开始对齐项目。 对行来说，把项目移至容器顶部； 对列来说，是把项目移至容器左边。
  • flex-end：从 flex 容器的终止位置开始对齐项目。 对行来说，把项目移至容器底部； 对列来说，把项目移至容器右边。
  • center：把项目居中放置。 对行来说，垂直居中（项目距离顶部和底部的距离相等）； 对列来说，水平居中（项目距离左边和右边的距离相等）。
  • stretch：拉伸项目，填满 flex 容器。 例如，排成行的项目从容器顶部拉伸到底部。 如未设置align-items的值，那么这就是默认值。
  • baseline：沿基线对齐。 基线是文本相关的概念，可以认为它是字母排列的下端基准线。

flex-grow定义子属性的长度

与 flex-shrink 相对的是 flex-grow。 你应该还记得，flex-shrink 会在容器太小时对子元素作出调整。 相应地，flex-grow 会在容器太大时对子元素作出调整。

例子与上一个挑战相似，如果一个项目的 flex-grow 属性值为 1，另一个项目的 flex-grow 属性值为 3，那么值为 3 的一个会较另一个扩大 3 倍。

使用 flex-basis 属性设置元素的初始大小

flex-basis 属性定义了在使用 CSS 的 flex-shrink 或 flex-grow 属性对元素进行调整前，元素的初始大小。

flex-basis 属性的单位与其他表示尺寸的属性的单位一致（px、em、% 等）。 如果值为 auto，则项目的尺寸随内容调整。

使用 flex 短方法属性

上面几个 flex 属性有一个简写方式。 flex-grow、flex-shrink 和 flex-basis 属性可以在 flex 中一并设置。

例如，flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。

属性的默认设置是 flex: 0 1 auto;。

请给 #box-1 和 #box-2 添加 flex 属性。 设置 #box-1 的 flex-grow 属性值为 2、flex-shrink 属性值为 2、flex-basis 属性值为 150px。 设置 #box-2 的 flex-grow 属性值为 1、flex-shrink 属性值为 1、flex-basis 属性值为 150px。

通过上面的设置，在容器大于 300px 时，#box-1 扩大的空间会是 #box-2 扩大空间的两倍；在容器小于 300px 时，前者缩小的空间会是 #box-2 缩小空间的两倍。 300px 是两个盒子的 flex-basis 属性值之和。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    flex-grow: 2;
    flex-shrink: 2;
    flex-basis:150px;
    height: 200px;
  }

  #box-2 {
    background-color: orangered;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis:150px;
    height: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

简写模式：

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    /* flex-grow: 2;
    flex-shrink: 2;
    flex-basis:150px;*/
    height: 200px; 
    flex: 2 2 150px;
  }

  #box-2 {
    background-color: orangered;
    /* flex-grow: 1;
    flex-shrink: 1;
    flex-basis:150px; */
     flex: 1 1 150px;
    height: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

image-20220920112751268

使用 order 属性重新排列子元素

order 属性告诉 CSS flex 容器里子元素的顺序。 默认情况下，项目排列顺序与源 HTML 文件中顺序相同。 这个属性接受数字作为参数，可以使用负数。

使用 align-self 属性

flex 子项目的最后一个属性是 align-self。 这个属性允许你调整单个子元素自己的对齐方式，而不会影响到全部子元素。 因为 float、clear 和 vertical-align 等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。

align-self 可设置的值与 align-items 的一样，并且它会覆盖 align-items 所设置的值。

请为 #box-1 和 #box-2 添加 CSS 属性 align-self。 将 #box-1 的 align-self 属性值设为 center，将 #box-2 的设为 flex-end。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    align-self:center;
    height: 200px;
    width: 200px;
  }

  #box-2 {
    background-color: orangered;
    align-self: flex-end;
    height: 200px;
    width: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

三栏布局

<!--
 * @Description: BOX盒子
 * @Author: xiongxinwei 3293172751nss@gmail.com
 * @Date: 2022-09-22 21:20:39
 * @LastEditTime: 2022-09-22 21:36:06
 * @FilePath: \html\三栏布局box.html
 * @blog: https://nsddd.top
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            /* 设置高度满屏显示，这样的话孩子百分之百才能有意义 */
            height: 100%;
        }
        .left,.right {
            width: 200px;
            height: 100%;
        }
        .left {
            background-color: red;
            /* 设置幅度 */
            float: left;
        }
        .right {
            background-color: aqua;
            float: right;
        }

        .center {
            /* 中间的布局 - - 保持幅度 */
            height: 100%;
            background-color: blue;
            margin-left: 200px;
            margin-right: 200px;
            /* 中间的也需要幅度 */
            width: calc(100% - 200 - 200);
            float:left;
        }
        
        </style>
</head>

<body>
	<div class = "left"></div>
	<div class = "center"></div>    
    <div class = "right"></div>

</body>
</html>

END 链接