乐趣区

关于css:css布局flex弹性布局移动端完美解决方案

Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了弱小的空间散布和对齐能力。本文给出了 flexbox 的次要个性。

咱们说 flexbox 是一种一维的布局,是因为一个 flexbox 一次只能解决一个维度上的元素布局,一行或者一列。作为比照的是另外一个二维布局网格布局,当前会和大家讲到

目录

1,如何应用
2,Flexbox 的两根轴线
3,Flex 容器
4,API 以及用例

1,- 如何应用 - 因为 css 用法过于简略,所以先给大家介绍简略的应用办法,随后介绍一些重要的概念

    <style type="text/css">
        #flex-box {
            background: #ccc;
            display: flex;  /* display 属性规定元素应该生成的框的类型,咱们是 flex*/
            flex-direction: row; /* 接下来咱们会讲到 */
        }
        #flex-box > div {
            background: #5990dc;
            margin: 20px;
            padding: 40px;
        }
    </style>
    <div id="flex-box">
        <div>block1</div>
        <div>block2</div>
        <div>block3</div>
    </div>

效果图如下:

2,- Flexbox 的两根轴线

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

主轴

主轴由 flex-direction 定义,能够取 4 个值:

  • row
  • row-reverse
  • column
  • column-reverse
    如果你抉择了 row 或者 row-reverse,你的主轴将沿着 inline 方向延长。

如果你抉择了 row 或者 row-reverse,你的主轴将沿着 inline 方向延长。

抉择 column 或者 column-reverse 时,你的主轴会沿着高低方向延长 — 也就是 block 排列的方向。

穿插轴

[](https://developer.mozilla.org…

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

如果主轴方向设成了 column 或者 column-reverse,穿插轴就是程度方向。

了解主轴和穿插轴的概念对于对齐 flexbox 外面的元素是很重要的;flexbox 的个性是沿着主轴或者穿插轴对齐之中的元素。

Flex 容器

文档中采纳了 flexbox 的区域就叫做 flex 容器。为了创立 flex 容器,咱们把一个容器的 display 属性值改为 flex 或者 inline-flex。 实现这一步之后,容器中的直系子元素就会变为 flex 元素。所有 CSS 属性都会有一个初始值,所以 flex 容器中的所有 flex 元素都会有下列行为:

  • 元素排列为一行 (flex-direction 属性的初始值是 row)。
  • 元素从主轴的起始线开始。
  • 元素不会在主维度方向拉伸,然而能够放大。
  • 元素被拉伸来填充穿插轴大小。
  • flex-basis 属性为 auto。
  • flex-wrap 属性为 nowrap。

这会让你的元素呈线形排列,并且把本人的大小作为主轴上的大小。如果有太多元素超出容器,它们会溢出而不会换行。如果一些元素比其余元素高,那么元素会沿穿插轴被拉伸来填满它的大小。

Flex 布局次要的 API

display: flex; 规定元素应该生成 flex 的类型,直系子元素就会变为 flex 元素
flex-direction: row | column | row-reverse | column-reverse; 更改 flex 方向

为了更好地管制 flex 元素,有三个属性能够作用于它们:在应用这三个属性之前咱们简略理解一下布局空白(available space)这个概念

flex-grow 定义了该元素的布局空白(available space)的基准值。该属性的默认值是 auto。此时,浏览器会检测这个元素是否具备确定的尺寸。在下面的例子中, 所有元素都设定了宽度(width)为 100px,所以 flex-basis 的值为 100px。

如果没有给元素设定尺寸,flex-basis 的值采纳元素内容的尺寸。这就解释了:咱们给只有给 Flex 元素的父元素申明 display: flex,所有子元素就会排成一行,且主动调配小大以充沛展现元素的内容。

flex-shrink flex-grow 若被赋值为一个正整数,flex 元素会以 flex-basis 为根底,沿主轴方向增长尺寸。这会使该元素延展,并占据此方向轴上的布局空白(available space)。如果有其余元素也被容许延展,那么他们会各自占据布局空白的一部分。

如果咱们给上例中的所有元素设定 flex-grow 值为 1,容器中的布局空白会被这些元素平分。它们会延展以填满容器主轴方向上的空间。
flex-grow 属性能够按比例调配空间。如果第一个元素 flex-grow 值为 2,其余元素值为 1,则第一个元素将占有 2 /4(上例中,即为 200px 中的 100px), 另外两个元素各占有 1 /4(各 50px)。

flex-basis属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不应用 box-sizing 来扭转盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。”

这三个属性为了不便编码,咱们个别都会混合着写在 flex 简写模式中:

    <style type="text/css">
        #flex-box {
            background: #ccc;
            display: flex;
            flex-direction: row;
        }
        #flex-box > div {
            flex: 1 1 auto;  /* 从左到右的参数顺次为 flex-grow,flex-shrink,flex-basis */
            background: #5990dc;
            margin: 20px;
            padding: 40px;
        }
    </style>
    <div id="flex-box">
        <div>block1</div>
        <div>block2</div>
        <div>block3</div>
    </div>

咱们来看看 flex 元素自适应后的成果

flex 元素对齐和空间调配

align-items属性将所有间接子节点上的 align-self 值设置为一个组。align-self 属性设置我的项目在其蕴含块中的对齐形式。”) 属性能够使元素在穿插轴方向对齐。
这个属性的初始值为 stretch,这就是为什么 flex 元素会默认被拉伸到最高元素的高度。实际上,它们被拉伸来填满 flex 容器 —— 最高的元素定义了容器的高度。

你也能够设置 align-items 的值为 flex-start,使 flex 元素按 flex 容器的顶部对齐, flex-end 使它们按 flex 容器的下部对齐, 或者 center 使它们居中对齐. 在实例中尝试——我给出了 flex 容器的高度,以便你能够看到元素在容器中挪动。看看如果更改 align-items 的值为下列值会产生什么:

  • stretch
  • flex-start
  • flex-end
  • center
<style type="text/css">
        #flex-box {
            height: 400px;
            background: #ccc;
            display: flex;
            flex-direction: row;
            align-items: center;   /* 这个时候 flex 元素就会在穿插轴的中央居中对齐 */
        }
        #flex-box > div {
            /* flex: 1 1 auto;  为了更不便查看成果,咱们先正文 */
            background: #5990dc;
            margin: 20px;
            padding: 40px;
        }
    </style>
    <div id="flex-box">
        <div>block1</div>
        <div>block2</div>
        <div>block3</div>
    </div>

justify-content属性用来使元素在主轴方向上对齐,主轴方向是通过 flex-direction 设置的方向。初始值是flex-start,元素从容器的起始线排列。然而你也能够把值设置为flex-end,从终止线开始排列,或者center,在两头排列.

你也能够把值设置为space-between,把元素排列好之后的残余空间拿进去,平均分配到元素之间,所以元素之间距离相等。或者应用space-around,使每个元素的左右空间相等。

在实例中尝试下列 justify-content 属性的值:

  • stretch
  • flex-start
  • flex-end
  • center
  • space-around
  • space-between
<style type="text/css">
        #flex-box {
            height: 400px;
            background: #ccc;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;  /* 联合 align-items:center 和 justify-content: center 咱们就能实现咱们所说的垂直程度居中 */
        }
        #flex-box > div {
            /*flex: 1 1 auto;*/
            background: #5990dc;
            margin: 20px;
            padding: 40px;
        }
    </style>
    <div id="flex-box">
        <div>block1</div>
        <div>block2</div>
        <div>block3</div>
    </div>

最终成果:

退出移动版