devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS - flex_inline 型的标签为什么给父级设置了display felx 就可以设置宽高了?

作者：2023面试高手 | 2024-03-15 14:48:57

赞

踩

inline 型的标签为什么给父级设置了display felx 就可以设置宽高了?
CSS2.1定义了四种布局方式，由一个盒与其兄弟，祖先盒的关系决定其尺寸与位置的算法。
块布局：呈现文档的布局模式。
行内布局：呈现文本的布局模式。
表格布局：用表格呈现2D数据的布局模式。

定位布局：能够直接地定位元素的布局模式，定位元素奴基本与其他元素没有任何关系。

CSS3引入的flex布局，主要思想是让容器有能力控制子项目的高度，宽度（设置顺序）。以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填满可用空间，或者缩小以防止溢出容器。

最重要的是flex布局方向不可预知，不像常规的布局（块就是从上到下，内联就是从左到右），常规布局适合页面布局，但是对于支持大型或者复杂的应用程序（特别是涉及方向布局方向的改变，缩放或者收缩）就缺乏灵性。


flex的模型规范状态

我们可以使用的具体属性值来判断当前使用的flex的版本。
旧版本（Old: 2009）使用display:box或者display:inline-box。
混合版本（Hybrid: 2011）使用display:flexbox或者display:inline-flexbox。
最新版本（Modern 2012） 使用display:flex或者inline-flex。

最新版本的浏览器的兼容性


详情可以访问flex的兼容性
这里兼容性的主要问题是IE，IE10需要使用-ms-。至于IE8和IE9的兼容性，需要使用flex.js。

新版本flex模型的基本使用

本文主要是学习最新版本的flex模型。学习之前还是了解基本知识。


flex模型中的术语

主轴和侧轴


  • 主轴(main axis):Flex容器的主轴主要用来配置Flex项目。注意，它不一定是水平，这主要取决于flex-direction属性。
  • 主轴开始（main-start） | 主轴结束（main-end）:Flex项目的配置从容器的主轴起点边开始，往主轴终点边结束。
  • 主轴长度（main size）:Flex项目的在主轴方向的宽度或高度就是项目的主轴长度，Flex项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。
  • 侧轴（cross axis）:与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
  • 侧轴开始（cross-start） | 策州结束（cross-end）:伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
  • 侧轴长度(cross size):Flex项目的在侧轴方向的宽度或高度就是项目的侧轴长度，Flex项目的侧轴长度属性是width或height属性，由哪一个对着侧轴方向决定。

伸缩容器和伸缩项目

  • 通过display显示地给一个元素设置为flex或者inline-flex，这个容器就是一个伸缩容器。伸缩容器回为其内容创建新的伸缩格式话上下文，其中设置为flex的容器被渲染为一个块级元素，二设置为inline-flex的容器被渲染为一个行内元素。
  • 元素display为inline-flex且元素是一个浮动或者绝对定位，则display的计算值是flex。
  • 一个伸缩容器的每一个子元素都会成为一个伸缩项目

flex模型的功能

  • 屏幕和浏览器窗口大小发生改变也可以灵活调整布局。
  • 指定伸缩项目沿着主轴或者侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小。
  • 指定伸缩项目沿着主轴或者侧轴将伸缩容器额外空间，分配到伸缩项目之前，之后或者之间。
  • 指定如何将垂直于元素布局轴的额外空间分配到该元素的周围。
  • 控制元素在页面上的布局方向
  • 按照不同与文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。
  • 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

伸缩容器的属性

