弹性盒子—CSS学习笔记

龙二_
70 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情

前言

在之前，我们css布局多用float和position，虽然跨浏览器兼容性好，但其实一些布局效果它们是无法很方便地实现的，例如垂直居中子元素、使父容器中所有子元素等高/等宽排列。下面我们便来了解弹性盒子，它能很轻易完成这些效果。

弹性盒子

什么是弹性盒子

弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间

示例

<h1>flexbox example</h1>
<div class="content">
<div class="box">
    <h2>First flexItem</h2>
    <p>
        Life is ...
    </p>
</div>
​
<div class="box">
    <h2>Second flexItem</h2>
    <p>
        Best of ...
    </p>
</div>
​
<div class="box">
    <h2>Third flexItem</h2>
    <p>
        You're amazing! ...
    </p>
    <p>
        You must ...
    </p>
</div>
</div>

body {
    margin: 0;
}
​
h1 {
    text-align: center;
    line-height: 100px;
    margin: 0;
}
​
.box {
    padding: 10px;
    margin: 10px;
    background: darkgray;
}

效果：

image.png

以上示例的段落块默认都是占满父元素宽度，高度为内容高度。但我们想要它们等宽均匀分布在父盒子中，且高度与最高的子元素保持一致。

设为弹性盒子

我们将这些子元素的父盒子所在的class添加一个display:flex属性

再到通用子元素class添加flex:1就可以发现

image.png

它们等宽分布在父盒子中,且高度与最高的子元素保持一致。也许到这里你会感到困惑，它们是怎么发生的呢？不要着急，我们先了解一下flex模型。

flex模型

首先对于设置了display:flex的父元素我们称为flex容器（flex container） ，即内部容纳表现为柔性盒子的元素的容器。而对于内部的这些“柔性盒子”元素我们统称为flex项（flex item） 。在这些flex元素放置的方向上有一条延伸的轴称为主轴（main axis） ，轴的开始和结束称为main start和main end。垂直flex元素的方向上还有一条轴称为交叉轴（cross axis） ，轴的开始和结束被称为 cross start 和 cross end。下面我们用一张图来看一下。

image.png

弹性盒子相关属性说明

  • 指定主轴方向：flex-direction可以指定主轴的方向，默认为row，即排成一排，而row-reverse只是调换了main start和main end的方向。还有按列排的就是column，column-reverse和row-reverse同理。

  • 换行：当我们对flex项定宽或定高的时候，有可能会出现个别flex项溢出flex容器的情况。这个时候可以使用flex-wrap:wrap就可以在出现溢出元素的时候换行。

  • 上面两个属性可以缩写为flex-flow:row wrap，flex-wrap是flex-direction和flex-wrap的缩写。

  • flex项的动态尺寸：现在回到我们开头的例子可以发现对flex项设了flex:1。这是一个缩写属性，这里指的是flex-glow的值。这是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。上例中，我们设置flex项元素的 flex-glow 值为 1，这表示每个元素占用空间都是相等的，占用的空间是在设置 padding 和 margin 之后剩余的空间。因为它是一个比例，这意味着将每个 flex 项的设置为 100 的效果和 1 的时候是完全一样的。

    第二个无单位比例 flex-shrink 一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。 第三个是基础值。可以单独指定全写 flex-basis 属性的值（px、em、%）。也可与flex-glow同时指定，会先按基础值设定flex项的尺寸再根据可用空间重新分配大小。

  • 水平和垂直对齐：此项是针对flex容器的属性。 align-items 控制 flex 项在交叉轴上的位置。默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。也是上例在默认情况下得到相等的高度的列的原因。还有center沿交叉轴垂直居中。也可以设flex start向交叉轴开始对齐或flex-end向交叉轴结束对齐。

  • flex项排序：弹性盒子也有可以改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）。例如对想要放在容器第一位的flex项设order:1。order有以下几项规则 1.所有 flex 项默认的 order 值是 0。 2.order 值大的 flex 项比 order 值小的在显示顺序中更靠后。 3.相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是 2，1，1 和 0，那么它们的显示顺序就分别是第四，第二，第三，和第一。

avatar
文章
阅读
粉丝