flex的缩写值的使用

最新推荐文章于 2022-12-20 00:58:00 发布
最新推荐文章于 2022-12-20 00:58:00 发布
阅读量810 收藏 1
点赞数
分类专栏： 前端学习 文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43801836/article/details/127695480
版权

flex的缩写值：flex的缩写值具体使用
flex: initial等同于设置flex: 0 1 auto flex属性的默认值。初始值，常用。
flex:1等同于设置flex: 1 1 0% （推荐）
flex:0等同于设置flex: 0 1 0%
flex:auto等同于设置flex: 1 1 auto
flex:none等同于设置flex: 0 0 auto（推荐）

flex-basis:0%表示建议支持是0，因此，设置flex:0的元素的最终尺寸表现为最小内容宽度；
flex-basis:auto表示固定尺寸由内容决定,最终尺寸通常表现为最大内容宽度。
在这里插入图片描述
在这里插入图片描述

只想看世界
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入了解 Flex 属性(1)，前端全栈开发
radcb55226的博客
04-06 910
假设CSS grid具有两列布局。这里的问题是日期没有对齐，它们应该在同一条线上(红色那条)。我们可以使用flexbox做到这一点。技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
CSS flex布局踩坑小记：flex-basis属性之0px与0%的差异
u010951953的博客
04-16 2814
TL;DR: 如果一个元素的 flex-basis属性 的值为百分数，且它父级元素（flex容器）在主轴方向上的尺寸没有被显式设置，此时 flex-basis 的值会被解析为 content。即此种情况下，0% 呈现的结果会与 0px 不同。 文章目录问题复现问题排查解惑我们应该去哪里寻找最准确、最可靠的答案？`flex-basis` 属性的含义？`flex-basis` 值为 `0px`、 `0%` 的差别在哪里？小结在浏览器中，`flex: 1` 的 `flex-basis` 值为什么不是W3C文档中
flex中的flex-grow、flex-shrink、flex-basis及缩写属性flex的使用场景
m0_51636525的博客
04-25 9861
1.flex-grow决定了flex items 如何扩展拉伸 可以设置任意非负数字（正小数、正整数、0），默认是0 当flex-container在main axis（主轴）方向上有剩余size（空间）时，flex-grow属性才生效 三个宽度120px（3*120=360）的元素放在一个宽度400px的父级元素中，父级元素使用flex布局 <div class="container"> <div class="item item1">120px</d.
flex-小记
weixin_43899694的博客
09-08 194
学习地址：https://www.cnblogs.com/qcloud1001/p/9848619.html 一、 弹性容器 元素声明属性 display：flex； 1、 属性 flex-direction: row / column / row-reverse / column-reverse; 主轴 ：flex-direction：row / column；水平/垂直 交叉轴：根据主轴自动...
flex:1及flex取值的理解
锦锦_jane的博客
09-08 4808
1. flex布局 参照：阮一峰的文章 2. flex:1的理解 2.1 概念 flex：是 flex-grow、flex-shrink、flex-basis的缩写，默认值为0 1 auto。后两个属性可选 剩余空间：父容器在主轴方向上的可用空间。 2.2 flex属性 2.2.1 flex-grow 2.2.2 flex-shrink 2.2.3 flex-basis 2.3 flex的取值 2.4 例子 2.5 参考文章
flex布局子项属性
2202_75549187的博客
12-08 898
flex布局子项属性
flex-container:使用Flex
03-27
- **flex**：简写属性，用于同时设置`flex-grow`、`flex-shrink`和`flex-basis`。 - **align-self**：允许子元素独立设置其在交叉轴上的对齐方式。 ### 实例应用 在`flex-container-master`这个项目中，可能包含...
flex_component.zip_flex
09-19
- `flex`是一个简写属性，等同于设置`flex-grow`, `flex-shrink` 和 `flex-basis`。例如，`flex: 1 0 auto;` 等同于 `flex-grow: 1; flex-shrink: 0; flex-basis: auto;`。 - `align-self: stretch`是默认值，使得...
flex布局分享.pptx
11-06
3. `flex-flow`：这是`flex-direction`和`flex-wrap`的简写形式。 4. `align-content`：当有多根轴线时，此属性决定了它们在交叉轴上的对齐方式。可选值包括`stretch`（拉伸）、`flex-start`、`flex-end`、`center`...
flex布局实战搭建网页页面
01-03
- `flex`: 一个简写属性，可以同时设置`flex-grow`、`flex-shrink`和`flex-basis`。 - `align-self`: 允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`。 通过这些属性，你可以实现诸如自适应宽度...
flex布局简单总结
01-08
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 注意 任何一个容器都可以指定为 flex 布局（行内元素也可以使用 flex 布局） Webkit 内核的浏览器，必须加上-webkit-前缀 设为...
Flex弹性布局
SHARECLUB
01-06 198
简介： Flexible Box的缩写，弹性布局，为盒模型提供最大的灵活性 容器: 任何容器都可以指定Flex布局，设置后，子元素的float,clear,vertical-align都失效 .box { display: flex; display: inline-flex; //行内元素也可以使用Flex布局 } 容器属性 flex-direction 定义容器的子元素的排列方向 row（默认值）: 水平方向，起点为左边 row-reverse: 水平方向，起点为右边 colum
flex布局中width和flex-basis区别
归小超博客
05-22 6455
flex-basis只要flex布局中才会产生作用，但是with不是，如果两者共用会有怎么样的变化，我拿了56版本的firfox，IE11，以及68版本的chrome进行了实验： 68版本的chrome： 1.当不设置width和flex-basis时，宽度默认为内容自身的宽度 2.设置width，不设置flex-basis，宽度正常随着width走，但是当width小于0时，则宽度恢复为自身内容宽度，这个就不放图了 3.不设置width，设置flex-basis，当flex-basis设置值小于自身内容宽
flex-basis 的真正的使用方法以及flex-shrink计算方法
lmmxxoo的博客
10-16 1万+
flex-basis flex-basis 属性用于设置或检索弹性盒伸缩基准值。 属性值 可以是长度单位，也可以是百分比，百分比是按照父元素的width为标准。 默认值为 0，不是 auto，如果取值为 auto 的话，它的值就等于 flex-items 的 width（或者默认的大小，width没有设置的话）。 使用方法 配合 flex-wrap 一起使用，如果 flex-wrap 的值为 no...
flex-basis
热门推荐
GuoZebin的博客
02-06 2万+
Oh My God，CSS flex-basis原来有这么多细节 为了演示方便，避免无谓的干扰，本文所有的尺寸均指水平尺寸，对应CSS均是宽度相关，例如width/min-width/max-width。 以前的我对flex-basis不屑一顾，以为就是个浮于表面的CSS属性。 最近深入研究后才发现，自己那是朱砂当红土，珍珠当泥丸，钻石当玻璃，檀木当柴火——完全不识货！ 在Flex布局中，...
一文搞懂flex:0,1,auto,none
程序员小明1024
12-20 2496
.markdown-body { color: rgba(56, 56, 56, 1); font-size: 15px; line-height: 30px; letter-spacing: 2px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open...
弹性布局flex-basis的理解
ou_nvhai的博客
07-22 4410
draft
flex:0是什么意思，flex:0在IE11遇到的问题
weixin_42475358的博客
08-31 3765
flex:0是什么意思，flex:0在IE11遇到的问题flex:0表示什么意思flex 各属性含义在ie中遇到的问题 flex:0表示什么意思 flex: 0等同于flex: 0 1 0%，也等同于{flex-grow: 0;flex-shrink: 1;flex-basis: 0%;}。 flex 元素如何根据其在 flex 容器中的所剩空间来动态拉伸或收缩，它是 flex-grow 、 flex-shrink 、 flex-basis 这三个属性的简化版。 单值为number时代表**flex:
css3弹性布局中的精髓flex属性深入理解，知识积累总结（1）
xu2034029667的博客
07-23 1983
前言：近日在浩如烟海的海量百度信息中，看了很多难以找到出处的人的各种各样文章，一些靠谱权威的专业性网站，或是一些大佬的文章，但是呢，要么专业性，权威性很强，具有很强的说服力，不过理解起来相当费力，一些通俗易懂的呢，专业性，权威性又得不到保障，很难分辨孰优孰劣，但如此模棱两可，八面玲珑的话，啥也不干，只写写文章还可以，但是要编写真正的代码，可不行，你总得需要一个不是标准的标准，来指导自己的编码规范吧...
flex布局 flex全解
最新发布
08-20
Flex布局（Flexible Box Layout）是一种用于网页布局的CSS3模块，它提供了一种更加灵活和自适应的方式来排列和对齐元素。Flex布局的设计目标是为了解决传统的CSS布局中的一些困难和限制。 Flex布局由容器（flex container）和项目（flex item）组成。容器是指应用Flex布局的父元素，而项目则是容器中的子元素。通过在容器上设置属性，可以控制项目在容器中的排列方式。 以下是Flex布局中常用的属性： 1. 容器属性： - `display: flex;`：将容器设置为Flex布局。 - `flex-direction: row/column;`：指定项目的排列方向。默认值为row，表示水平方向，可以设置为column，表示垂直方向。 - `flex-wrap: nowrap/wrap/wrap-reverse;`：控制项目是否换行。nowrap表示不换行，wrap表示自动换行，wrap-reverse表示自动换行且倒序排列。 - `flex-flow: <flex-direction> <flex-wrap>;`：flex-direction和flex-wrap的简写形式。 - `justify-content: flex-start/center/flex-end/space-between/space-around/space-evenly;`：控制项目在主轴上的对齐方式。flex-start表示靠左对齐，center表示居中对齐，flex-end表示靠右对齐，space-between表示两端对齐，space-around表示平均分布，space-evenly表示平均分布且间距相等。 - `align-items: flex-start/center/flex-end/stretch/baseline;`：控制项目在交叉轴上的对齐方式。flex-start表示靠上对齐，center表示居中对齐，flex-end表示靠下对齐，stretch表示拉伸填充，baseline表示基线对齐。 - `align-content: flex-start/center/flex-end/space-between/space-around/stretch;`：控制多行项目在交叉轴上的对齐方式。与align-items的具体效果类似。 2. 项目属性： - `order: <integer>;`：控制项目的排列顺序。默认值为0，可以为正整数或负整数。 - `flex-grow: <number>;`：控制项目的放大比例。默认值为0，表示不放大，可以设置为正整数。 - `flex-shrink: <number>;`：控制项目的缩小比例。默认值为1，表示可以缩小，可以设置为正整数。 - `flex-basis: <length>|auto;`：指定项目在主轴上的初始大小。默认值为auto，表示由项目的内容决定，可以设置为具体的长度值。 - `flex: <flex-grow> <flex-shrink> <flex-basis>;`：flex-grow、flex-shrink和flex-basis的简写形式。 - `align-self: auto/flex-start/center/flex-end/stretch/baseline;`：控制单个项目在交叉轴上的对齐方式，覆盖容器的align-items属性。 Flex布局具有很强的灵活性和自适应性，可以轻松实现各种复杂的网

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值