简单的flex例子
 
  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Document</title>  
  6.         <style type="text/css">
  7.             div {
  8.                 border: 2px solid black;
  9.                 border-radius: 5px;
  10.             }
  11.  
  12.             .parent-flex {
  13.                 width: 800px;
  14.                 height: 400px;
  15.                 background-color: rgb(250,234,202);
  16.  
  17.                 display: flex;
  18.                 flex-direction: row;
  19.             }
  20.  
  21.             .child-flex {
  22.                 width: 200px;
  23.                 height: 200px;
  24.                 background-color: rgb(203,234,253);
  25.             }
  26.         </style>
  27.     </head>  
  28.     <body>
  29.         <div class="parent-flex">
  30.             <div class="child-flex">
  31.                 flex item1
  32.             </div>
  33.             <div class="child-flex">
  34.                 flex item2
  35.             </div>
  36.             <div class="child-flex">
  37.                 flex item3
  38.             </div>
  39.         </div>
  40.     </body>  
  41. </html>
当在父元素加上display:flex之后，内部子元素变成了如图的样子，自动排列起来。

伸缩流方向flex-direction
伸缩器容器的主轴方向，其决定了伸缩项目放置在伸缩容器的方向。伸缩流方向通过flex-direction属性来设置，其默认值为row。

flex-direction: row | row-reverse | column | column-reverse;
  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

测试上面的例子：修改为row-reverse

  1. .parent-flex {
  2.     width: 800px;
  3.     height: 400px;
  4.     background-color: rgb(250,234,202);
  5.  
  6.     display: flex;
  7.     flex-direction: row-reverse;
  8. }


伸缩行换行flex-wrap
默认情况下，子元素项目都排在一条线。但是许多情况下子元素的排列不仅一行。在伸缩容器中有一个伸缩换行属性，主要用来设置伸缩容器的伸缩项目是当行还是多行显示，以及决定侧轴的方向。

flex-wrap: nowrap | wrap | wrap-reverse;
  • nowrap（默认）：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。
测试例子： 
  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Document</title>  
  6.         <style type="text/css">
  7.             div {
  8.                 border: 2px solid black;
  9.                 border-radius: 5px;
  10.             }
  11.  
  12.             .parent-flex {
  13.                 width: 800px;
  14.                 height: 400px;
  15.                 background-color: rgb(250,234,202);
  16.  
  17.                 display: flex;
  18.                 flex-direction: row;
  19.             }
  20.  
  21.             .child-flex {
  22.                 width: 200px;
  23.                 height: 200px;
  24.                 background-color: rgb(203,234,253);
  25.             }
  26.         </style>
  27.     </head>  
  28.     <body>
  29.         <div class="parent-flex">
  30.             <div class="child-flex">
  31.                 flex item1
  32.             </div>
  33.             <div class="child-flex">
  34.                 flex item2
  35.             </div>
  36.             <div class="child-flex">
  37.                 flex item3
  38.             </div>
  39.              <div class="child-flex">
  40.                 flex item4
  41.             </div>
  42.              <div class="child-flex">
  43.                 flex item5
  44.             </div>
  45.         </div>
  46.     </body>  
  47. </html>

上面的例子：我又添加了两个div子元素，这种情况下，父元素的宽度不够渲染所有的子元素。我们先来看一下，当前情况下子元素会如何渲染。


我们可以看到flex将子元素的宽度自适应充满当前父元素的宽度。目前我们可以先不理会这种显示的原因。只需要记得当前的页面展示。然后修改父元素如下：
 
  1. .parent-flex {
  2.     width: 800px;
  3.     height: 400px;
  4.     background-color: rgb(250,234,202);
  5.  
  6.     display: flex;
  7.     flex-direction: row;
  8.     flex-wrap: wrap;
  9. }

伸缩方向与换行flex-flow

伸缩流方向与伸缩换行的结合物。也就是说flex-flow同时设定了flex-direction和flex-wrap两个属性，也就是这两个属性的缩写，决定了伸缩容器的主轴和侧轴。

flex-flow: <flex-direction> <flex-wrap>;

测试，使用flex-flow实现上面flex-flow的测试例子效果。
 
  1. .parent-flex {
  2.     width: 800px;
  3.     height: 400px;
  4.     background-color: rgb(250,234,202);
  5.  
  6.     display: flex;
  7.     flex-flow:wrap row ;
  8. }

