css自动布局display:flex第二弹——对元素

最新推荐文章于 2024-04-27 10:05:36 发布
最新推荐文章于 2024-04-27 10:05:36 发布
阅读量446 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/n_s_x14/article/details/105348015
版权

除了我在第一弹介绍的对容器的配置外，更细一步，还可以设置元素在容器内的特殊样式

之所以换一篇来介绍，是因为在上一篇已经能解决大多数样式布局问题了，但是在实际使用中特殊问题还是要特殊处理，本篇博客就是来介绍继总体布局后的样式：对元素的样式配置

首先，在介绍元素特殊样式之前，是假定读者已经知道了总体布局的配置方法。如果不了解display的总体配置，可能会在配置中会有些许无法理解的地方。

目录

运行环境及编写工具声明

重要参考链接

属性简介

正文

一、order:定义元素在排列中的优先级

1).取值:Integer

2)实例

二、flex-grow：定义元素占用当前行剩余空间的比例

1)取值:[0，1]

2)实例

1.例一

2.例二

3)结论

三、flex-shrink:按照元素自身比例缩小

1)取值:{非负整数}

2)demo

三、flex-basis:设置元素宽度

1)取值:像素点；单位:像素点px

2)demo

四、flex:flex-grow、flex-shrink、flex-basis的复合属性

1)取值：flex-grow(0-1) flex-shrink(非负整数) flex-basis(像素)

2)demo

五、align-self:对容器align-items针对元素的特殊配置样式

1）取值：{flex-start|start ,  flex-end|end , center , stretch , baseline }

2）实例

运行环境及编写工具声明

  • 操作系统：windows 10， 版本：1909
  • 浏览器：Chrome 版本80.0， Firefox 版本74.0
  • 技术版本：CSS3
  • 编写工具：HBuilderx 2.6.8
  • 像素测量工具：FastStone Capture
  • 完全实现本文样式需要的文件，大小：30kb

链接：https://pan.baidu.com/s/1HVS4w5MnxDGRfubRm4n4Yg
提取码：7x87

文件资源
个性字体文件

重要参考链接

属性简介

以下的所有属性作用于使用了动态布局的容器中，如果容器没有使用动态布局，那么容器下的子元素，即使使用了下列属性也没作用

  1. 容器的子元素样式属性order：定义子元素自身在父元素中的排列优先级，相对于其他元素设置的order属性值越小，优先级越高
  2. 容器内子元素样式属性flex-grow：设置子元素自身倍数放大
  3. 容器内子元素样式属性flex-shrink：设置子元素自身倍数缩小
  4. 容器内子元素样式属性flex-basis：定义在分配富余空间之前，占据主轴空间的像素位
  5. 容器内子元素样式属性flex：是flex-grow、flex-shrink、flex-basis的符合属性
  6. 容器内子元素样式属性align-self：允许子元素自定义子元素在父元素中的垂直排列方式

正文

在开始介绍属性之前，基础代码如下


<head>
   <style>
      @font-face {
         font-family: "myfont";
         src: url(UnidreamLED.ttf);
      }

      #body {
         margin: 250px auto;
         width: 400px;
         height: 400px;
         border-style: inset;
         border-width: 4px;
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: space-evenly;
         align-items: center;
         align-content: space-around;
      }

      [class^=item] {
         width: 100px;
         background-color: red;
         border-style: outset;
         border-width: 3px;
         border-color: black;
         text-align: center;
         font-family: myfont;
         font-size: 60px;
      }

   </style>
</head>

<body>
   <div id="body">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
      <div class="item4">4</div>
      <div class="item5">5</div>
   </div>
</body>
初始样式
初始样式

 

一、order:定义元素在排列中的优先级

虽然可以定义容器内元素的总体布局方式，但是有时候还是希望有些元素不按照元素加载方式来排列

1).取值:Integer

order的默认取值为零，也就是说没有给元素设置，他们的order值也是0。如果要将某个元素排列靠前，那么只需要将order值调小就行；相反，如果要将某个排列顺序往后，只需要将数字调大就行。

2)实例

前面省略
...
.item1 {
  order: 2;
}
.item5 {
  order: -1;
}
...
后面省略
order配置样图
图 1-1 order属性样例图

设置order配置后1号盒子的order值为2，所以跑到最后去了，5号盒子的order值为-1，所以跑到最前面去了

二、flex-grow：定义元素占用当前行剩余空间的比例

 

1)取值:[0，1]

这里取值是0到1之间的小数，默认值为0,。这个小数代表被设置的子元素占剩余宽度的比例，如果为1那么，代表该子元素占用全部的剩余空间。也许你会想使用百分比更合适，但是事实比较事与愿违，使用百分比，将无法生效。

2)实例

1.例一

前面省略
...
.item1 {
    /* 这里删除了order:2，下面新添加了配置*/
    flex-grow: 0.6;
}
.item5 {
    /* 这里删除了order:-1，新添加以下元素 */
    flex-grow: 1;
}
....
后面省略
flex-grwo配置样图
图 2-1 flex-grwo配置样图

