CSS样式之弹性盒布局

Jsy_997

已于 2022-04-13 15:31:25 修改

阅读量902

点赞数

分类专栏： htmlcss 文章标签： html5 css3

于 2022-04-12 15:07:01 首次发布

本文链接：https://blog.youkuaiyun.com/Jsy_997/article/details/124123063

版权

htmlcss 专栏收录该内容

22 篇文章

订阅专栏

使用flex-wrap实现多行flex容器

使用flex-flow属性设置方向以及换行问题。

2.justify-content

值：

flex布局使用justify-content示例。

3. align-items

align-items示例

1.弹性盒的基本概念

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。

flexbox的两条线

当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。

主轴：

主轴由 flex-direction 定义，可以取4个值：

row

row-reverse

column

column-reverse

如果你选择了 row 或者 row-reverse，你的主轴将沿着 inline 方向延伸。

选择 column 或者 column-reverse 时，你的主轴会沿着上下方向延伸 — 也就是 block 排列的方向。

交叉轴

交叉轴垂直于主轴，所以如果你的flex-direction (主轴) 设成了 row 或者 row-reverse 的话，交叉轴的方向就是沿着列向下的。

如果主轴方向设成了 column 或者 column-reverse，交叉轴就是水平方向。

理解主轴和交叉轴的概念对于对齐 flexbox 里面的元素是很重要的；flexbox 的特性是沿着主轴或者交叉轴对齐之中的元素。

起始线和终止线：

另外一个需要理解的重点是 flexbox 不会对文档的书写模式提供假设。过去，CSS的书写模式主要被认为是水平的，从左到右的。现代的布局方式涵盖了书写模式的范围，所以我们不再假设一行文字是从文档的左上角开始向右书写, 新的行也不是必须出现在另一行的下面。

你可以在接下来的文章中学到更多 flexbox 和书写模式关系的详细说明。下面的描述是来帮助我们理解为什么不用上下左右来描述 flexbox 元素的方向。

如果 flex-direction 是 row ，并且我是在书写英文，那么主轴的起始线是左边，终止线是右边。

如果我在书写阿拉伯文，那么主轴的起始线是右边，终止线是左边。

在这两种情况下，交叉轴的起始线是flex容器的顶部，终止线是底部，因为两种语言都是水平书写模式。

之后，你会觉得用起始和终止来描述比左右更合适，这会对你理解其他相同模式的布局方法（例如：CSS Grid Layout）起到帮助的作用。

使用flex-wrap实现多行flex容器

虽然flexbox是一维模型，但可以使我们的flex项目应用到多行中。在这样做的时候，您应该把每一行看作一个新的flex容器。任何空间分布都将在该行上发生，而不影响该空间分布的其他行。

为了实现多行效果，请为属性flex-wrap添加一个属性值wrap。现在，如果您的项目太大而无法全部显示在一行中，则会换行显示。下面的实时例子包含已给出宽度的项目，对于flex容器，项目的子元素总宽度大于容器最大宽度。由于flex-wrap的值设置为wrap，所以项目的子元素换行显示。若将其设置为nowrap，这也是初始值，它们将会缩小以适应容器，因为它们使用的是允许缩小的初始Flexbox值。如果项目的子元素无法缩小，使用nowrap会导致溢出，或者缩小程度还不够小。

使用flex-flow属性设置方向以及换行问题。

flex-flow 属性是 flex-direction 和 flex-wrap 的简写。默认值 flex-flow:row nowrap；两个值得方向不可以对调且补填。

这里说一点，如果需要多浏览器适配，需要加上对应浏览器的前缀。

2.justify-content

justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

值：

start

从行首开始排列。每行第一个元素与行首对齐，同时所有后续的元素与前一个对齐。

flex-start

从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。

flex-end

从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。

center

伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。

left

伸缩元素一个挨一个在对齐容器得左边缘，如果属性的轴与内联轴不平行，则left的行为类似于start。

right

元素以容器右边缘为基准，一个挨着一个对齐,如果属性轴与内联轴不平行，则right的行为类似于end。

                             baseline
                             first baseline
                             last baseline