主轴对齐方式justify-content
用来设置伸缩容器内当前伸缩项目在主轴方向的对齐方式，指定如何在伸缩项目之间分布伸缩容器额外空间。

当伸缩项目溢出某一行时，这一属性也会在项目的对以上增加一些控制。

justify-content: flex-start | flex-end | center | space-between | space-around;
  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Document</title>  
  6.         <style type="text/css">
  7.             div {
  8.                 border: 2px solid black;
  9.                 border-radius: 5px;
  10.             }
  11.  
  12.             .child-flex {
  13.                 width: 200px;
  14.                 height: 100px;
  15.                 background-color: rgb(203,234,253);
  16.             }
  17.  
  18.             .parent {
  19.                 width: 800px;
  20.                 background-color: rgb(250,234,202);
  21.                 display: flex;
  22.             }
  23.  
  24.             .flex-start {
  25.                 justify-content: flex-start;
  26.             }
  27.  
  28.             .flex-end {
  29.                 justify-content: flex-end;
  30.             }
  31.  
  32.             .flex-center {
  33.                 justify-content: center;
  34.             }
  35.  
  36.             .flex-space-between {
  37.                 justify-content: space-between;
  38.             }
  39.  
  40.             .flex-space-around {
  41.                 justify-content: space-around;
  42.             }
  43.         </style>
  44.     </head>  
  45.     <body>
  46.         <div class="flex-start parent">
  47.             <div class="child-flex">
  48.                 flex-start
  49.             </div>
  50.             <div class="child-flex">
  51.                 flex-start
  52.             </div>
  53.             <div class="child-flex">
  54.                 flex-start
  55.             </div>
  56.         </div>
  57.         <br />
  58.         <div class="flex-end parent">
  59.             <div class="child-flex">
  60.                 flex-end
  61.             </div>
  62.             <div class="child-flex">
  63.                 flex-end
  64.             </div>
  65.             <div class="child-flex">
  66.                 flex-end
  67.             </div>
  68.         </div>
  69.         <br />
  70.         <div class="flex-center parent">
  71.             <div class="child-flex">
  72.                 center
  73.             </div>
  74.             <div class="child-flex">
  75.                 center
  76.             </div>
  77.             <div class="child-flex">
  78.                 center
  79.             </div>
  80.         </div>
  81.         <br />
  82.         <div class="flex-space-between parent">
  83.             <div class="child-flex">
  84.                 space-between
  85.             </div>
  86.             <div class="child-flex">
  87.                 space-between
  88.             </div>
  89.             <div class="child-flex">
  90.                 space-between
  91.             </div>
  92.         </div>
  93.         <br />
  94.         <div class="flex-space-around parent">
  95.             <div class="child-flex">
  96.                 space-around
  97.             </div>
  98.             <div class="child-flex">
  99.                 space-around
  100.             </div>
  101.             <div class="child-flex">
  102.                 space-around
  103.             </div>
  104.         </div>
  105.     </body>  
  106. </html>


侧轴对齐方式align-items
文章开头说过flex布局的主轴方向和侧轴方向，justify-content说的是主轴，align-items则是侧轴。如文字描述，侧轴对齐方式说的是侧轴方向对齐方式。
 
  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Document</title>  
  6.         <style type="text/css">
  7.             div {
  8.                 border: 2px solid black;
  9.                 border-radius: 5px;
  10.             }
  11.  
  12.             .child-flex {
  13.                 width: 200px;
  14.                 height: 100px;
  15.                 background-color: rgb(203,234,253);
  16.             }
  17.  
  18.             .parent {
  19.                 width: 800px;
  20.                 height: 600px;
  21.                 background-color: rgb(250,234,202);
  22.                 display: flex;
  23.             }
  24.  
  25.             .flex-space-around {
  26.                 justify-content: space-around;
  27.             }
  28.         </style>
  29.     </head>  
  30.     <body>
  31.         <div class="flex-space-around parent">
  32.             <div class="child-flex">
  33.                 space-around
  34.             </div>
  35.             <div class="child-flex">
  36.                 space-around
  37.             </div>
  38.             <div class="child-flex">
  39.                 space-around
  40.             </div>
  41.         </div>
  42.     </body>  
  43. </html>