从配置中得，1号盒子占用当前行剩余宽度的6成的宽度(剩余宽度空间划分为10成时)；而5号盒子，占用第二行的10成空间，也就是5号盒子占用当前行的所有剩余空间。

2.例二

在上面我们只是在一行中的一个元素做了富余空间占用配置，如果在一行中，多个元素的剩余空间占用比例之和等于1，那么久表示他们将共同吧剩余空间占完。

...
以上省略
.item1 {
    flex-grow:0.25;
}
.item3 {
    flex-grow: 0.75;
}
...
以下省略
flex-grow情况二
图 2-2 flex-grow样例图

 

3)结论

通过demo得出的结论，如果在在一行中设置元素的占用比例配置有多个，那么各个子元素的占用比例，将会按照各自的元素的flex-grow值，去除以 当前行所有元素的flex-grow值之和，得出的比值，就是这个元素占用剩余空间的比例。当然，如果所有行内所有flex-grow值之和大于1，那么当前行上的剩余将被占用完。

三、flex-shrink:按照元素自身比例缩小

这个属性只会在当前行宽度不够时才会触发的样式。但是，如果设置flex-wrap的值为wrap了，那么空间就不存在不够了，因为当空间不够的时候，会自动换行。所以在下面实例中flex-wrap的值将被设置为nowrap。

1)取值:{非负整数}

默认值为1，如果取值为0，表示不缩放。

2)demo

以上忽略
...
#body {
    margin: 250px auto;
    width: 400px;
    height: 400px;
    border-style: inset;
    border-width: 4px;
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; 注释掉是因为flex-wrap的默认值是nowrap*/
    justify-content: space-evenly;
    align-items: stretch;
}
.item1 {
    flex-shrink: 0;
}
.item5 {
    flex-shrink: 0;
}
...
以下忽略
按照自身比例缩小
按照自身比例缩小

如上图所示，1号和3号没有缩小，是因为他们的flex-shrink的值为0，表示当空间不足的时候，自身不缩小。而那些没有被自定义flex-shrink的，flex-shrink的值，都被赋予了默认值1，所以他们都是按照平等缩小比例缩小，以适应容器宽度。

我在介绍排列方向概念的时候，提到的，当一行的元素总宽度之和，在超过容器最大宽度的情况下，容器没有被冲破，就是因为其下的所有子元素的flex-shrink默认值都是为1，所以当容器宽度不够的时候，又没有设置flex-wrap可以换行的情况下，就缩减为自身了。

三、flex-basis:设置元素宽度

这个属性是用于在行宽被占满前设置的元素宽度值，至于你在什么地方还另外设置了这个元素的宽度，那得按照css样式渲染优先级来判定了。

1)取值:像素点；单位:像素点px

2)demo

以上省略
...
#body {
    margin: 250px auto;
    width: 400px;
    height: 400px;
    border-style: inset;
    border-width: 4px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;    /*注意这里已经取消注释了，在介绍flex-shrink的时候*/
    justify-content: space-evenly;
    align-items: stretch;
}
.item1 {
    flex-basis: 50px;
}
.item2 {
    flex-basis: 150px;
}
...
以下省略

 

flex-basis样例图
flex-basis样例图

四、flex:flex-grow、flex-shrink、flex-basis的复合属性

这个属性的优势在于，灵活性非常高，因为这个属性有两面性，当行的宽度不够时，可以按比缩小；当空间有富余时，可以自动扩张，还可以单独设置子元素的宽度，因此是非常灵活的属性。

1)取值：flex-grow(0-1) flex-shrink(非负整数) flex-basis(像素)

2)demo

前方省略
...
#body {
  margin: 250px auto;
  width: 400px;
  height: 400px;
  border-style: inset;
  border-width: 4px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}
...
中间省略
...
.item1 {
    flex: 0.5 1 250px;
}
...
后方省略
flex:1 3 200px样式例图
图 4-1 flex样式例图

五、align-self:对容器align-items针对元素的特殊配置样式

1）取值：{flex-start|start ,  flex-end|end , center , stretch , baseline }

如果读者已经熟悉了align-items的话，很容易看出来，这个跟align-items的可取值是一样的。因为这是对容器align-items的补充属性，使得动态布局更加具有灵活性，保证了对动态开发的灵活性。

2）实例

前方省略
...
#body {
  margin: 250px auto;
  width: 400px;
  height: 400px;
  border-style: inset;
  border-width: 4px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-around;
}
...
中间省略
...
.item1 {
  height: 150px;
}
.item2{
  align-self: flex-end;
}
.item5 {
  height: 100px;
}
...
后方省略
align-self:flex-end样式图例
align-self:flex-end样式图例

通过配置我们已经知道，容器的align-items的值是为垂直居中的，但是在其子元素3号盒子，设置了align-self后变成了，垂直向下对齐了。容器内除了2号盒子以外，都是在行内垂直居中的，这就是对元素的特殊样式配置

