search

博客列表 >2022.10.26第十课：flex容器与项目常用属性的学习

2022.10.26第十课：flex容器与项目常用属性的学习

启动未来
启动未来原创
2022年10月30日 22:40:41642浏览

flex容器与项目常用属性

一、笔记

flex:Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

flex布局常用属性，分为容器属性和项目属性：

  • 容器元素指的是显性声明display:flex或display:inline-flex的元素；
  • 项目元素指的是容器元素的子元素，注意，只是子元素，孙元素及之后的都不是
  • 容器元素也可以成为父级容器元素的项目元素，同理，项目元素也可以成为下级元素的容器元素

概念1：主轴：主轴由 flex-direction 定义，交叉轴垂直于它，布局的方向有行和列，例如flex-direction:row,那么row就是主轴，垂直于row的column就是交叉轴。
概念2：交叉轴：垂直于flex-direction属性值定义的主轴的轴就是交叉轴

概念3：起始线、终止线：start/end。主轴是row的情况下，起始线是容器的最左边，终止线是容器的最右边；主轴是column的情况下，默认，起始线是容器的顶部，终止线是容器的底部。

二、flex布局常用属性-容器属性

1、display

  • display:flex:块容器
  • dispaly:inline-flex：行内容器

2、flex-direction

  • 语法：flex-direction:row/column/row-reverse/column-reverse
  • 表示flex容器的排列方向:行/列/行逆序/列逆序

3、flex-wrap

  • 语法：flex:wrap/nowrap
  • 对于flex容器，项目的子元素总宽度大于容器最大宽度。如果flex-wrap的值设置为wrap，所以项目的子元素换行显示。

重点记忆一：

4、语法糖：flex-flow

  • 2和3中的两个属性：flex-direction和flex-wrap可以由一个属性flex-flow代替
  • 例：设置弹性布局的方向为row，不换行，代码表示为flex-flow:row nowrap;

5、justify-content

  • justify-content属性用来设置所有项目元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向
  • row:无论是否设置宽高，都能看到效果；
  • column：只有设置容器和项目的宽高才能看到效果
  • justify-content:stretch:所有项目元素沿主轴自动拉伸排列
  • justify-content:flex-start:所有项目元素沿主轴起始线排列（默认值）
  • justify-content:flex-end:所有项目元素沿主轴终止排列
  • justify-content:center:所有项目元素排列在主轴中间位置
  • justify-content:space-around:每个项目元素的左右空间相等。
  • justify-content:space-between:项目元素排列好之后的剩余空间拿出来，项目在容器的两端对齐
  • justify-content:evenly:容器的剩余空间平均分配到元素之间，所以所有元素之间间隔相等

6、align-items

  • align-items属性设置所有项目元素在交叉轴上的对齐方式，其属性值主要有4个。
  • 这个属性的初始值为stretch，这就是为什么flex 元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满 flex 容器 —— 最高的元素定义了容器的高度。
  • 语法：align-itemes
  • align-items:stretch
  • align-items:flex-start：（默认值）
  • align-items:flex-end
  • align-items:center

—- 注意—-

为了与grid布局同步记忆，我们可以：

将上述5中的justify-content可用place-content来代替；
将上述5中的align-items可用place-items来代替；

—-总结—-

通过以上分析，我们可以将flex布局中主要的容器属性归纳如下

  • display: 容器类型(块或行内)
  • flex-flow: 主轴方向与是否换行
  • place-content: 项目在”主轴”上的排列方式
  • place-items: 项目在”交叉轴”上的排列方式

三、flex布局常用属性-项目属性

为了更好地控制单个flex项目元素的排列方式，有5个属性可以作用于它们：

1、 flex-grow

  • 用来表示项目元素在主轴上有剩余空间时，是否自动增大，以占满剩余空间，（默认0）

2、 flex-shrink

  • 用来表示项目元素在主轴空间不不够时候是否自动缩小，以适应容器空间大小，（默认是1）

3、 flex-basis

  • 用来表示或计算项目元素的宽高,（默认值是auto）,表示自动，也就是完全根据子列表项自身尺寸渲染。在Flex布局中，flex-basis优先级是比width高的（可以理解为覆盖），渲染的优先级为min-width > || max-width > width > Content Size.