指定参与第一个或最后一个基线对齐：将框的第一个或最后一个基线集的对齐基线与其基线共享组中所有框的共享第一个或最后一个基线集中的相应基线对齐。第一个基线的后备对齐是开始，最后一个基线的后备对齐是结束。

space-between

在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。

space-around

在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

space-evenly

flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距，主轴结束位置到最后一个flex项的间距，都完全一样。

stretch

如果项目的组合大小小于对齐容器的大小，则任何自动调整大小的项目的大小均会增加（不成比例），同时仍遵守 max-height/max-width （或等效功能）施加的约束 )，以便组合大小沿主轴精确填充对齐容器。

safe

与对齐关键字一起使用，如果选定的关键字会导致元素溢出容器造成数据丢失，那么将会使用 start 代替它。

unsafe

无论项目和对齐容器的相对大小如何，都会遵循给定的对齐值。

flex布局使用justify-content示例。

这里也可以尝试其他不同的 justify-content 的值，看下效果有哪些区别。

3. align-items

align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。目前，Flexbox和CSS网格布局支持此属性。在Flexbox中，它控制十字轴上项目的对齐方式，在网格布局中，它控制块轴上项目的对齐方式。

normal

这个关键字的效果取决于我们处在什么布局模式中：

在绝对定位的布局中，对于被替代的绝对定位盒子，这个效果和start?的效果的一样；对于其他所有绝对定位的盒子，这个效果和stretch的效果一样。
在绝对定位布局的静态位置上，效果和stretch一样。
对于那些弹性项目而言，效果和stretch一样。
对于那些网格项目而言，效果和stretch一样，除了有部分比例或者一个固定大小的盒子的效果像start。
这个属性不适用于会计盒子和表格。

flex-start

元素向侧轴起点对齐。

flex-end

元素向侧轴终点对齐。

start

项目在适当的轴上朝向对齐容器的起始边缘彼此齐平地包装。

end

物品在适当的轴上朝向对齐容器的末端边缘彼此齐平地包装。

center

元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。

left

这些物品朝向对齐容器的左边缘彼此齐平地包装。如果属性的轴与内联轴不平行，则此值的行为类似于 start。

right

物品在适当的轴上朝向对齐容器的右边缘彼此齐平地包装。如果属性的轴与内联轴不平行，则此值的行为类似于 start。

self-start

项目在适当的轴上与项目起始侧的对齐容器边缘齐平包装。

self-end

项目在适当的轴上与项目端侧的对齐容器边缘齐平包装。

baseline

first baseline last baseline

所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。

stretch

弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

safe

与对齐关键字一起使用。如果选择的关键字意味着该项目溢出对齐容器导致数据丢失，则该项目将被对齐，就像对齐模式已启动一样。

unsafe

与对齐关键字一起使用。无论项目和对齐容器的相对大小以及是否可能发生导致数据丢失的溢出，都会尊重给定的对齐值。

align-items示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            height: 200px;
            width: 240px;
            align-items: center;
            /* Can be changed in the live sample */
            background-color: #8c8c8c;
        }

        .flex {
            display: flex;
            flex-wrap: wrap;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, 50px);
        }

        div>div {
            box-sizing: border-box;
            border: 2px solid #8c8c8c;
            width: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #item1 {
            background-color: #8cffa0;
            min-height: 30px;
        }

        #item2 {
            background-color: #a0c8ff;
            min-height: 50px;
        }

        #item3 {
            background-color: #ffa08c;
            min-height: 40px;
        }

        #item4 {
            background-color: #ffff8c;
            min-height: 60px;
        }

        #item5 {
            background-color: #ff8cff;
            min-height: 70px;
        }

        #item6 {
            background-color: #8cffff;
            min-height: 50px;
            font-size: 30px;
        }

    </style>
</head>

<body>
    <div id="container" class="flex">
        <div id="item1">1</div>
        <div id="item2">2</div>
        <div id="item3">3</div>
        <div id="item4">4</div>
        <div id="item5">5</div>
        <div id="item6">6</div>
      </div>
</body>

</html>