如图，可以看到当前三个div元素按照space-around主轴对齐，但是我们想一下侧轴，此时以侧轴方向来说可以看到div元素位置在上边框位置。我们可以通过align-content来进行侧轴方向的位置布局。

  1. .flex-space-around {
  2.     justify-content: space-around;
  3.     align-items:center;
  4. }

align-items: flex-start | flex-end | center | baseline | stretch;
  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。


堆栈轴对齐align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

理解这个属性的还是需要flex-wrap。

  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Document</title>  
  6.         <style type="text/css">
  7.             div {
  8.                 border: 2px solid black;
  9.                 border-radius: 5px;
  10.             }
  11.  
  12.             .child-flex {
  13.                 width: 200px;
  14.                 height: 100px;
  15.                 background-color: rgb(203,234,253);
  16.             }
  17.  
  18.             .parent {
  19.                 width: 800px;
  20.                 height: 600px;
  21.                 background-color: rgb(250,234,202);
  22.                 display: flex;
  23.             }
  24.  
  25.             .flex-space-around {
  26.                 justify-content: space-around;
  27.                 flex-wrap: wrap;
  28.             }
  29.         </style>
  30.     </head>  
  31.     <body>
  32.         <div class="flex-space-around parent">
  33.             <div class="child-flex">
  34.                 space-around
  35.             </div>
  36.             <div class="child-flex">
  37.                 space-around
  38.             </div>
  39.             <div class="child-flex">
  40.                 space-around
  41.             </div>
  42.             <div class="child-flex">
  43.                 space-around
  44.             </div>
  45.             <div class="child-flex">
  46.                 space-around
  47.             </div>
  48.         </div>
  49.     </body>  
  50. </html>


现在我们使用align-item和align-content的作用效果。

  1. .flex-space-around {
  2.     justify-content: space-around;
  3.     flex-wrap: wrap;
  4.     align-items: :center;
  5. }

  1. .flex-space-around {
  2.     justify-content: space-around;
  3.     flex-wrap: wrap;
  4.     align-content: center;
  5. }


伸缩项目的属性

一个伸缩容器项目是一个伸缩容器的子元素。伸缩容器的文本也是被认为是一个伸缩项目。伸缩项目中内容与普通流一样。伸缩项目都有一个主轴长度和一个侧轴长度。主轴长度是伸缩项目在主轴上的尺寸，侧轴长度是伸缩项目在侧轴上的尺寸。

默认情况下侧轴长度和父元素的侧轴的长度相同。之前说到的align-items: stretch已经说过。
显示顺序order

伸缩容器中的伸缩项目默认显示顺序是遵守文档在源码中出现的先后顺序。我们可以通过伸缩项目的显示顺序修改伸缩项目在页面中的显示顺序。

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order: <integer>;

  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Document</title>  
  6.         <style type="text/css">
  7.             div {
  8.                 border: 2px solid black;
  9.                 border-radius: 5px;
  10.             }
  11.  
  12.             .child-flex {
  13.                 width: 200px;
  14.                 background-color: rgb(203,234,253);
  15.                 display: flex;
  16.                 justify-content: center;
  17.                 align-items: center;
  18.             }
  19.  
  20.             .parent {
  21.                 width: 800px;
  22.                 height: 600px;
  23.                 background-color: rgb(250,234,202);
  24.                 display: flex;
  25.             }
  26.         </style>
  27.     </head>  
  28.     <body>
  29.         <div class="flex-space-around parent">
  30.             <div class="child-flex">
  31.                 1
  32.             </div>
  33.             <div class="child-flex">
  34.                 2
  35.             </div>
  36.             <div class="child-flex">
  37.                 3
  38.             </div>
  39.         </div>
  40.     </body>  
  41. </html>