n_s_X14
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基础篇12—CSS3中displex:flex弹性盒布局详解
风中追风
02-27 375
长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 float 和 position。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。 以下简单的布局需求是难以或不可能用这样的工具（float 和 position）方便且灵活的实现的： 在父内容里面垂直居中一个块内容? 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用? 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同?
CSS基础知识——Flex弹性盒模型
weixin_45177251的博客
11-11 1148
Flex弹性盒模型弹性盒子的概念弹性盒子如何开启弹性盒子模型flex-direction 弹性盒子的概念 弹性盒子：是由弹性容器和弹性元素所组成的，它是通过设置display属性值为flex或inline-flex将其定义为弹性容器，弹性容器内包含了一个或多个弹性子元素，弹性盒子只定义了子元素如何在弹性容器内布局，弹性子元素通常在弹性盒子内一行显示，默认情况下，每个容器只有一行。 弹性盒子 如何开启弹性盒子模型 给容器设置 display:flex 或 display:inline-flex flex-
Flex 布局：语法篇
wgaoxian的博客
10-23 221
Flex 布局：语法篇 语法 display:flex Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必...
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 13万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
display flex布局
m0_59642141的博客
07-08 2303
calc算法、flex布局、项目属性、媒体查询、怪异盒模型、标准盒模型、em，rem区别、meta元数据标签、移动端、移动端1px边框
display:flex 布局
qq_43738982的博客
03-22 987
一：display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-ali...
弹性布局(flex)从认识到使用让你一看就懂
Lan_0316的博客
04-27 1002
什么是弹性布局？弹性布局（Flex布局）是一种CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
display: flex; Flex布局的详细介绍
weixin_46399753的博客
03-13 1068
前言 display：flex Flex布局在页面布局中应用的非常广泛，它能轻易的实现某些效果，但相对来说属性概念较多，想要掌握Flex布局并在项目中灵活运用也不是那么容易，在此我就来总结一下Flex布局的常用属性概念和用法，希望对你学习掌握有帮助。 一、什么是Flex布局？ Flex布局是2009年W3C提出了一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持...
【CSS布局】gird布局和flex布局
qq_43057018的博客
08-26 781
flex布局和grid布局的详细介绍
CSS布局----flex弹性布局(移动端完美解决方案）
weixin_52546522的博客
04-01 845
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性。 我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局网格布局，以后会和大家讲到 目录 1，如何使用 2， Flexbox的两根轴线 3， Flex 容器 4，API以及用例 1，- 如何使用-因为css用法过于简单，所以先给大家
弹性布局（display: flex）
最新发布
2401_84341405的博客
04-27 5410
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
display:flex 布局详解
weixin_43550562的博客
07-20 294
display:flex 布局详解 display:flex 布局详解
Css中，display属性值flex（弹性布局）、grid（网格布局）
害。代码嘛，可不就是敲着玩！
10-11 3298
display为flex，用来定义一个容器元素为一个弹性容器（flexcontainer），即其子元素（flexitems）也成为弹性项目（flexitems），从而实现弹性布局。设置display为flex时，还可相应设置子元素的一些样式。
【CSS】Flex布局语法
DeeJane0104的博客
08-30 477
一、Flex布局介绍Flexbox布局，官方称为CSS 弹性布局模型。它是 CSS3 中的一个新布局模块，旨在改进容器中的对齐、方向和顺序等。在弹性布局模型中，弹性容器的子容器可以在任何方向上布局，并且可以“调整”它们的大小，要么增大以填充未使用的空间，要么缩小以避免溢出父容器。子级的水平和垂直对齐都可以轻松操纵。
html新布局display:flex的常用用法
青春不打烊的博客
04-03 1655
每个项目左右间隔一致。2、设置单个项目在交叉轴的排列（和上面多行排列同理，就写进示例里了）justify-content:flex-end;默认值是1（收缩） 0 不收缩。
超简单 display:flex教学
前端小知识
06-25 1888
row：横向从左到右排列（左对齐），默认的排列方式。类似左浮动。row - reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。类似右浮动。column：纵向排列。column - reverse：反转纵向排列，从后往前排，最后一项排上。
flex布局（display:flex详解，容器的属性详解（主轴排列方式和对齐方式、换行、副轴和多根副轴对齐方向）、子元素属性详解（排列顺序、压缩放大计算方式、独立对齐、margin改变））
AIWWY的博客
05-27 1万+
目录 flex布局介绍 display:flex 与display:inline-flex区别 容器的属性 flex-direction flex-wrap flex-flow justify-content align-items align-content 子元素（flex item）属性 order flex-grow flex-shrink flex-basis flex align-self margin flex布局介绍 flex布局是flexible..
详细介绍 弹性盒子(display:flex)
qq_43532275的博客
09-05 2026
一篇文章让你搞明白弹性盒子的属性，详细介绍 弹性盒子(display:flex)属性
页面布局-----display:flex详解
weixin_46585382的博客
10-14 4万+
页面布局-----display:flex详解。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值