Flex弹性盒模型布局及属性使用方法与场景

小九儿的春天

已于 2023-11-24 09:19:58 修改

阅读量81

点赞数

文章标签： css css3 前端 javascript

于 2023-11-23 16:57:49 首次发布

本文链接：https://blog.csdn.net/weixin_41835811/article/details/134569251

版权

一、Flex布局是的基本概念

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

任何一个容器都可以指定为Flex布局，设置为flex布局以后子元素设置float、clear和vertical-align属性失效

.box{
	display: flex;  // 行内元素可以使用 inline-flex
	display: -webkit-flex; // Webkit内核的浏览器，必须加上-webkit前缀
}

flexxbox的两根轴线

当使用 flex 布局时，首先想到的是两根轴线 —> 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。
主轴是由 flex-direction 定义，可以取4个值：
row(默认值)：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
colum-reverse：主轴为垂直方向，起点在下沿
如果主轴设置成 row 或者 row-reverse，主轴将沿着 inline 方向延伸。

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

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

二、Flex容器

文档中采用了 flexbox 的区域就叫做 flex 容器。为了创建 flex 容器，我们把一个容器的 display 属性值改为 flex 或者 inline-flex。完成这一步之后，容器中的直系子元素就会变为 flex 元素。由于所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

元素排列为一行 (flex-direction 属性的初始值是 row)。
元素从主轴的起始线开始。
元素不会在主维度方向拉伸，但是可以缩小。
元素被拉伸来填充交叉轴大小。
flex-basis 属性为 auto。
flex-wrap 属性为 nowrap。

这会让容器下的子元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小
flex-direction: row; 默认情况可以不设置

更改 flex 方向 flex-direction

flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

用flex-wrap实现多行Flex容器

对于flex容器，项目子元素总宽度大于容器最大宽度，如果flex-wrap的值设置为wrap，容器内的子元素换行显示。若将flex-wrap的值设置为nowrap，这也是默认初始值，子元素将会缩小以适应容器（默认使用允许缩小的初始Flexbox值）。如果项目的子元素无法缩小，使用nowrap会导致溢出，或者缩小程度还不够小。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

换行第一行在上方
换行第一行在下方

默认值不换行;

简写属性flex-flow

可以将两个属性 flex-direction 和 flex-wrap 组合为简写属性 flex-flow。第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap。
flex-flow简写

.box {
  display: flex;
  flex-flow: row wrap;
}
<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

flex元素上的属性

flex-grow、flex-shrink、flex-basis
在介绍这三个属性的作用之前，先了解一下可用空间 available space 这个概念。这几个 flex 属性的作用其实就是改变了 flex 容器中的可用空间的行为。同时，可用空间对于 flex 元素的对齐行为也是很重要的。

例1：假设在 1 个 500px 的容器中，我们有 3 个 100px 宽的元素，那么这 3 个元素需要占 300px 的宽，剩下 200px 的可用空间。在默认情况下，flexbox 的行为会把这 200px 的空间留在最后一个元素的后面。
在这里插入图片描述
如果想要这些元素能自动地扩展去填充满剩下的空间，那么我们需要去控制可用空间在这几个元素间如何分配，这就是元素上的那些 flex 属性要做的事。

flex-basis

flex-basis 定义了该元素的空间大小，flex 容器里除了元素所占的空间以外的富余空间就是可用空间。该属性的默认值是 auto，此时，浏览器会检测这个元素是否具有确定的尺寸。在上面例1中，所有元素都设定了宽度（width）为 100px，所以 flex-basis 的值为 100px。如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。

<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>

<ul class="container">
  <li class="flex flex6">6: flex-basis test</li>
</ul>

.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6ab6d8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2e86bb;
  color: white;
  font-size: 20px;
  text-align: center;
  position: relative;
}

.flex1 {
  flex-basis: auto;
}
.flex2 {
  flex-basis: max-content;
}
.flex3 {
  flex-basis: min-content;
}
.flex4 {
  flex-basis: fit-content;
}

.flex5 {
  flex-basis: content;
}

.flex6 {
  flex-basis: fill;
}

代码运行结果

flex-grow

flex-grow 若被赋值为一个正整数，flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。
如果我们给上例中的所有元素设定 flex-grow 值为 1，容器中的可用空间会被这些元素平分。它们会延展以填满容器主轴方向上的空间。
flex-grow 属性可以按比例分配空间。如果第一个元素 flex-grow 值为 2，其他元素值为 1，则第一个元素将占有 2/4（上例中，即为 200px 中的 100px）, 另外两个元素各占有 1/4（各 50px）。

<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>

#content {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

在这里插入图片描述

flex-shrink

flex-grow属性是处理 flex 元素在主轴上增加空间的问题，相反flex-shrink属性是处理 flex 元素收缩的问题。如果我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制 flex 元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>

#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}

在这里插入图片描述

Flex 属性的简写

Flex 简写形式允许把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。
第一个数值是 flex-grow。赋值为正数的话是让元素增加所占空间。第二个数值是flex-shrink — 正数可以让它缩小所占空间，但是只有在 flex 元素总和超出主轴才会生效。最后一个数值是 flex-basis；flex 元素是在这个基准值的基础上缩放的。
在这里插入图片描述
大多数情况下可以用预定义的简写形式。flex: initial；flex: auto；flex: none；flex:
flex: initial 是把 flex 元素重置为 Flexbox 的初始值，它相当于 flex: 0 1 auto。
flex: auto 等同于 flex: 1 1 auto；元素既可以拉伸也可以收缩
flex: none 可以把 flex 元素设置为不可伸缩。它和设置为 flex: 0 0 auto 是一样的。元素既不能拉伸或者收缩