接下来我们使用order将顺序改为213.

  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Document</title>  
  6.         <style type="text/css">
  7.             div {
  8.                 border: 2px solid black;
  9.                 border-radius: 5px;
  10.             }
  11.  
  12.             .child-flex {
  13.                 width: 200px;
  14.                 background-color: rgb(203,234,253);
  15.                 display: flex;
  16.                 justify-content: center;
  17.                 align-items: center;
  18.             }
  19.  
  20.             .child-flex:nth-child(1) {
  21.                 order: 1;
  22.             }
  23.  
  24.             .child-flex:nth-child(3) {
  25.                 order: 2;
  26.             }
  27.  
  28.             .parent {
  29.                 width: 800px;
  30.                 height: 600px;
  31.                 background-color: rgb(250,234,202);
  32.                 display: flex;
  33.             }
  34.         </style>
  35.     </head>  
  36.     <body>
  37.         <div class="flex-space-around parent">
  38.             <div class="child-flex">
  39.                 1
  40.             </div>
  41.             <div class="child-flex">
  42.                 2
  43.             </div>
  44.             <div class="child-flex">
  45.                 3
  46.             </div>
  47.         </div>
  48.     </body>  
  49. </html>
侧轴对齐align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

  • 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Document</title>  
  6.         <style type="text/css">
  7.             div {
  8.                 border: 2px solid black;
  9.                 border-radius: 5px;
  10.             }
  11.  
  12.             .child-flex {
  13.                 width: 200px;
  14.                 height: 100px;
  15.                 background-color: rgb(203,234,253);
  16.                 display: flex;
  17.                 justify-content: center;
  18.                 align-items: center;
  19.             }
  20.  
  21.             .child-flex:nth-child(3) {
  22.                 align-self: center;
  23.             }
  24.  
  25.             .parent {
  26.                 width: 800px;
  27.                 height: 600px;
  28.                 background-color: rgb(250,234,202);
  29.                 display: flex;
  30.             }
  31.         </style>
  32.     </head>  
  33.     <body>
  34.         <div class="flex-space-around parent">
  35.             <div class="child-flex">
  36.                 1
  37.             </div>
  38.             <div class="child-flex">
  39.                 2
  40.             </div>
  41.             <div class="child-flex">
  42.                 3
  43.             </div>
  44.         </div>
  45.     </body>  
  46. </html>



放大属性flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-grow: <number>; /* default 0 */

我们还用上面的例子，只是修改下面的css

  1. .child-flex:nth-child(3) {
  2.     flex-grow: 1;
  3. }


如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

伸缩项目的放大属性是需要根据空余空间来决定的。下面的例子将所有的子元素都扩大一倍。

  1. .child-flex {
  2.     width: 200px;
  3.     height: 100px;
  4.     background-color: rgb(203,234,253);
  5.     display: flex;
  6.     justify-content: center;
  7.     align-items: center;
  8.     flex-grow: 1;
  9. }