4、语法糖：flex

  • 1\2\3中的三个属性，可以统一由一个属性或简写flex代替，主要有以下几种形式
  • 明确概念：响应指的是项目大小是否自动适应容器大小调整而自动调整大小
  • flex:0 1 auto 默认值,也就是部分响应；
  • flex:1 1 auto 完全响应；
  • flex:0 0 auto 完全不响应

4、 place-self

  • 主要用来设置单个项目元素在交叉轴上的对齐方式
  • 主要的值有3个：start、end、center。注意align-items或place-items是设置全部的，而place-self是局部也就是单个项目元素的设置

5、order

  • order属性主要用来设置单个项目元素的显示顺序，数值越大越靠后排列；
  • 值可以是负数。

—-总结—-

**我们可以将flex项目元素的属性概括如下

  • flex: 项目在”主轴”上的缩放比例与宽度
  • place-self 某项目在”交叉轴”上的排列方式
  • order: 项目在”主轴”上的排列顺序

—-实例代码如下—-

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>主轴与交叉轴的互换:align-contents与align-items</title>
  8.     <style>
  10.         .box {
  11.             display:flex;
  12.             flex-direction:row-reverse;
  13.             background-color: lightblue;
  14.             width:500px;
  15.             height:300px;
  17.         /* 1.项目的主轴为row时 */
  18.             /* flex-flow:row nowrap; */
  19.             /* 所有项目元素起始线对齐 */
  20.             /* justify-content:start; */
  21.             /* 所有项目元素终止线对齐 */
  22.             /* justify-content:end; */
  23.             /* 所有项目主轴线中间对齐 */
  24.             /* justify-content:center; */
  25.             /* 两端对齐 */
  26.             /* justify-content:space-between; */
  27.             /* 每个元素左右分配同样的空间 */
  28.             /* justify-content:space-around; */
  29.             /* 每个间距左右空间大小相等，间距相等 */
  30.             /* justify-content:space-evenly; */
  32.             /* 2.项目的主轴为column时 */
  33.             flex-flow:row nowrap;
  34.             /* 所有项目元素起始线对齐 */
  35.             justify-content:start;
  36.             /* 所有项目元素终止线对齐 */
  37.             justify-content:end;
  38.             /* 所有项目主轴线中间对齐 */
  39.             justify-content:center;
  40.             /* 两端对齐 */
  41.             justify-content:space-between;
  42.             /* 每个元素左右分配同样的空间 */
  43.             justify-content:space-around;
  44.             /* 每个间距左右空间大小相等，间距相等 */
  45.             justify-content:space-evenly;
  47.             /* 3.项目在交叉轴上的对齐 */
  48.             align-items:start;
  49.             align-items:end;
  50.             align-items:center;
  51.             /* 交叉轴上的这三个属性不能用，无论交叉轴是横向的row还是纵向的column */
  52.             /* align-items:space-between;
  53.             align-items:space-around;
  54.             align-items:space-evenly; */
  55.         }
  57.         .one,.two,.three {
  58.             width:100px;
  59.             height:100px;
  60.             background-color: lightgreen;
  61.             border:1px solid #000;
  62.             /* flex-grow:1; */
  63.             flex-shrink:1;
  64.             flex-basis:1;
  65.         }
  67.         .three {
  68.             order:2;
  69.             place-self:center;
  71.         }
  72.         .two {
  73.             order:1;
  74.         }
  75.         .one {
  76.             order:3;
  77.             place-self:end;
  78.             place-self:start;
  79.             place-self:center;
  80.         }
  81.     </style>
  82. </head>
  83. <body>
  84.     <div class="box">
  85.         <div class="one">One</div>
  86.         <div class="two">Two</div>
  87.         <div class="three">Three
  88.             <br>has
  89.             <br>extra
  90.             <br>text
  91.         </div>
  92.       </div>
  93. </body>
  94. </html>
上一条：使用Grid布局高仿淘宝首页PC端+移动端[完整html,css源码](1028)下一条：隐式网格, 对齐方式与行列间隙的设置方式与使用场景、前提
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多