可以看到大家平分了空余空间。注意这里的放大并不是相对伸缩项目的，而是针对空余空间的。
缩小属性flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-shrink: <number>; /* default 1 */

  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Document</title>  
  6.         <style type="text/css">
  7.             div {
  8.                 border: 2px solid black;
  9.                 border-radius: 5px;
  10.             }
  11.  
  12.             .child-flex {
  13.                 width: 200px;
  14.                 height: 100px;
  15.                 background-color: rgb(203,234,253);
  16.                 display: flex;
  17.                 justify-content: center;
  18.                 align-items: center;
  19.             }
  20.  
  21.             .child-flex:nth-child(1) {
  22.                 flex-shrink: 0;
  23.             }
  24.  
  25.             .child-flex:nth-child(2) {
  26.                 flex-shrink: 1;
  27.             }
  28.  
  29.             .child-flex:nth-child(3) {
  30.                 flex-shrink: 1;
  31.             }
  32.  
  33.             .parent {
  34.                 height: 600px;
  35.                 background-color: rgb(250,234,202);
  36.                 display: flex;
  37.             }
  38.         </style>
  39.     </head>  
  40.     <body>
  41.         <div class="flex-space-around parent">
  42.             <div class="child-flex">
  43.                 1
  44.             </div>
  45.             <div class="child-flex">
  46.                 2
  47.             </div>
  48.             <div class="child-flex">
  49.                 3
  50.             </div>
  51.         </div>
  52.     </body>  
  53. </html>

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex-basis: <length> | auto; /* default auto */


  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Document</title>  
  6.         <style type="text/css">
  7.             div {
  8.                 border: 2px solid black;
  9.                 border-radius: 5px;
  10.             }
  11.  
  12.             .child-flex {
  13.                 width: 200px;
  14.                 height: 100px;
  15.                 background-color: rgb(203,234,253);
  16.                 display: flex;
  17.                 justify-content: center;
  18.                 align-items: center;
  19.             }
  20.  
  21.             .child-flex:nth-child(1) {
  22.                 flex-basis: 300px;
  23.             }
  24.  
  25.             .parent {
  26.                 height: 600px;
  27.                 background-color: rgb(250,234,202);
  28.                 display: flex;
  29.             }
  30.         </style>
  31.     </head>  
  32.     <body>
  33.         <div class="flex-space-around parent">
  34.             <div class="child-flex">
  35.                 1
  36.             </div>
  37.             <div class="child-flex">
  38.                 2
  39.             </div>
  40.             <div class="child-flex">
  41.                 3
  42.             </div>
  43.         </div>
  44.     </body>  
  45. </html>


当前例子的第一个子元素宽为200px,flex-basis:300px。可以看到flex-basis的优先级高于width。


flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}


理解flex

为什么要理解flex，因为个人认为很有必要。

树立一个概念:flex默认情况一条横轴一条侧轴

  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Document</title>  
  6.         <style type="text/css">
  7.             div {
  8.                 border: 2px solid black;
  9.                 border-radius: 5px;
  10.             }
  11.  
  12.             .child-flex {
  13.                 background-color: rgb(203,234,253);
  14.             }
  15.  
  16.             .parent {
  17.                 height: 600px;
  18.                 background-color: rgb(250,234,202);
  19.                 display: flex;
  20.             }
  21.  
  22.             .flex-space-around {
  23.             }
  24.         </style>
  25.     </head>  
  26.     <body>
  27.         <div class="flex-space-around parent">
  28.             <div class="child-flex">
  29.                 space-around
  30.             </div>
  31.             <div class="child-flex">
  32.                 space-around
  33.             </div>
  34.             <div class="child-flex">
  35.                 space-around
  36.             </div>
  37.             <div class="child-flex">
  38.                 space-around
  39.             </div>
  40.             <div class="child-flex">
  41.                 space-around
  42.             </div>
  43.             <div class="child-flex">
  44.                 space-around
  45.             </div>
  46.         </div>
  47.     </body>  
  48. </html>

如图，子元素没有设置高度和宽度。可以看到，子元素自动充满侧轴的方向，宽度是文字充满的宽度。这里我们需要定义的是默认flex的布局为一条主轴一条侧轴。可能你会说没有两条主轴是因为你横轴的宽度没有超过父元素的宽度。继续看一个例子：

  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Document</title>  
  6.         <style type="text/css">
  7.             div {
  8.                 border: 2px solid black;
  9.                 border-radius: 5px;
  10.             }
  11.  
  12.             .child-flex {
  13.                 width: 200px;
  14.                 background-color: rgb(203,234,253);
  15.             }
  16.  
  17.             .parent {
  18.                 width: 800px;
  19.                 height: 600px;
  20.                 background-color: rgb(250,234,202);
  21.                 display: flex;
  22.             }
  23.         </style>
  24.     </head>  
  25.     <body>
  26.         <div class="flex-space-around parent">
  27.             <div class="child-flex">
  28.                 space-around
  29.             </div>
  30.             <div class="child-flex">
  31.                 space-around
  32.             </div>
  33.             <div class="child-flex">
  34.                 space-around
  35.             </div>
  36.             <div class="child-flex">
  37.                 space-around
  38.             </div>
  39.             <div class="child-flex">
  40.                 space-around
  41.             </div>
  42.         </div>
  43.     </body>  
  44. </html>

这个例子中我们设置了父元素宽度800px，子元素为200px。我们再看当前的页面展示：

可以看到flex自动将子元素的宽度设置为160px。这也更加说明了默认情况一条横轴一条侧轴。除非是我们加上flex-wrap去定义一条主线排不下，可以换行。我们继续上面的例子：

  1. .parent {
  2.     width: 800px;
  3.     height: 600px;
  4.     background-color: rgb(250,234,202);
  5.     display: flex;
  6.     flex-wrap: wrap;
  7. }


这是我们设置flex-wrap的情况下看到的结果，可以看到高度也已经felx处理了。

屏幕和浏览器窗口大小发生改变也可以灵活调整布局

  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Document</title>  
  6.         <style type="text/css">
  7.             div {
  8.                 border: 2px solid black;
  9.                 border-radius: 5px;
  10.             }
  11.  
  12.             .child-flex {
  13.                 width: 200px;
  14.                 background-color: rgb(203,234,253);
  15.             }
  16.  
  17.             .parent {
  18.                 width: 800px;
  19.                 height: 600px;
  20.                 background-color: rgb(250,234,202);
  21.                 display: flex;
  22.                 flex-wrap: wrap;
  23.             }
  24.         </style>
  25.     </head>  
  26.     <body>
  27.         <div class="flex-space-around parent">
  28.             <div class="child-flex">
  29.                 space-around
  30.             </div>
  31.             <div class="child-flex">
  32.                 space-around
  33.             </div>
  34.             <div class="child-flex">
  35.                 space-around
  36.             </div>
  37.             <div class="child-flex">
  38.                 space-around
  39.             </div>
  40.             <div class="child-flex">
  41.                 space-around
  42.             </div>
  43.         </div>
  44.     </body>  
  45. </html>


灵活的布局指的是什么呢？

我的理解是flex可以我们的设置自动修改子元素的属性去友好的展示在父元素的内部（个人理解）。

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

个人理解：在原先的布局方式中，float的存在是为了可以自由的控制div的位置。但是现在flex可以实现float的效果。举个例子，父元素中需要将三个div，前面两个放在一起靠在左侧，另一个div需要仅靠在右侧。猛一看好像实现不了。但是felx是可以实现的。

  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Document</title>  
  6.         <style type="text/css">
  7.             div {
  8.                 border: 2px solid black;
  9.                 border-radius: 5px;
  10.             }
  11.  
  12.             .child-flex {
  13.                 width: 200px;
  14.                 height: 100px;
  15.                 background-color: rgb(203,234,253);
  16.                 display: flex;
  17.                 justify-content: center;
  18.                 align-items: center;
  19.             }
  20.  
  21.             .parent {
  22.                 height: 600px;
  23.                 background-color: rgb(250,234,202);
  24.                 display: flex;
  25.                 justify-content: space-between;
  26.             }
  27.         </style>
  28.     </head>  
  29.     <body>
  30.         <div class="flex-space-around parent">
  31.             <div class="child-flex">
  32.                 <div class="child-flex">
  33.                 1
  34.             </div>
  35.             <div class="child-flex">
  36.                 2
  37.             </div>
  38.             </div>
  39.             <div class="child-flex">
  40.                 3
  41.             </div>
  42.         </div>
  43.     </body>  
  44. </html>


第二个clear属性没有作用，是因为flex是弹性布局，不会出现溢出的问题。
第三个vertical-align的属性可以依靠align-items实现。
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/241939
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号